<template>
    <div>
        <el-dialog
            title="选择消息模板"
            :visible.sync="dialogVisible"
            width="70%"
            appendToBody
            :close-on-click-modal="false"
            top="5vh"
            @close="closeDialog"
            v-if="dialogVisible"
        >
            <el-container>
                <el-main style="padding: 10px; height: 400px">
                    <ht-table
                        @load="loadData"
                        :data="data"
                        :selectable="false"
                        :highlightCurrentRow="true"
                        :page-result="pageBean"
                        quick-search-props="name,key"
                        ref="htTable"
                        :show-export="false"
                        :show-custom-column="false"
                        @row-click="rowClick"
                    >
                        <template>
                            <ht-table-column
                                type="index"
                                width="50"
                                align="center"
                                label="序号"
                            />
                            <ht-table-column
                                prop="name"
                                label="模板名称"
                                :show-overflow-tooltip="true"
                                :sortable="true"
                            >
                            </ht-table-column>
                            <ht-table-column
                                prop="key"
                                label="模板业务键"
                                :show-overflow-tooltip="true"
                                :sortable="true"
                            />
                            <ht-table-column
                                prop="subject"
                                label="标题"
                                :show-overflow-tooltip="true"
                                :sortable="true"
                            />
                        </template>
                    </ht-table>
                </el-main>
            </el-container>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleOK" size="medium"
                    >确 定</el-button
                >
                <el-button @click="closeDialog" size="medium">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import flow from '@/api/flow.js'
import utils from '@/hotent-ui-util.js'
export default {
    components: {},
    data() {
        return {
            dialogVisible: false,
            pageBean: {
                page: 1,
                pageSize: 20,
                total: 0,
            },
            data: [],
			activeRow: {}
        }
    },
    methods: {
        rowClick(row) {
			this.activeRow = row;
        },
        open() {
            this.dialogVisible = true
        },
        handleOK() {
			let selectRow = utils.deepClone(this.activeRow);
			this.$emit("select", selectRow);
            this.dialogVisible = false
			this.activeRow = {}
        },
        loadData(param, cb) {
            if (!param) {
                this.pageBean.total = 0
                param = {pageBean: ''}
                param.pageBean = this.pageBean
                param.sorter = this.defaultSort
            }
            flow.getMsgData(param)
                .then((resp) => {
                    this.data = resp.data.rows
                    this.pageBean = {
                        page: resp.data.page,
                        pageSize: resp.data.pageSize,
                        total: resp.data.total,
                    }
                })
                .finally(() => cb())
        },
        closeDialog() {
            this.dialogVisible = false
			this.activeRow = {}
        },
    },
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
    padding-bottom: 0px !important;
}
</style>