<template>
    <!-- 表单控件属性配置 -->
    <div class="form-edit">
        <div class="box" v-if="item.type">
            <div>控件类型：{{item.name}}</div>
            <component
                class="component"
                :is="'form-' + item.type"
                :form-item="item"
                :key="item.uuid"
                v-if="show"
            ></component>
        </div>
        <div class="empty" v-else>
            <i class="el-icon-edit-outline"></i>
            <p>没有选定的控件</p>
            <p>请添加或选择一个控件</p>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    name: 'FormEdit',
    props: {
        applicable: { type: String, default: 'Form' },
        list: { type: Array, default: () => [] },
        item: { type: Object, default: () => ({}) },
        index: { type: Number, default: () => -1 },
        subIndex: { type: Number, default: () => -1 }
    },
    components: {
        FormInput: () => import('./formEdit/FormInput'),
        FormTextarea: () => import('./formEdit/FormTextarea'),
        FormRadio: () => import('./formEdit/FormRadio'),
        FormCheckbox: () => import('./formEdit/FormCheckbox'),
        FormDate: () => import('./formEdit/FormDate'),
        FormAddress: () => import('./formEdit/FormAddress'),
        FormContacts: () => import('./formEdit/FormContacts'),
        FormInfo: () => import('./formEdit/FormInfo'),
        FormSubform: () => import('./formEdit/FormSubform'),

        // formType
        FormDateRange: () => import('./formEdit/formType/FormDateRange'),
        FormImg: () => import('./formEdit/formType/FormImg'),
        FormFile: () => import('./formEdit/formType/FormFile'),
        FormCalculate: () => import('./formEdit/formType/FormCalculate'),

        // questionType
        FormRadioText: () => import('./formEdit/questionType/FormRadioText'),
        FormCheckboxText: () => import('./formEdit/questionType/FormCheckboxText'),
        FormRadioImg: () => import('./formEdit/questionType/FormRadioImg'),
        FormCheckboxImg: () => import('./formEdit/questionType/FormCheckboxImg'),
        FormRadioMatrix: () => import('./formEdit/questionType/FormRadioMatrix'),
        FormRate: () => import('./formEdit/questionType/FormRate'),
        FormSort: () => import('./formEdit/questionType/FormSort'),
        FormGradeClass: () => import('./formEdit/questionType/FormGradeClass')
    },
    data () {
        const titleAttr = { maxlength: 10, 'show-word-limit': true }
        return {
            show: true, // 更新组件
            titleAttr: this.applicable === 'Form' ? titleAttr : {}
        }
    },
    created () {
        if (this.applicable === 'Form') this.saveTitleAttr({ maxlength: 10, 'show-word-limit': true })
    },
    methods: {
        ...mapMutations(['saveTitleAttr']),
        // 强制更新（外部调用）
        forceUpdate () {
            this.show = false
            this.$nextTick(() => {
                this.show = true
            })
        },
        // 校验计算公式的对象是否有效
        verifyCalculate (formItem, sync) {
            let isError = false
            formItem.formula.forEach((formulaItem, formulaIndex) => {
                if (formulaItem.uuid) {
                    let error = true
                    // 判断 uuid 是否存在，类型是否符合
                    const verify = (item, subTitle = '') => {
                        if (item.uuid === formulaItem.uuid) {
                            if (formulaItem.type === 'input') {
                                if (item.inputType === 'number') {
                                    formulaItem.title = subTitle + item.title
                                    error = false
                                }
                            } else if (formulaItem.type === 'dateRange') {
                                if (item.date.time) {
                                    formulaItem.title = subTitle + item.date.title
                                    error = false
                                }
                            } else {
                                formulaItem.title = subTitle + item.title
                                error = false
                            }
                        }
                    }
                    this.$parent.list.forEach(item => {
                        verify(item)
                        if (item.type === 'subform') item.list.forEach(n => verify(n, item.title + ' · '))
                    })
                    if (error) {
                        formulaItem.title = formulaItem.title.replace(' (无效)', '') + ' (无效)'
                        isError = true
                    }
                }
            })
            formItem.verifyError = false
            // 如果出错了则刷新提示（提交时调用需异步刷新）
            if (isError) {
                if (sync) {
                    formItem.verifyError = true
                } else {
                    this.$nextTick(() => {
                        formItem.verifyError = true
                    })
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.form-edit {
    padding: 15px 20px;
}
.box /deep/ .component > div {
    margin-top: 15px;
    .title {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
    }
}
.empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    color: #909399;
    i {
        font-size: 36px;
        margin-bottom: 10px;
    }
}
</style>
