<template>
    <el-dialog
        title="选择枚举字典"
        width="900px"
        top="5vh"
        :visible.sync="dialogShow"
        @close="closeDialog"
        destroy-on-close
    >
        <ht-table
            ref="htTable"
            @load="loadData"
            @row-click="rowClick"
            :data="data"
            :selectable="false"
            :pageResult="pageResult"
            :default-querys="defaultQuerys"
            :default-sorter="[{direction: 'DESC', property: 'sn_'}]"
            :quick-search-props="querySearch"
            :show-export="false"
            :show-custom-column="false"
            highlight-current-row
        >
            <template>
                <ht-table-column
                    prop="name_"
                    label="名称"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <span>{{ row.name }}</span>
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="code_"
                    label="编码"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                >
                    <template v-slot="{row}">
                        <span>{{ row.code }}</span>
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="memo"
                    label="备注"
                    :show-overflow-tooltip="true"
                >
                </ht-table-column>
            </template>
        </ht-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="handleOk"> 确 定 </el-button>
        </span>
    </el-dialog>
</template>

<script>
import portal from '@/api/portal'
export default {
    name: 'selectDict',
    data() {
        return {
            dialogShow: false,
            tableHeight: 300,
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            data: [],
            defaultQuerys: [
                {
                    property: 'flag_',
                    value: 1,
                },
            ],
            querySearch: [
                {
                    label: '名称',
                    prop: 'name_',
                },
                {
                    label: '编码',
                    prop: 'code_',
                },
            ],
            selectRow: {},
        }
    },
    mounted() {
        this.calcTableHeight()
        this.$root.$on('resize', () => {
            this.calcTableHeight(500)
        })
    },
    methods: {
        // 选择字典回调
        rowClick(row) {
            this.selectRow = row
        },
        // 加载字典
        loadData(param, cb) {
            portal
                .loadDictList(param)
                .then((resp) => {
                    let response = resp
                    this.data = response.rows
                    this.pageResult = {
                        page: response.page,
                        pageSize: response.pageSize,
                        total: response.total,
                    }
                })
                .finally(() => cb())
        },
        handleOk() {
            if (this.selectRow.code) {
                this.$emit('change', this.selectRow.code)
            }
            this.closeDialog()
        },
        openDialog() {
            this.dialogShow = true
        },
        closeDialog() {
            this.selectRow = {}
            this.data = []
            this.dialogShow = false
        },
        // 动态计算表格的高度，自适应当前容器
        calcTableHeight(delay) {
            setTimeout(() => {
                this.tableHeight =
                    document.documentElement.clientHeight * 0.9 - 200
            }, delay || 0)
        },
    },
}
</script>

<style>
</style>