<template>
  <div class="formContainer">
    <div class="form_container" v-if="isShow">
        <el-tree
        ref="trees"
        :data="data"
        show-checkbox
        node-key="layerTable"
        :props="defaultProps"
        :default-expanded-keys="[1]"
        :default-checked-keys="selectWeiJianType"
        @check-change="checkChange"
        >
      </el-tree>
    </div>
  </div>
</template>

<script>


// import * as Community from "@/api/datamaintenance"
import {loadList} from './../../../api/categorys'
export default {
  name: "layerNav",
  props:["selectWeiJianType"],
  components:{

  },
  data() {
    return {
      isShow: false,
      data: [{
          id: 1,
          layerTable: 1,
          name: '请选择房屋违建类型',
          children: []
        }],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        resArr:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
      loadList({typeid:'SYS_NOBUILD_TYPE'}).then(res =>{
        res.result.forEach((e,i) => {
          this.data[0].children.push({
            id :e.id,
            name : e.name
          })
        });
        this.isShow = true
      })
    },
    checkChange(data,isCheck){
      if(isCheck == true){
        this.resArr.push(data)
      }else{
        this.resArr.forEach((e,i)=>{
          if(e.id == data.id){
            this.resArr.splice(i,1)
          }
        })
      }
      this.$emit('checkChange',this.resArr)
    },
    // handleClick(data){


    // }


  }
}
</script>

<style scoped>
.formContainer{
  width:200px;
  height:100%;
  background: rgba(17,26,25,0.6);
  overflow-y: hidden;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.form_container{
  height: 92%;
  overflow-y: auto;
  padding-top: 120px;
}

::v-deep .el-tree{
    background: transparent;
    color: #fff;
}
::v-deep .el-tree-node__expand-icon{
    color: #fff;
}
::v-deep .el-tree-node__content:hover{
    background: #4a9de7;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: #4a9de7 ;
  }
::v-deep .el-tree-node.is-current > .el-tree-node__content{
    background: #4a9de7;
}
</style>
