<template>
  <div style="width:100%;height:100%;">
      <div class="tree-container">
        <div class="cate-title">
          全部类别
        </div>
        <div class="tree">
          <el-tree :data="jsonDataTree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"></el-tree>
          <LayerTree v-if="false" :menu_tree="menu_tree" :level="1"></LayerTree>
        </div>
      </div>
      <div class="data-container">
        <div class="data-operate">
          <span>公共服务设施</span>
          <el-button type="primary" style="float:right;" size="mini" @click="addFormShow = true">添加</el-button>
          <!-- <el-button type="warning" style="float:right;" size="mini" >删除</el-button> -->
        </div>
        <div class="table-head">
          <el-row>
            <el-col :span="1">编号</el-col>
            <el-col :span="9">模块名称</el-col>
            <el-col :span="6">模块标识</el-col>
            <el-col :span="6">模块描述</el-col>
            <el-col :span="2">操作</el-col>
          </el-row>
        </div>
        <div class="table-body">
          <div class="table-row" v-for="(item,index) in tableData" :key="index">
            <el-row>
              <el-col :span="1">{{index}}</el-col>
              <el-col :span="9">{{item.name}}</el-col>
              <el-col :span="6">模块标识</el-col>
              <el-col :span="6">{{item.remark?item.remark : "暂无描述"}}</el-col>
              <el-col :span="2">
                <el-button type="primary" size="mini">编辑</el-button>
                &nbsp;
                <el-button type="warning" size="mini" @click="delType(item.id)">删除</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="table-pagenation">
          <el-pagination
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
      <!-- <VueDragResize :isResizable="false"  :isActive="false" :w="0" :h="0"> -->
        <AddLayerType  v-if="addFormShow" @close="addFormShow = false"></AddLayerType>
      <!-- </VueDragResize> -->
  </div>
