<template>
  <div class="max-big-box">
    <div class="info-box">
      <div class="info-title">
        <img src="~@/assets/images/xian_1.png">
        <p>{{newData.id?"编辑":"新增"}}</p>
        <img src="~@/assets/images/xian_2.png">
      </div>
      <div class="name-box">
        <p class="user-one-p">*</p>
        <p>角色名称：</p>
        <input class="name-input" type="text" v-model="newData.name">
      </div>
      <div class="text-box">
        <p></p>
        <p>备注：</p>
        <textarea class="text-input" type="text" v-model="newData.text"></textarea>
      </div>
      <div class="table-box">
        <p></p>
        <p>权限：</p>
        <div class="right-table-box TabStrip">
          <el-tree class="max-tree-box" :indent="0"
                   ref="dataConfigTree"
                   default-expand-all
                   show-checkbox
                   :expand-on-click-node="false"
                   node-key="id" :highlight-current="false"
                   :data="leftTopData" icon-class="none">
            <div class="tree-box" slot-scope="{ node, data }" @click="clickTree(data,node)">
              <p class="label-p"
                 :class="{'level1':node.level==1,'level2':node.level==2,'level3':node.level==3,'levelColorA':node.checked||node.indeterminate,'levelColorB':!node.checked&&!node.indeterminate}"
              >{{ node.label }}</p>
            </div>
          </el-tree>
        </div>
      </div>
      <div class="button-box">
        <p class="cursor_pointer" @click="buttonClick('out')">取消</p>
        <p class="cursor_pointer" @click="buttonClick('set')">保存</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { deptTreeselect } from '@/api/userApi'
  export default {
    name: "RoleEditor",//角色编辑
    props:["dataInfo"],
    data () {
      return {
        newData:{},
        leftTopData: [],
        // leftTopData: [
        //   {
        //     id:"1",
        //     label: '综合信息库',
        //     type:"0",
        //     children: [
        //       {
        //         id:"3",
        //         label: '用户管理',
        //         type:"1"
        //       },
        //     ]
        //   },
        //   {
        //     id:"2",
        //     label: '人员管理',
        //     type:"0",
        //     children: [
        //       {
        //         id:"4",
        //         label: '请假管理',
        //         type:"1"
        //       },
        //       {
        //         id:"5",
        //         label: '销假管理',
        //         type:"1",
        //       },
        //     ]
        //   },
        // ],
      }
    },

    created(){
    },
    mounted() {
      this.newData = {...this.dataInfo}
      this.deptTreeselect();
    },
    methods: {
      //获取组织架构树状数据
      async deptTreeselect () {
        let self = this;
        const { data } = await deptTreeselect();
        if(data.code==200){
          this.leftTopData = data.data;
        }
      },
      //左上点击事件
      clickTree(data,node){
        console.log(data)
        if(data.type==1){
          // node.expanded=!node.expanded;
        }else if (data.type==2){
          this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
        }
      },
      // 调用父组件方法退出当前页面
      buttonClick(type){
        if(type=='out'){
          this.$parent.outPage();
        }else if(type=='set'){
          console.log("baocun")
          // menuIds 权限数组
          // console.log(this.$refs.dataConfigTree.getCheckedNodes());
          if(!self.newData.name){

          }
          this.$refs.dataConfigTree.setCheckedNodes([{
            id: 104,
            label: '市场部门1'
          }, {
            id: 103,
            label: "研发部门"
          }]);
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .info-box
      height:670px;
      width:1000px;
      margin:50px 456px 44px;
      background:url("~@/assets/images/min_back_04.png");
      background-size 100% 100%
      .info-title
        display flex
        height:74px;
        margin:0 369px 44px;
        img
          display block
          height:1px;
          width:76px;
          margin-top:38px;
        p
          width:109px;
          line-height 74px
          font-size $font_20
          color:$theme;
    .name-box
    .text-box
    .table-box
      width:587px;
      margin:0 auto;
      display flex
      p
        text-align left
        font-size:$font_17;
        line-height 36px
      .user-one-p
        color:$theme5;
      p:nth-child(1)
        width:20px;
      p:nth-child(2)
        color:$theme;
        width:119px;
      .name-input
        width:408px;
        height:22px;
        line-height 20px
        font-size:$font_16;
        padding:7px 20px;
        background url("~@/assets/images/button_04.png")
        background-size 100% 100%
        color:$color_ff;
        border-radius:10px;
      .text-input
        width:448px;
        height:83px;
        line-height 20px
        font-size:$font_16;
        padding:7px 20px;
        background url("~@/assets/images/button_04.png")
        background-size 100% 100%
        color:$color_ff;
        border-radius:10px;
      .right-table-box
        width:448px;
        height:280px;
        padding:7px 20px;
        overflow-x:hidden;
        overflow-y:scroll;
        white-space: nowrap;
        //树结构
        .max-tree-box
          z-index:1;
          .tree-box
            display flex
            img
              display block
              width:20px;
              height:20px;
            p
              margin-left:8px;
    .text-box
    .table-box
      margin-top:16px;
    .button-box
      display flex
      width:202px;
      margin:30px 399px 0;
      p
        width:92px;
        height:31px;
        line-height:31px;
        font-size:$font_12;
      p:nth-child(1)
        color:$theme;
        background:url("~@/assets/images/button_01.png");
        background-size 100% 100%
        margin-right:18px;
      p:nth-child(2)
        color:$color_ff;
        background:url("~@/assets/images/button_02.png");
        background-size 100% 100%
  .el-tree
    background rgba(0,0,0,0) !important

  /*多层级样式*/
  .levelImg{
    margin-top: 7px;
  }
  .level1{
    font-size:$font_17!important;
    color:$theme !important;
    height:34px!important;
    line-height 34px!important
  }
  .level2{
    font-size:$font_14!important;
    height:22px!important;
    line-height 22px!important
  }
  .level3{
    font-size:$font_12!important;
    height:20px!important;
    line-height 20px!important
  }
  .levelColorA{
    color:$color_ff;
  }
  .levelColorB{
    color:$color_91;
  }
  /*层级指引线*/
  .tree-container /deep/ .el-tree > .el-tree-node :after {
    border-top: none;
  }
  .el-tree /deep/ .el-tree-node .el-tree-node {
    position: relative;
    padding-left: 16px !important;
  }
  .el-tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

  .tree-container { //树的parent，样式自定
  }
  .el-tree /deep/ .el-tree-node__content .el-tree-node__expand-icon{
    padding:1px !important
  }
  //修改悬浮样式
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background-color: rgba(0,0,0,0) !important;
  }
  .el-tree /deep/ .el-tree-node__content:hover {    background-color: rgba(0,0,0,0);
  }
  .el-tree /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: rgba(0,0,0,0);
  }
</style>
