<template>
    <!-- 选项关联设置 -->
    <div>
        <el-link type="primary" @click="show">选项关联设置</el-link>
        <el-dialog class="dialog" width="800px" title="选项关联设置" :visible.sync="visible">
            <p class="info">根据选择的选项，显示选项关联的控件（被关联的控件会在表单填写页面隐藏），只能关联本层级的选项。</p>
            <div class="set">
                <dl class="left">
                    <dt>选项</dt>
                    <dd
                        :class="{ active: optionIndex === index }"
                        v-for="(item, index) in option.list"
                        :key="index"
                        @click="optionIndex = index"
                    >{{item.name}}</dd>
                </dl>
                <dl class="right">
                    <dt>关联并显示字段</dt>
                    <el-checkbox-group
                        v-for="(groupItem, groupIndex) in linkList.length"
                        :key="groupIndex"
                        v-model="linkList[groupIndex]"
                        v-show="optionIndex === groupIndex"
                    >
                        <el-checkbox
                            v-for="(item, index) in formList"
                            :key="index"
                            :label="item.uuid"
                        >{{item.title}}</el-checkbox>
                    </el-checkbox-group>
                </dl>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        option: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            form: this.$store.state.form,
            visible: false,
            optionIndex: -1, // 当前左边要关联的选项
            linkList: [], // 左边临时存储的关联 id
            formList: [] // 右边被关联的表单控件
        }
    },
    methods: {
        // 选项关联
        show () {
            if (this.option.list.length) {
                this.optionIndex = 0
                this.linkList = this.option.list.map(item => item.link)
                this.getformList()
                this.visible = true
            } else {
                this.$message.warning('请先添加选项')
            }
        },
        // 获取被关联的表单控件（排除自己和已经被其他单选所关联的，避免死循环）
        getformList () {
            // 只能获取和自身层级一样的控件，即外面的拿外面的，子表单内拿子表单内的
            const unSelf = item => item.uuid !== this.form.formItem.uuid
            const isRadio = item => /^(radio|radioText)$/.test(item.type)
            const isUsed = item => item.option.list.some(item => item.link.some(n => n === this.form.formItem.uuid))
            const unSelfOrUsed = item => unSelf(item) && !(isRadio(item) && isUsed(item))
            const subform = this.form.list[this.form.index]
            const subformTitle = item => ({ title: subform.title + ' · ' + item.title, uuid: item.uuid })
            this.formList = this.form.subIndex === -1
                ? this.form.list.filter(unSelfOrUsed)
                : subform.list.filter(unSelfOrUsed).map(subformTitle)
        },
        // 保存
        save () {
            this.linkList.forEach((item, index) => {
                this.option.list[index].link = [...item]
            })
            this.visible = false
        }
    }
}
</script>

<style lang="less" scoped>
.dialog {
    .info {
        margin-bottom: 10px;
    }
    .info, .el-textarea {
        font-size: 16px;
    }
    .set {
        display: flex;
        dl {
            border: 1px solid #DCDFE6;
            line-height: 40px;
            min-height: 320px;
            &.left {
                width: 300px;
            }
            &.right {
                flex-grow: 1;
                margin-left: -1px;
            }

            dt {
                text-align: center;
                border-bottom: 1px solid #DCDFE6;
            }
            dd {
                cursor: pointer;
                padding: 10px 20px;
                line-height: 20px;
                &.active {
                    color: #fff;
                    background-color: #409EFF;
                }
            }
            .el-checkbox {
                display: block;
                padding: 0 20px;
            }
        }
    }
}
</style>
