<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <el-row>
                    <el-col :span="6">
                        <el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium">
                            <template slot="prepend"><i class="el-icon-notebook-2"></i>消息标签</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6" align="center" style="margin-left: 10px">
                        <el-input placeholder="请输入内容" v-model="queryInfo.name" size="medium">
                            <template slot="prepend"><i class="el-icon-notebook-2"></i>描述</template>
                        </el-input>
                    </el-col>
                    <el-col :span="6" align="center">
                        <el-button type="warning"  size="medium" icon="el-icon-search" @click="getList">
                            查询标签
                        </el-button>
                        <el-button type="primary"  size="medium" icon="el-icon-plus" @click="handleAdd">
                            添加标签
                        </el-button>
                    </el-col>
                </el-row>
                <!-- 列表区域 -->
                <el-row style="margin-top: 20px;">
                    <el-table
                            :data="page.tableData"
                            border size="small" row-key="id" default-expand-all
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}"
                            style="border-radius: 10px 10px 0px 0px;line-height: 25px;">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" align="center"></el-table-column>
                        <el-table-column label="消息标签" prop="name" align="center" width="220"></el-table-column>
                        <el-table-column label="消息类型" prop="type" :formatter="formatType" align="center" width="220"></el-table-column>
                        <el-table-column label="相关描述" prop="des" align="center" width="220"></el-table-column>
                        <el-table-column label="创建时间" prop="creattime" align="center" width="145"></el-table-column>
                        <el-table-column label="操作" width="300px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <!-- 新增下级-->
                                <el-tooltip effect="dark" content="新增" placement="top-start" :enterable="false">
                                    <el-button type="success" icon="el-icon-plus" size="mini"@click="handleAdd(scope.$index, scope.row)">新增下级
                                    </el-button>
                                </el-tooltip>
                                <!-- 编辑按钮-->
                                <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" size="mini"@click="handleEdit(scope.$index, scope.row)">编辑
                                    </el-button>
                                </el-tooltip>
                                <!-- 删除按钮-->
                                <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" size="mini"@click="">删除
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">
                        <el-button type="danger" icon="el-icon-delete" :disabled="this.page.selectList.length===0"
                        >批量删除
                        </el-button>
                    </el-col>
                    <el-col :span="10" style="margin-top: 5px">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryInfo.pageNum"
                                :page-sizes="[10,50,200,500]"
                                :page-size="queryInfo.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="page.total">
                        </el-pagination>
                    </el-col>
                </el-row>
                <!-- 新增界面，对话框区域 -->
                <el-row>
                    <el-dialog :title="dialogMap[dialogStatus]" :visible.sync="dialogFormVisible" style="margin-top: -50px" width="45%" >
                        <el-form :model="addForm" :rules="addFormRules" ref="addForm"  label-width="120px" >
                            <el-form-item v-if="this.demoName == true" label="上级标签"  prop="parentId">
                                <span>{{addForm.parentName}}</span>
                            </el-form-item>
                            <el-form-item v-else style="display: none" label="上级标签"  prop="parentId">
                                <span>{{addForm.parentName}}</span>
                            </el-form-item>
                            <el-form-item label="消息标签" prop="name">
                                <el-input placeholder="请输入内容" v-model="addForm.name"  size="medium">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="消息分类" prop="type">
                                <el-select v-model="addForm.type" placeholder="请选择消息分类"  name='test' id='test'>
                                    <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="描述" prop="des">
                                <el-input placeholder="请输入内容" v-model="addForm.des" size="medium">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer" align="center">
                            <el-button type="info" @click="dialogFormVisible = false" size="medium"
                                       style="width: 100px;background-color: #6F8294;color: #ffffff">取 消</el-button>
                            <el-button type="primary" size="medium" style="width: 100px" @click="addList">提 交</el-button>
                        </div>
                    </el-dialog>
                </el-row>

            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    import {getTypesPage, addType} from "../../api/message_bus";
    import {add} from "../../api/role_api";
    import util from "../../common/js/util";

    export default {
        name: 'MessageManagement',

        data() {
            return {
                queryInfo: {
                    // 消息标签
                    name: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10,
                },
                page: {
                    total: 0,
                    tableData: [],
                    selectList: [],
                },
                dialogFormVisible: false,
                addForm: {
                    name: '',
                    des: '',
                    type:'',
                    parentId:''
                },
                dialogMap: {
                    update: '编辑',
                    create: '新增',
                },
                dialogStatus: 'create',
                demoName: false,

                options: [{
                    label: "消息分类",
                    value: "1"
                },{
                    label: "消息大类",
                    value: "2"
                },{
                    label: "消息子类",
                    value: "3"
                }],
                addFormRules: {
                    name: [
                        { required: true, message: '请输入消息标签', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择上级标签', trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                this.getList();
            },
            handleCurrentChange(newPage) {
                this.queryInfo.pageNum = newPage;
                this.getList();
            },
            searchSubmit:function () {
                this.queryInfo.pageNum = 1;
                this.queryInfo.pageSize = 10;
                this.getList();
            } ,
            // 获取消息标签列表
            getList() {
                let _this = this;
                getTypesPage(this.queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！');
                    }
                    // 获取列表数据
                    _this.page.tableData = res.data.list;
                    // 获取列表的总记录数
                    _this.page.total = res.data.total;
                    _this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString());
                });
            },
            //显示添加标签界面
            handleAdd: function (index,row) {
                this.dialogFormVisible = true;
                this.dialogStatus= 'create';
                if (this.$refs.addForm != undefined){

                    if (row != undefined){
                        this.demoName = true;
                    }else {
                        this.demoName = false;
                    }
                    this.$refs.addForm.resetFields();
                }
                //新增下级
                if(util.checkNull(row)){
                    //传递上级ID
                    let parentId = Object.assign({}, row);
                    this.addForm.parentId = parentId.id;
                    this.addForm.parentName = parentId.name;

                }
                //数据初始化
                // this.addForm = {
                //     name: '',
                //     des: '',
                //     type:''  };
                },
            //提交添加的消息标签
            addList: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            let para = Object.assign({}, this.addForm);
                            addType(para).then((res) => {
                                this.$message({
                                    message: '提交成功',
                                    type: 'success'
                                });
                                //数据初始化
                                this.$refs['addForm'].resetFields();
                                this.dialogFormVisible = false;
                                this.getList();
                            }).catch(error => alert(error));
                        });
                    }
                });
            },
            // 类型转换
            formatType: function (row, column) {
                return row.type == 1 ? '消息分类' : row.type == 2 ? '消息大类' : '消息子类';
            },
    }
    }
</script>

<style>

</style>