<template>
    <div class="fullheight">
        <ht-table
            @load="loadData"
            :data="data"
            :page-result="pageBean"
            :selection="true"
            quick-search-props="name,key"
            ref="htTable"
            :show-export="false"
            :show-custom-column="false"
            @row-click="rowClick"
            :default-sorter="[{direction: 'ASC', property: 'sn'}]"
        >
            <template v-slot:toolbar>
                <el-button
                    size="small"
                    type="primary"
                    @click="handleOpen('添加消息分类')"
                    icon="el-icon-plus"
                    >添加</el-button
                >
                <ht-delete-button
                    :url="formDeleteUrl()"
                    :htTable="$refs.htTable"
                    style="margin-left: 10px"
                    >删除</ht-delete-button
                >
                <import-data
                    :dataBaseOptions="dataBaseOptions"
                    :originAPIOptions="originAPIOptions"
                    tempFiles="消息分类导入模板"
                    bizCode="messageClassification"
                ></import-data>
                <export-data
                    :htTable="$refs.htTable"
                    tempFiles="消息分类导出模板"
                    :dataBaseOptions="dataBaseOptions"
                    :originAPIOptions="originAPIOptions"
                    bizCode="messageClassification"
                    :exportQuery="exportQuery"
                ></export-data>
                <el-popconfirm
                    title="确认保存序列号吗？"
                    @onConfirm="updateSequence"
                >
                    <el-button
                        slot="reference"
                        icon="el-icon-sort"
                        type="primary"
                        :style="{marginLeft: '10px'}"
                        plain
                        >保存序列号</el-button
                    >
                </el-popconfirm>
            </template>
            <template>
                <ht-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="50"
                />
                <ht-table-column
                    prop="name"
                    label="分类名"
                    :show-overflow-tooltip="true"
                    :sortable="true"
                    width="300"
                >
                    <template slot-scope="scope">
                        <el-link
                            type="primary"
                            @click="handleOpen('编辑消息分类', scope.row)"
                            >{{ scope.row.name }}</el-link
                        >
                    </template>
                </ht-table-column>
                <ht-table-column
                    prop="code"
                    label="编码"
                    :show-overflow-tooltip="true"
                    :sortable="true"
                />
                <ht-table-column
                    prop="sn"
                    :show-overflow-tooltip="true"
                    label="排序"
                    :sortable="true"
                    width="200"
                >
                    <template slot-scope="data">
                        <ht-input
                            v-model="data.row.sn"
                            :validate="{required: true}"
                            type="number"
                            :min="0"
                            :showWordLimit="true"
                            @change="handleChangeSequ(data)"
                        />
                        <!-- {{data.row.sn}} -->
                    </template>
                </ht-table-column>
            </template>
        </ht-table>

        <el-drawer
            width="500px"
            v-if="dialogVisible"
            :direction="direction"
            :title="title"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="false"
            append-to-body
        >
            <el-form
                :model="formData"
                ref="form"
                data-vv-scope="msgTemplateForm"
            >
                <el-row>
                    <el-col :span="24">
                        <ht-form-item label="分类名称" label-width="120px">
                            <ht-input
                                v-model="formData.name"
                                :validate="{required: true}"
                                :showWordLimit="true"
                            />
                        </ht-form-item>
                    </el-col>
                    <el-col :span="24">
                        <ht-form-item label="分类编码" label-width="120px">
                            <ht-input
                                v-pinyin="formData.name"
                                v-model="formData.code"
                                :validate="{required: true}"
                                :disabled="false"
                            />
                        </ht-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <ht-form-item
                            label="排序"
                            label-width="120px"
                            v-if="formData.sn !== ''"
                        >
                            <ht-input
                                v-model="formData.sn"
                                :validate="{required: true}"
                                type="number"
                                :showWordLimit="true"
                                :min="0"
                            />
                        </ht-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="dialog-footer">
                <ht-submit-button
                    :url="saveUrl()"
                    :model="formData"
                    :is-submit="isSubmit"
                    scope-name="msgTemplateForm"
                    @before-save-data="beforeSaveData()"
                    @after-save-data="afterSaveData()"
                    >保存</ht-submit-button
                >
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import flow from '@/api/flow.js'
import portal from '@/api/portal.js'
export default {
    components: {},
    data() {
        return {
            title: '',
            pageBean: {
                page: 1,
                pageSize: 20,
                total: 0,
            },
            dialogVisible: false,
            data: [],
            formData: {
                name: '',
                code: '',
                sn: '',
            },
            isSubmit: false,
            direction: 'rtl',
            sequence: {},
            defaultSort: [
                {
                    direction: 'ASC',
                    property: 'sn',
                },
            ],
            dataBaseOptions: {
                dataBaseId: '',
                tableName: 'portal_sys_msg_type',
                tableSchema: '',
            },
            originAPIOptions: {
                url: '/msg/messageType/v1/query',
                method: 'post',
                moduleRoot: 'portal',
            },
            exportQuery:{}
        }
    },
    // mounted() {
    //     this.Num();
    // },
    methods: {
        rowClick(row, column, event) {
            this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
        },

        handleOpen(param, row) {
            this.title = param
            if (row) {
                this.formData = row
            }
            this.dialogVisible = true
        },
        loadData(param, cb) {
            if (!param) {
                this.pageBean.total = 0
                param = {pageBean: ''}
                param.pageBean = this.pageBean
                param.sorter = this.defaultSort
            }
            this.exportQuery = param
            flow.getMsgClassificationData(param)
                .then((resp) => {
                    this.data = resp.data.rows
                    this.pageBean = {
                        page: resp.data.page,
                        pageSize: resp.data.pageSize,
                        total: resp.data.total,
                    }
                })
                .finally(() => cb())
        },
        handleClose() {
            this.dialogVisible = false
            this.formData = {
                name: '',
                code: '',
                sn: '',
            }
        },
        saveUrl() {
            return window.context.portal + '/msg/messageType/v1/save'
        },
        beforeSaveData() {
            if (!this.formData || !this.formData.isDefault) {
                this.formData.isDefault = 0
            }
            this.isSubmit = true
        },
        afterSaveData() {
            this.dialogVisible = false
            this.formData = {
                name: '',
                code: '',
                // sn: '',
            }
            this.loadData()
        },
        formDeleteUrl() {
            return `${window.context.portal}/msg/messageType/v1/removes`
        },
        // Num() {
        //     setTimeout(() => {
        //         this.num = Number(this.pageBean.total) + 1
        //         console.log(this.num , 'num')
        //     }, 1000)
        // },
        updateSequence() {
            if (Object.keys(this.sequence).length) {
                this.$refs.htTable.loading = true
                portal.MsgClassupdateSequence(this.sequence).then((res) => {
                    if (res.state) {
                        this.$message({
                            type: 'success',
                            message: res.message,
                        })
                        this.loadData()
                    }
                    this.$refs.htTable.loading = false
                })
            } else {
                this.$message({
                    type: 'warning',
                    message: '保存号未修改',
                })
            }
        },
        handleChangeSequ(res) {
            this.sequence[res.row.id] = res.row.sn
            console.log(this.sequence)
        },
    },
}
</script>

<style scoped>
.el-link {
    margin: 0 5px;
}
>>> .el-dialog__body {
    padding: 10px 20px 0 20px;
}
.dialog-footer {
    position: fixed;
    bottom: 30px;
    right: 30px;
}
</style>
