<template>
    <div class="w-100">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"
                          :style="labelStyle">{{$t('width')}}</span>
                </div>
                <input placeholder="150px or 100%"
                       class="form-control"
                       v-model="config.width"
                       dir="ltr" />
                <div class="input-group-append">
                    <button :style="{width: '50px'}"
                            class="btn btn-primary"
                            :title="$t('full-width')"
                            @click="fullWidthClick">
                        <svg style="width:24px;height:24px"
                             viewBox="0 0 24 24">
                            <path fill="#ffffff"
                                  d="M8,14V18L2,12L8,6V10H16V6L22,12L16,18V14H8Z" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"
                          :style="labelStyle">{{$t('height')}}</span>
                </div>
                <input placeholder="150px or 100%"
                       class="form-control"
                       v-model="config.height"
                       dir="ltr" />
            </div>
        </div>
    </div>
</template>

<script>
import loc from './youtube.resx';
import Youtube from './Youtube';
import { i18n } from "../../../../localization/vue-i18n";
import isEqual from 'lodash.isequal';
var d = new Youtube();
export default {
    loc: i18n(loc),
    props: {
        value: {
            type: Object,
            default() {
                return {
                    width: "560px",
                    height: "320px"
                };
            }
        }
    },
    data() {
        return {
            config: Object.assign({}, this.value)
        };
    },
    computed: {
        labelStyle() {
            return { width: '150px' };
        }
    },
    methods: {
        fullWidthClick() {
            this.config.width = '100%';
        }
    },
    watch: {
        value: {
            handler() {
                if (!isEqual(this.config, this.value)) {
                    this.config = Object.assign({}, this.config, this.value);
                }
            },
            deep: true
        },
        config: {
            handler() {
                if (!isEqual(this.config, this.value)) {
                    this.$emit('input', this.config);
                }
            },
            deep: true
        },
    }
}
</script>