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

<template>
    <!-- set -->
    <el-dialog
        :visible.sync="dialogVisible"
        @closed="closeDialog"
        v-bind="dialogExtend"
        class="dialog-list-select-wrapper">
        <!-- content -->
        <div>
            <!-- content show -->
            <bk-select-content
                v-model="currentValue"
                :handleRemove="handleDialogRemove"
                :props="props" />
            <!-- list -->
            <bk-list
                ref="list"
                :search-config="searchConfig"
                :table-config="tableConfig"
                :button-config="buttonConfig"
                class="list-show" />
        </div>
        <!-- content end-->
        <span
            slot="footer"
            class="dialog-footer">
            <el-button
                @click="dialogVisible = false"
                type="primary">取 消</el-button>
            <el-button
                @click="handleDialogValue"
                type="primary">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    name: 'BkDialogListSelect',
    props: {
        materialConfig: {
            type: Object,
            required: true
        },
        dialogExtend: {
            type: Object,
            default: () => ({
                width: '900px',
                title: '请选择'
            })
        },
        props: {
            type: Object,
            default: () => ({
                label: 'label',
                value: 'value'
            })
        },
        // 显示
        visible: {
            type: Boolean
        },
        // 选中的参数
        value: {
            type: Array,
            default: () => ([])
        }
    },
    data() {
        const that = this;
        const { http } = this.materialConfig.tableConfig;
        return {
            // 当前是否已经加载
            loadedOnce: false,
            http,
            currentValue: this.value,
            dialogVisible: this.visible,
            searchConfig: this.materialConfig.searchConfig,
            tableConfig: {
                order: false,
                data: [
                    {
                        name: this.props.label,
                        label: '名称'
                    },
                    ...this.materialConfig.tableConfig.data,
                    {
                        name: 'operation',
                        label: '操作',
                        width: '80px',
                        type: 'operation',
                        data: [
                            {
                                name: 'add',
                                label: '选择',
                                callback(table) {
                                    const { tableData, operationIndex } = table;
                                    const row = tableData[operationIndex];
                                    that.appendData(row);
                                }
                            }
                        ]
                    }
                    
                ]
            },
            buttonConfig: {
                ...that.materialConfig.buttonConfig,
                data: [
                    {
                        label: '选择选中',
                        callback: table => {
                            const { tableSelection } = table;
                            this.appendListData(tableSelection);
                        }
                    }
                ]
            }
        };
    },
    watch: {
        value(val) {
            this.currentValue = val;
        },
        visible(val) {
            this.dialogVisible = val;
            if (this.loadedOnce && val) {
                this.loadTableData();
            }
            this.loadedOnce = true;
        },
        'http.params': {
            handler() {
                this.loadTableData();
            }
        }
    },
    methods: {
        /**
         * 加载列表数据
         */
        loadTableData() {
            this.$nextTick(() => {
                this.$refs.list.getTableData();
            });
        },
        
        /**
         * 弹窗关闭事件
         */
        closeDialog() {
            this.$emit('update:visible', false);
        },
        
        /**
         * 确定选择后向父组件推送数据
         */
        handleEmit() {
            this.$emit('update:visible', false);
            this.$emit('change', this.currentValue);
        },
        
        /**
         * 弹窗选择框数据删除事件
         * @param {Number} index 要删除数据的索引
         */
        handleDialogRemove(index) {
            this.currentValue.splice(index, 1);
        },
        
        /**
         * 单条数据选择选中事件
         * @param {Array} data 选择的数据对象
         */
        appendData(data) {
            // 已存在的数据对象
            const selectedObj = this.currentValue.find(val => val[this.props.value] === data[this.props.value]);
            if (selectedObj) {
                return this.$message.warning(`${selectedObj[this.props.label]}已经存在`);
            }
            // 累加数据
            this.currentValue.push(data);
            return this.currentValue;
        },
        
        /**
         * 多条数据选择选中事件
         * @param {Array} datas 多条数据集合数组
         */
        appendListData(datas) {
            datas.forEach(data => {
                this.appendData(data);
            });
        },
        
        /**
         * 弹窗确认选择事件
         */
        handleDialogValue() {
            this.$emit('change', this.currentValue);
            this.handleEmit(this.currentValue);
        }
    }
};
</script>
