<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>
            <el-button type="info" @click="getError">错误日志</el-button>
        </div>
        <div class="log-detail">
            <div class="log-menu">
                <ul>
                    <li v-for="(it,index) in tableData" :key="index">
                        <span>{{index}}，</span><el-button class="dicText" type="text" @click="showMessage(it.value)">{{it.name}}</el-button>
                    </li>
                </ul>
            </div>
            <div class="log-table">
<!--                <el-table :data="concreteDic">-->
                <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="操作">
                            <el-button type="text" class="operatorBtn">编辑</el-button>
                            <el-button type="text" class="operatorBtn">删除</el-button>
                            <el-button type="text" class="operatorBtn">添加</el-button>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAllDdic} from "@api/manage";
    export default {
        name: "index",
        data(){
            return{
                tableData:[],
                errorLog:[],
                concreteDic:'',

                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:{
            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 = "";
            }
        },
        mounted() {
            this.getData();
        }
    }
</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;
    }

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

    .dicText{
        text-align: left;
    }

    .operatorBtn{
        width: 20px;
    }


</style>