<template>
    <div class="_fd-radius-input">
        <ConfigItem :label="t('style.borderRadius')">
            <SizeInput :unit="unit" v-model="style.com" @change="batch"/>
            <template #append>
                <div class="_fd-radius-con">
                    <div class="_fd-radius-item">
                        <div class="_fd-radius-icon" style="transform: rotate(180deg);">
                            <i class="fc-icon icon-radius"></i>
                        </div>
                        <SizeInput :unit="unit" v-model="style.left" @change="onInput"/>
                    </div>
                    <div class="_fd-radius-item">
                        <div class="_fd-radius-icon" style="transform: rotate(-90deg);">
                            <i class="fc-icon icon-radius"></i>
                        </div>
                        <SizeInput :unit="unit" v-model="style.top" @change="onInput"/>
                    </div>
                    <div class="_fd-radius-item">
                        <div class="_fd-radius-icon" style="transform: rotate(90deg);">
                            <i class="fc-icon icon-radius"></i>
                        </div>
                        <SizeInput :unit="unit" v-model="style.bottom" @change="onInput"/>
                    </div>
                    <div class="_fd-radius-item">
                        <div class="_fd-radius-icon">
                            <i class="fc-icon icon-radius"></i>
                        </div>
                        <SizeInput :unit="unit" v-model="style.right" @change="onInput"/>
                    </div>
                </div>
            </template>
        </ConfigItem>
    </div>
</template>

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

export default defineComponent({
    name: 'RadiusInput',
    components: {ConfigItem, ColorInput, SizeInput},
    inject: ['designer'],
    emits: ['input', 'change'],
    props: {
        value: String
    },
    watch: {
        value(n) {
            n !== this.oldValue && this.tidyValue();
        },
    },
    computed: {
        t() {
            return this.designer.t;
        },
    },
    data() {
        return {
            visit: false,
            active: '',
            style: {
                com: '',
                left: '',
                right: '',
                top: '',
                bottom: '',
            },
            unit: ['px', '%'],
            oldValue: '',
        }
    },
    methods: {
        batch() {
            this.style.left = this.style.com;
            this.style.right = this.style.com;
            this.style.top = this.style.com;
            this.style.bottom = this.style.com;
            this.onInput();
        },
        tidyValue() {
            this.style = {
                com: '',
                left: '',
                right: '',
                top: '',
                bottom: '',
            };
            if (!this.value) {
                return;
            }
            let split = (this.value || '').split(' ').filter(v => v !== '');
            if (split.length === 1) {
                split = [split[0], split[0], split[0], split[0]];
            } else if (split.length === 2) {
                split = [split[0], split[1], split[0], split[1]];
            } else if (split.length === 3) {
                split = [split[0], split[1], split[2], split[1]];
            }
            this.style.left = split[0];
            this.style.top = split[1];
            this.style.right = split[2];
            this.style.bottom = split[3];
            this.updateCom();
        },
        updateCom() {
            let value = `${this.style.left || '0px'} ${this.style.top || '0px'} ${this.style.right || '0px'} ${this.style.bottom || '0px'}`;
            this.style.com = value.replaceAll(this.style.left, '').trim() === '' ? this.style.left : '';
        },
        onInput() {
            let value = `${this.style.left || '0px'} ${this.style.top || '0px'} ${this.style.right || '0px'} ${this.style.bottom || '0px'}`;
            if ('' === `${this.style.left}${this.style.top}${this.style.right}${this.style.bottom}`.trim()) {
                value = '';
            } else {
                this.updateCom();
            }
            this.oldValue = value;
            this.$emit('input', value);
            this.$emit('change', value);
        },
    },
    created() {
        this.tidyValue();
    }

});
</script>

<style>
._fd-radius-input {
    width: 100%;
    display: flex;
    flex-direction: column;
}

._fd-radius-con {
    display: flex;
    flex-wrap: wrap;
}

._fd-radius-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    padding: 5px 0;
    box-sizing: border-box;
}

._fd-radius-item ._fd-radius-icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

._fd-radius-item ._fd-size-input .el-input-number {
    width: 70px;
}
</style>
