<template>
    <!-- 年班级 -->
    <div>
        <basic-edit></basic-edit>
        <div>
            <div class="title">默认值：</div>
            <el-cascader
                v-for="(item, index) in list"
                :key="index"
                :placeholder="typeList[index].name"
                :options="item"
                :props="{
                    label: 'realname',
                    value: 'id',
                    expandTrigger: 'hover',
                    emitPath: false,
                    multiple: formItem.verify.type === 'checkbox'
                }"
                clearable
                collapse-tags
                :show-all-levels="false"
                v-model="formItem.option.value"
                @change="change(index)"
                ref="cascader"
                v-show="formItem.option.type - 1 === index"
            ></el-cascader>
        </div>
        <type-edit
            title="年班级类型"
            :list="typeList"
            v-model="formItem.option.type"
            @change="clear"
        ></type-edit>
        <type-edit
            title="选择类型"
            :list="verifyList"
            v-model="formItem.verify.type"
            @change="verifyTypeChange"
        ></type-edit>
        <verify-edit></verify-edit>
    </div>
</template>

<script>
export default {
    name: 'FormGradeClass',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        TypeEdit: () => import('@/common/formDesign/components/formEdit/components/TypeEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem,
            list: [],
            classList: [],
            typeList: [
                { name: '年级-班级', value: 1 },
                { name: '年级', value: 2 }
            ],
            verifyList: [
                { name: '仅允许单选', value: 'radio' },
                { name: '允许多选', value: 'checkbox' }
            ]
        }
    },
    created () {
        this.init()
        this.initData()
    },
    methods: {
        // 初始化
        init () {
            if (!this.formItem.verify) {
                this.$set(this.formItem, 'value', '')
                this.$set(this.formItem, 'option', {
                    value: '',
                    type: 1
                })
                this.$set(this.formItem, 'verify', {
                    type: 'radio',
                    required: false
                })
            }
        },
        // 获取年班级
        initData () {
            if (sessionStorage.formDesignGradeClassList) {
                this.list = JSON.parse(sessionStorage.formDesignGradeClassList)
                this.classList = this.list[0].flatMap(item => item.children)
            } else {
                this.$api.commonApi.getGradeClass().then(res => {
                    if (res.data.Status) {
                        const map = (list, deep) => {
                            return list.map(item => {
                                const obj = { id: item.id, realname: item.fullname }
                                if (deep) obj.children = map(item.children)
                                return obj
                            })
                        }
                        this.list = [map(res.data.Data, true), map(res.data.Data)]
                        this.classList = this.list[0].flatMap(item => item.children)
                        sessionStorage.formDesignGradeClassList = JSON.stringify(this.list)
                    }
                })
            }
        },
        // 默认值同步
        change (index) {
            if (this.formItem.verify.type === 'radio') {
                setTimeout(() => {
                    this.formItem.value = this.$refs.cascader[index].$data.inputValue
                })
            } else {
                if (this.formItem.option.type === 1) {
                    const map = value => this.classList.find(item => item.id === value).realname
                    this.formItem.value = this.formItem.option.value.map(map)
                } else {
                    const map = value => this.list[1].find(item => item.id === value).realname
                    this.formItem.value = this.formItem.option.value.map(map)
                }
            }
        },
        // 校验类型变化
        verifyTypeChange (value) {
            if (value === 1) {
                this.formItem.value = ''
                this.formItem.option.value = ''
            } else {
                this.formItem.value = []
                this.formItem.option.value = []
            }
            this.clear()
        },
        // 清除默认值
        clear () {
            this.formItem.value = this.formItem.verify.type === 'radio' ? '' : []
            this.formItem.option.value = this.formItem.verify.type === 'radio' ? '' : []
        }
    }
}
</script>

<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
</style>