</template>
<script>
import AddLayerType from './AddLayerType.vue';
import LayerTree from '../../components/LayerTree.vue'
import { getMethodCommon, postMethodCommon } from '../../api/common';
// import VueDragResize from 'vue-drag-resize'
export default {
  name:"LayerTypeManagement",
  components:{
    LayerTree,
    AddLayerType,

    // VueDragResize
  },
  data(){
    return {
      tableData:[],
      addFormShow:false,
      jsonDataTree:null,
      typetree:null,
      defaultProps:{
        children: 'children',
          label: 'name'
      },
      menu_tree:[
        {
          name:"承载体",
          show:true,
          children:[
            {
              name:"公共服务设施",
              show:false,
              children:[
                {
                  name:"学校",
                  show:false,
                  children:[
                    {
                      name:"小学",
                      show:false,
                      children:[],
                    },{
                      name:"中学",
                      show:false,
                      children:[
                        {
                          name:"初级中学",
                          show:false,
                          children:[
                            {
                              name:"初中一年级",
                              show:false,
                              children:[],
                            },{
                              name:"初中二年级",
                              show:false,
                              children:[],
                            },{
                              name:"初中三年级",
                              show:false,
                              children:[],
                            }
                          ]
                        },{
                          name:"高级中学",
                          show:false,
                          children:[
                            {
                              name:"高中一年级",
                              show:false,
                              children:[],
                            },{
                              name:"高中二年级",
                              show:false,
                              children:[],
                            },{
                              name:"高中三年级",
                              show:false,
                              children:[],
                            }
                          ]
                        }
                      ],
                    },{
                      name:"大学",
                      show:false,
                      children:[],
                    }
                  ],
                },{
                  name:"医疗卫生机构",
                  show:false,
                  children:[],
                },{
                  name:"社会服务机构",
                  show:false,
                  children:[],
                }
              ]
            },{
              name:"危险化学品",
              show:false,
              children:[
                {
                  name:"化工园区",
                  show:false,
                  children:[],
                },{
                  name:"企业",
                  show:false,
                  children:[],
                },{
                  name:"加油加气站",
                  show:false,
                  children:[],
                }
              ]
            }
          ]
        }, {
          name:"减灾能力",
          show:true,
          children:[
            {
              name:"政府减灾能力",
              show:false,
              children:[
                {
                  name:"政府减灾管理能力",
                  show:false,
                  children:[],
                },{
                  name:"救灾物资储备",
                  show:false,
                  children:[],
                },{
                  name:"应急避难场所",
                  show:false,
                  children:[],
                }
              ]
            },{
              name:"企业与社会组织减灾在能力",
              show:false,
              children:[
                {
                  name:"救灾物资储备",
                  show:false,
                  children:[],
                },{
                  name:"应急避难场所",
                  show:false,
                  children:[],
                }
              ]
            }
          ]
        }
      ],
    }
  },
  created(){
    this.loadTypeTree();
    this.getTypeList();
  },
  mounted(){

  },
  methods:{
    getTypeList(){

      getMethodCommon("/Dictionary/LoadAll").then(res=>{
        if(res.code ==  200){
          this.tableData = res.result;
        }
      })
    },
    delType(id){
      postMethodCommon("/Dictionary/Delete",[id]).then(res=>{
        if(res.code == 200){
          this.$message({
            type:"success",
            message:"删除成功",
          })
          this.getTypeList();
        }
      })
    },
    loadTypeTree(){
      getMethodCommon("/Dictionary/LoadAll").then(res=>{
        if(res.code == 200){
          this.typetree = res.result;
          this.typetree.forEach((item,index)=>{
            // this.typetree[index].children = this.typetree[index].children ? this.typetree[index].children : [];
            // this.typetree[index].show = this.typetree[index].children && this.typetree[index].children.length>0 ? true : false;
            this.typetree[index].show = true;
          })
          console.log("typetree",this.typetree);
          this.jsonDataTree = this.transData(this.typetree, 'id', 'parentId', 'children');
          // this.menu_tree = { ...this.jsonDataTree };
        }
      })
    },
    transData(jsonArr, idStr, pidStr, childrenStr){
      // 存放的最终结果树数组
      const result = [];
      const id = idStr;
      const pid = pidStr;
      const children = childrenStr;
      const len = jsonArr.length;

      // 遍历得到以id为键名的对象(建立整棵树的索引)
      const hash = {};
      jsonArr.forEach(item => {
          hash[item[id]] = item;
      });

        for (let j = 0; j < len; j++) {
            const jsonArrItem = jsonArr[j];
            const hashItem = hash[jsonArrItem[pid]];
            if (hashItem) {
                // 如果当前项还没有children属性，则添加该属性并设置为空数组
                !hashItem[children] && (hashItem[children] = []);
                hashItem[children].push(jsonArrItem);
            } else {
                result.push(jsonArrItem);
            }
        }
        return result;
    },
    handleNodeClick(){

    }
  }
}
</script>
<style scoped>
.tree-container{
  width:260px;
  height: calc( 100% - 40px);
  float:left;
  background:#1d253d;
  padding:20px;

}
.tree-container .cate-title{
  width:100%;
  height:40px;
  line-height:30px;
  font-size:14px;
  color:#8a91aa;
}
.tree-container .tree{
    width:260px;
  height: calc( 100% - 40px);
    overflow-y:auto;
  overflow-x:hidden;
}
.tree::-webkit-scrollbar{
  width:10px;
  background:rgba(0, 0, 0, 0)
}
.tree::-webkit-scrollbar-thumb{
  width:10px;
  border-radius:5px;
  background:rgba(0,0,0,0.2);
}
.data-container{
  width: calc( 100% - 360px);
  height: calc( 100% - 40px);
  padding:20px;
  float:left;
  margin-left:20px;
  background:#1d253d;
}
.data-container .data-operate{
  width:100%;
  height:30px;
  color:#8a91aa;
  line-height:30px;
}

.data-container .table-head{
  width:100%;
  height:30px;
  background:#2b324f;
  margin-top:20px;
  text-align: center;
  line-height: 30px;
  color:#8a91aa;
}

.table-body{
  width:100%;
  height: calc( 100% - 140px);
  overflow: auto;
  margin-top:20px;
}

.table-body::-webkit-scrollbar{
  width:10px;
  border-radius:5px;
}
.table-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2);
  border-radius: 5px;
}
.table-row{
  width:100%;
  height:40px;
  line-height: 40px;
  color:#8a91aa;
  text-align: center;
}

.table-pagenation{
  width:100%;
  height:50px;
  margin-top:20px;
}

::v-deep .el-pager li{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .btn-prev{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .el-pagination button:disabled{
    background:rgba(0, 0, 0, 0);
  color:#efefef;
}
::v-deep .btn-next{
  background:rgba(0, 0, 0, 0);
  color:#efefef;
}

::v-deep .el-button{
  margin:0px;
  border-radius:3px;
  padding:4px 7px;
  font-size:12px!important;
}

/* ::v-deep .content-container{ */
::v-deep .el-form-item__label{
  color:#8a91aa;
}

::v-deep .el-tree{
  background:rgba(0,0,0,0);
  color:#8a91aa;
}

::v-deep .el-tree-node__content{
  background:rgba(0,0,0,0);
}
::v-deep .el-tree-node__content:focus{
  background:rgba(0,0,0,0);
}
</style>