<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="80%">
        <el-card shadow="never">
            <userSearch @search="reload" />
            <ele-split-layout width="244px" allow-collapse :right-style="{ overflow: 'hidden' }">
                <div class="ele-border-lighter split-layout-right-content">
                    <AssetTree ref="assetTreeRef" :id="categoryLevelId" @handleNodeClick="handleNodeClick" />
                </div>
                <!-- 表格 -->
                <template v-slot:content>
                    <ele-pro-table ref="table" :columns="columns" :datasource="datasource" row-key="id" height="calc(100vh - 350px)"
                        class="dict-table" :selection.sync="selection">
                    </ele-pro-table>
                </template>
            </ele-split-layout>
        </el-card>
        <div class="btns">
            <el-button type="primary" size="small" @click="selected">选择</el-button>
            <el-button size="small" @click="handleClose">关闭</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import AssetTree from '@/components/AssetTree';
import userSearch from './user-search.vue'
import { getList } from '@/api/classifyManage/itemInformation';
export default {
    components: { AssetTree, userSearch },
    data() {
        return {
            visible: false,
            // 表格列配置
            title: null,
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    selectable: (row, index) => {
                        return !this.tableData.some((it) => it.id == row.id);
                    },
                    reserveSelection: true,
                    fixed: 'left'
                },
                {
                    prop: 'code',
                    label: '编码'
                },
                {
                    prop: 'name',
                    label: '名称',
                    showOverflowTooltip: true
                },
                {
                    prop: 'brandNum',
                    label: '牌号'
                },
                {
                    prop: 'modelType',
                    label: '型号'
                },
                {
                    prop: 'measuringUnit',
                    label: '计量单位'
                },
                {
                    prop: 'packingUnit',
                    label: '包装单位'
                },
                {
                    action: 'action',
                    slot: 'action',
                    align: 'center',
                    label: '选择'
                }
            ],
            categoryLevelId: null,
            // 表格选中数据
            selection: [],

            tableData: [],
            current: null,
            idx: null // 索引 
        }
    },

    watch: {

    },
    methods: {
        /* 表格数据源 */
        datasource({ page, where, limit }) {
            return getList({
                ...where,
                pageNum: page,
                size: limit,
                categoryLevelId: this.categoryLevelId,

            });
        },
        handleNodeClick(data) {
            this.categoryLevelId = data.id;
            this.reload();
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload();
        },
        open(list, title, id, idx) {
            if (list) {
                this.tableData = list
            }
            if(title) {
                this.title = title
            }
            if (id) {
                this.categoryLevelId = id
            }
            this.idx = idx
            this.visible = true
        },



        handleClose() {
            this.visible = false
            this.$refs.table.setSelectedRows([]);
            this.selection = []
        },
        selected() {
            if (!this.selection.length) {
                this.$message.error('请至少选择一条数据');
                return;
            }
            this.$emit('chooseModal', this.selection, this.id, this.idx)
            this.handleClose()
        },
    }
}
</script>
  
<style lang="scss" scoped>
.btns {
    text-align: center;
    padding: 10px 0;
}
</style>
  