<template>
    <div class="_fd-box-size-input">
        <ConfigItem :label="t('props.size')" :info="Object.keys(modelValue).length > 0 ? t('struct.configured') : ''">
            <template #append>
                <el-form label-position="top" size="mini">
                    <el-form-item :label="t('style.' + key)" v-for="key in keys" :key="key">
                        <SizeInput v-model="boxStyle[key]" @change="onInput"></SizeInput>
                    </el-form-item>
                    <el-form-item :label="t('style.overflow.name')" style="grid-column: span 2;">
                        <el-radio-group :value="boxStyle.overflow">
                            <el-tooltip
                                effect="dark"
                                :content="t('style.overflow.' + item.value)"
                                placement="top"
                                persistent
                                :hide-after="0"
                                v-for="item in overflow"
                                :key="item.value"
                            >
                                <el-radio-button :label="item.value" :value="item.value"
                                                 @click="changeOverflow(item.value)">
                                    <template v-if="item.text">
                                        <span style="font-size: 12px;line-height: 16px;">Auto
                                        </span>
                                    </template>
                                    <template v-else>
                                        <i class="fc-icon" :class="item.icon"></i>
                                    </template>
                                </el-radio-button>
                            </el-tooltip>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </template>
        </ConfigItem>
    </div>
</template>

<script>
import {defineComponent} from 'vue';
import ConfigItem from './ConfigItem.vue';
import SizeInput from './SizeInput.vue';

export default defineComponent({
    name: 'BoxSizeInput',
    components: {SizeInput, ConfigItem},
    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        }
    },
    inject: ['designer'],
    emits: ['update:modelValue', 'change'],
    model: {
        prop: 'modelValue',
        event: 'update:modelValue',
    },
    data() {
        return {
            overflow: [
                {
                    value: 'visible',
                    icon: 'icon-eye',
                },
                {
                    value: 'hidden',
                    icon: 'icon-eye-close',
                },
                {
                    value: 'scroll',
                    icon: 'icon-scroll',
                },
                {
                    value: 'auto',
                    text: 'Auto',
                },
            ],
            keys: ['width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight'],
            boxStyle: {
                width: '',
                minWidth: '',
                maxWidth: '',
                height: '',
                minHeight: '',
                maxHeight: '',
                overflow: '',
            },
        }
    },
    watch: {
        modelValue() {
            this.tidyValue();
        },
    },
    computed: {
        t() {
            return this.designer.t;
        }
    },
    methods: {
        tidyValue() {
            this.boxStyle = {
                width: '',
                minWidth: '',
                maxWidth: '',
                height: '',
                minHeight: '',
                maxHeight: '',
                overflow: '',
            };
            if (!this.modelValue) {
                return;
            }
            Object.keys(this.boxStyle).forEach(k => {
                if (this.modelValue[k]) {
                    this.boxStyle[k] = this.modelValue[k];
                }
            });
        },
        onInput() {
            const style = Object.keys(this.boxStyle).reduce((acc, key) => {
                if (this.boxStyle[key] !== '') {
                    acc[key] = this.boxStyle[key]
                }
                return acc
            }, {})
            this.$emit('update:modelValue', style)
            this.$emit('change', style)
        },
        changeOverflow(val) {
            this.boxStyle.overflow = this.boxStyle.overflow === val ? '' : val;
            this.onInput();
        },
        change(type, e) {
            this.boxStyle[type] = e.target.value;
        },
    },
    created() {
        this.tidyValue();
    }
});

</script>

<style>
._fd-box-size-input .el-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    grid-column-gap: 10px;
}

._fd-box-size-input .el-radio-group {
    width: 100%;
    display: flex;
}

._fd-box-size-input .el-radio-button__inner {
    width: 100%;
    padding: 4px;
}

._fd-box-size-input .el-radio-button {
    flex: 1;
}

._fd-box-size-input ._fd-size-input .el-input-number--mini {
    width: 100%;
}
</style>