/*
 * @Author: housy
 * @Email: housy@guahao.com
 * @Date: 2019-06-20 16:05:48
 * @Last Modified by: qiuwt
 * @Last Modified time: 2021-08-10 14:05:09
 * @Description: 列表选择组件 作废
 */

<template>
    <section class="list-select-box">
        <el-button
            v-if="!readonly"
            @click="openDialog"
            type="primary">
            选择
        </el-button>
        <!-- content show -->
        <bk-select-content
            v-model="formParams[name]"
            :readonly="readonly"
            :handleRemove="handleRemove"
            :props="props" />
        <!-- list box -->
        <bk-dialog-list-select
            :visible.sync="dialogVisible"
            v-model="dialogValue"
            :materialConfig="materialConfig"
            :props="props"
            :dialogExtend="materialConfig.dialogExtend"
            @change="handleCurrentValue" />
    </section>
</template>
<script>
export default {
    name: 'BkListSelect',
    inject: ['elFormItem'],
    props: {
        materialConfig: {
            type: Object,
            required: true
        },
        formParams: {
            type: Object,
            required: true
        },
        readonly: {
            type: Boolean
        },
        // 字段配置
        props: {
            type: Object,
            default: () => ({
                label: 'label',
                value: 'value'
            })
        }
    },
    data() {
        return {
            name: '',
            dialogVisible: false,
            dialogValue: []
        };
    },
    created() {
        this.name = this.materialConfig.name;
        if (!this.formParams[this.name]) this.formParams[this.name] = [];
    },
    methods: {
        /**
         * 值发生变化向父组件推送并触发校验
         * @param {Array} val  选择的地区对象数组
         */
        handleValueChange(val) {
            this.$emit('change', val);
            if (this.elFormItem) {
                this.elFormItem.onFieldChange();
            }
        },
        
        /**
         * 表单展示区域的删除操作
         * @param {Number} index 要删除数据的索引
         */
        handleRemove(index) {
            this.formParams[this.name].splice(index, 1);
            this.handleValueChange(this.formParams[this.name]);
        },
        
        /**
         * 显示弹窗并同步弹窗选择区域和表单选择区域的值
         */
        openDialog() {
            this.dialogValue = JSON.parse(JSON.stringify(this.formParams[this.name]));
            this.dialogVisible = true;
        },
        
        /**
         * 弹框确定按钮点击事件
         */
        handleCurrentValue() {
            this.formParams[this.name] = JSON.parse(JSON.stringify(this.dialogValue));
            this.handleValueChange(this.dialogValue);
        }
    }
};
</script>
<style lang="scss" scoped>
.list-select-box {
    width: 100%;
}
</style>
