<template>
    <div class="log-content">
        <div class="log-search">
            字典名称：
            <el-date-picker
                    v-model="startValue"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <div class="log-detail">
            <div class="log-menu">
                <div style="height: 40px">
                    <span class="menu-title">
                        字典名称
                        <el-button type="primary" size="mini" @click="addNode(zdType,-1)">添加</el-button>
                    </span>
                </div>
                <br>
                <ul>
                    <li v-for="(it,index) in tableData" :key="index">
                        <span>{{index+1}}，</span><el-button class="dicText" type="text" @click="showMessage(it.value)"
                                                          @contextmenu.prevent.native="openMenu($event,it)">{{it.name}}</el-button>
                    </li>
                </ul>
            </div>
            <ul
                    v-show="menuvisible"
                    :style="{ left: menuleft + 'px', top: menutop + 'px' }"
                    class="contextmenu"
            >
                <li @click="editNode">编辑</li>
                <li @click="addNode(zdType,0)">添加</li>
                <li @click="deleteNode">删除</li>
            </ul>
            <div class="log-table">
                <el-table
                        :data="concreteDic"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="bsm"
                        border
                        :default-expand-all="false"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column prop="mc" align="center" label="名称">
                    </el-table-column>
                    <el-table-column prop="dm" align="center" label="代码">
                    </el-table-column>
                    <el-table-column prop="sxh" align="center" label="顺序号">
                    </el-table-column>
                    <el-table-column prop="bz" align="center" label="备注">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" class="operatorBtn">编辑</el-button>
                            <el-button type="text" class="operatorBtn">删除</el-button>
                            <el-button type="text" class="operatorBtn" @click="addNode(scope.row,1)">添加</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-dialog v-dialogDrag title="添加字典" width="69%" :visible.sync="outerVisible">
                <div style="height: 240px">
                    <div style="width: 100%;border: 1px solid #a8adad;">

                        <el-form :model="form" ref="form" label-width="110px" size="small">
                            <table border="1" width="100%" cellspacing="0" cellpadding="0" class="hTable">
                                <tbody>
                                <tr height="30">
                                    <td  colspan="2" align="center"  >名称</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.mc"></el-input>
                                    </td>
                                    <td  colspan="2" align="center"  >简称</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.jc"></el-input>
                                    </td>
                                </tr>
                                <tr height="30">
                                    <td  colspan="2" align="center"  >代码</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.dm"></el-input>
                                    </td>
                                    <td  colspan="2" align="center"  >其他代码</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.qtdm"></el-input>
                                    </td>
                                </tr>
                                <tr height="30">
                                    <td  colspan="2" align="center"  >其他名称</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.qtmc"></el-input>
                                    </td>
                                    <td  colspan="2" align="center"  >备注</td>
                                    <td  colspan="4"  >
                                        <el-input v-model="form.bz"></el-input>
                                    </td>
                                </tr>
                                <tr height="30">
                                    <td  colspan="2" align="center"  >字典类型</td>
                                    <td  colspan="10"  >
                                        <el-input v-model="form.zdType"></el-input>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </el-form>
                    </div>
                    <div class="handleBtn">
                        <el-button type="primary" class="w98 creat" @click="insertDdicNode">保存</el-button>
                        <el-button type="primary" class="w98 cancel" @click="outerVisible = false">取消</el-button>
                    </div>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import {getAllDdic,addDdicNode} from "@api/manage";
    export default {
        name: "index",
        data(){
            return{

                form:{
                    mc:'',
                    jc:'',
                    dm:'',
                    qtdm:'',
                    qtmc:'',
                    bz:'',
                    zdType:'',
                },

                tableData:[],
                errorLog:[],
                concreteDic:'',
                zdType:'',

                menuvisible:false,
                menutop: 0,
                menuleft: 0,

                outerVisible: false,
                innerVisible: false,

                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                startValue: '',
                endValue:'',

            }
        },
        methods:{

            insertDdicNode(){
                addDdicNode(this.form).then((res)=>{
                    if(res.code === 200){
                        this.$message.success("添加成功！");
                        this.outerVisible = false;
                    }
                });
            },

            editNode(){

            },
            addNode(data,source){
                this.form={
                    mc:'',
                    jc:'',
                    dm:'',
                    qtdm:'',
                    qtmc:'',
                    bz:'',
                    zdType:'',
                    pbsm:'',
                    bsm:'',
                };
                // alert(JSON.stringify(data))
                if(source === 0){
                    this.form.zdType = data;
                }else if(source === 1){
                    this.form = data;
                    this.form.pbsm = data.bsm;
                }
                this.outerVisible = true
            },
            deleteNode(){

            },

            getData(){
                let data={
                    "mc": "",
                    "pbsm": ""
                };
                getAllDdic(data).then((res)=>{
                    console.log(res.result);
                    this.tableData = res.result;
                    if(this.tableData.length>0){
                        this.concreteDic = this.tableData[0].value;
                    }
                })
            },
            showMessage(data){
                this.concreteDic = data;
            },
            query(){
                let data={
                    "mc": "",
                    "pbsm": ""
                };
                getAllDdic(data).then((res)=>{
                    console.log(res.result);
                    this.tableData = res.result;
                })
            },
            reset(){
                this.startValue = "";
                this.endValue = "";
            },
            openMenu(e,item){
                // alert(JSON.stringify(item));
                this.menuleft = e.pageX;
                this.menutop = e.pageY;
                this.zdType = item.name;
                this.changemenuVisible(true);
            },
            changemenuVisible(data) {
                this.menuvisible = data;
            },
            //关闭右键菜单
            closeMenu(){
                this.menuvisible = false;
            },
        },
        mounted() {
            this.getData();
        },
        watch:{
            menuvisible(value) {
                if (value) {
                    document.body.addEventListener("click", this.closeMenu);
                } else {
                    document.body.removeEventListener("click", this.closeMenu);
                }
            },
        }
    }
</script>

<style scoped>
    .log-content{
        width: 100%;
        /*border: 1px solid red;*/
    }
    .log-search{
        margin-top: 10px;
        padding-left: 15px;
        padding-top: 20px;
        width: 100%;
        border: 1px solid #a8adad;
        height: 60px;
        background-color: white;
    }
    .log-detail{
        margin-top: 10px;
        width: 100%;
        border: 1px solid #a8adad;
        height: 900px;
        overflow: scroll;
        background-color: white;
    }

    .log-menu{
        width: 17%;
        float: left;
        height: 900px;
        overflow: scroll;
        border-right: 1px solid #a8adad;
    }

    .log-table{
        width: 81%;
        float: right;
        height: 900px;
        overflow: scroll;
    }

    .el-button {
        width: 100px;
        margin-left: 15px;
    }
    .menu-title{
        font-weight: bold;
        font-size: 20px;
        margin-top: 20px;
        margin-left: 5px;
        float: left;
        width: 100%
    }

    ul{
        list-style-type: circle;
    }
    li{
        display:block;
        margin:10px;
    }

    .dicText{
        text-align: left;
    }

    .operatorBtn{
        width: 20px;
    }

    /deep/.el-input__inner{
        width: 100%;
        border:0;
    }

    table{
        background: #fff;
        table-layout: fixed;
    }

    .handleBtn{
        width: 314px;
        position: absolute;
        left: 50%;
        margin-left: -250px;
        margin-top: 10px;
    }


</style>