<template>
  <div class="max-big-box-one">
    <div v-show="newModifyPageType" class="big-max-box-one">
      <div class="top-box">
        <div class="input-box">
          <input class="search-input" type="text" v-model="inputData" placeholder="请输入姓名/手机号关键字查询">
          <div class="time-box">
            <p>值班时间：</p>
            <p class="cursor_pointer" @click="openTimeBox('1')">{{playTime}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('2')">{{endTime}}</p>
          </div>
          <div class="time-box">
            <p>创建时间：</p>
            <p class="cursor_pointer" @click="openTimeBox('3')">{{playTimeOne}}</p>
            <p>-</p>
            <p class="cursor_pointer" @click="openTimeBox('4')">{{endTimeOne}}</p>
          </div>
          <div class="button-box cursor_pointer" @click="clickQuery">
            <img src="~@/assets/images/icon_27.png">
            <p class="cursor_pointer">查询</p>
          </div>
        </div>
        <p class="add-button cursor_pointer" @click="clickPageType" v-if="userPermsData.indexOf('business:operationalDuty:add')!=-1">新增</p>
        <p class="del-button cursor_pointer" @click="allDel" v-if="userPermsData.indexOf('business:operationalDuty:remove')!=-1">批量删除</p>
        <p class="text-p">已选择{{tableNum}}条</p>
      </div>
      <div class="big-bottom-box">
        <div class="left-max-box">
          <!--树结构-->
          <el-tree class="max-tree-box TabStrip" :indent="0"
                   ref="dataConfigTree"
                   default-expand-all
                   :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)">
              <!--<img :class="{'levelImg':node.level==1}" v-if="node.expanded&&node.childNodes[0]"-->
                   <!--src="~@/assets/images/icon_42.png">-->
              <!--<img :class="{'levelImg':node.level==1}" v-if="!node.expanded&&node.childNodes[0]"-->
                   <!--src="~@/assets/images/icon_43.png">-->
              <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 class="right-max-box">
          <div class="table-box">
            <el-table
              ref="multipleTable"
              :row-key="getRowKey"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @select-all="handleSelectionChange"
              @select="handleSelectionChange">
              <el-table-column
                :reserve-selection="true"
                type="selection"
                width="60">
              </el-table-column>
              <el-table-column
                type="index"
                :index="indexMethod"
                label="序号"
                width="67">
              </el-table-column>
              <el-table-column
                prop="organizationName"
                label="仓库名称"
                width="105">
              </el-table-column>
              <el-table-column
                prop="userName"
                label="值班人员姓名"
                width="150">
              </el-table-column>
              <el-table-column
                prop="deptName"
                label="部门"
                width="91">
              </el-table-column>
              <el-table-column
                prop="photo"
                label="人员照片"
                width="122">
                <template slot-scope="scope">
                  <img :src="scope.row.photo" style="border-radius:4px;width:70px;height:44px;">
                </template>
              </el-table-column>
              <el-table-column
                prop="phone"
                label="人员电话"
                width="129">
              </el-table-column>
              <el-table-column
                label="值班时间"
                width="171">
                <template slot-scope="scope">
                {{scope.row.dutyStartTime}}至{{scope.row.dutyEndTime}}
                </template>
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                width="251">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                width="171">
              </el-table-column>
              <el-table-column
                label="操作"
                width="172">
                <template slot-scope="scope">
                  <div class="table-min-button">
                    <div class="cursor_pointer" @click="handleEdit(scope.$index, scope.row)" v-if="userPermsData.indexOf('business:operationalDuty:edit')!=-1">
                      <img src="~@/assets/images/icon_37.png">
                      <p>编辑</p>
                    </div>
                    <div class="cursor_pointer" @click="handleDelete(scope.$index, scope.row)" v-if="userPermsData.indexOf('business:operationalDuty:remove')!=-1">
                      <img src="~@/assets/images/icon_38.png">
                      <p>删除</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pagesize"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <new-modify v-if="!newModifyPageType"
      :newModifyData="newModifyData"
      @newModifyLeftClick="newModifyLeftClick"
      @newModifyRightClick="newModifyRightClick"
    ></new-modify>
    <!--时间日历-->
    <div class="time-max-big-box" v-if="timeType!=0">
      <div class="time-big-box">
        <el-calendar class="time-min-box" v-model="timeValue">
        </el-calendar>
        <div class="button-box">
          <p class="cursor_pointer" @click="openTimeBox('0')">返回</p>
          <p class="cursor_pointer" @click="clearTimeData">清除</p>
          <p class="cursor_pointer" @click="setTimeData">确定</p>
        </div>
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { deptTreeselect,operationalDutyList,operationalDutyDel,userManagerNameList,listOrganization,operationalDutyAdd,operationalDutyEditor } from '@/api/userApi'
  export default {
    name: "combatReadinessDutyInformation",//战备值班信息管理
    components:{
      newModify: resolve => {require(['@/components/equipmentSituation/combatReadinessDutyInformationView/newModify'], resolve)},//新建-修改组件
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        inputData:"",
        //表格限制
        pagesize: 8,
        currentPage:1,
        //列表总数
        total:0,
        //树数据
        leftTopData: [],
        /*数据*/
        tableData:[],
        //选中数据
        multipleSelection:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
        //勾选数量
        tableNum:0,
        // 新增-修改页面状态
        newModifyPageType:true,
        //新增-修改页面数据
        newModifyData:{},
        //日历时间
        timeValue: new Date(),
        timeType:0,
        //搜索时间
        playTime:"请选择时间",
        endTime:"请选择时间",
        //搜索时间2
        playTimeOne:"请选择时间",
        endTimeOne:"请选择时间",
        //人员列表
        userList:[],
        //组织列表
        deptList:[],
      }
    },

    created(){

    },
    mounted(){
      this.deptTreeselect();
      this.userManagerNameList();
      this.listOrganization();
    },
    methods: {
      //点击查询
      clickQuery(){
        this.currentPage = 1;
        this.getListData();
      },
      // 单独删除
      async clickDel(id){
        let ids = [];
        ids.push(id)
        const { data } = await operationalDutyDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //批量删除
      async clickAllDel () {
        let self = this;
        let ids = [];
        for(let i=0;i<self.multipleSelection.length;i++){
          ids.push(self.multipleSelection[i].id)
        }
        const { data } = await operationalDutyDel(ids);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"操作成功",
          };
          this.windowType = !this.windowType;
          this.$refs.multipleTable.clearSelection();
          this.getListData();
        }
      },
      //数据列表
      async getListData (){
        let self = this;
        let obj={
          searchValue:self.inputData,
          organizationId:"",
          pageSize:self.pagesize,
          pageNum:self.currentPage,
          "params[dutyStartTime]":self.playTime=="请选择时间"?"":self.playTime,
          "params[dutyEndTime]":self.endTime=="请选择时间"?"":self.endTime,
          "params[beginTime]":self.playTimeOne=="请选择时间"?"":self.playTimeOne,
          "params[endTime]":self.endTimeOne=="请选择时间"?"":self.endTimeOne,
        };
        console.log(self.$refs.dataConfigTree)
        let list = self.$refs.dataConfigTree.getCheckedNodes();
        if(list[0]){
          obj.organizationId = list[0].id;
        }
        const { data } = await operationalDutyList(obj);
        if(data.code==200){
          this.tableData = data.rows;
          this.total = data.total;
          this.tableNum = 0;
          this.$forceUpdate();
        }
      },
      //获取组织架构树状数据
      async deptTreeselect () {
        let self = this;
        const { data } = await deptTreeselect();
        if(data.code==200){
          this.leftTopData = data.data;
          this.getListData();
        }
      },
      //人员列表
      async userManagerNameList () {
        let self = this;
        const { data } = await userManagerNameList();
        if(data.code==200){
          this.userList = data.data;
        }
      },
      //组织列表
      async listOrganization () {
        let self = this;
        const { data } = await listOrganization();
        if(data.code==200){
          this.deptList = data.data;
        }
      },
      //时间选择事件
      openTimeBox(type){
        this.timeType=type
      },
      setTimeData(){
        let year = this.timeValue.getFullYear();
        let month = this.timeValue.getMonth()+1;
        let day = this.timeValue.getDate();
        if(this.timeType==1){
          this.playTime = year+'-'+month+'-'+day;
        }else if(this.timeType==2){
          this.endTime = year+'-'+month+'-'+day;
        }else if(this.timeType==3){
          this.playTimeOne = year+'-'+month+'-'+day;
        }else if(this.timeType==4){
          this.endTimeOne = year+'-'+month+'-'+day;
        }
        this.timeType = 0;
      },
      clearTimeData(){
        if(this.timeType==1){
          this.playTime = "请选择时间";
        }else if(this.timeType==2){
          this.endTime = "请选择时间";
        }
        this.timeType = 0;
      },
      //新建组件状态切换
      clickPageType(){
        let self = this;
        let newData = {
          title:"新增",
          type:"1",
          deptList:self.deptList,
          list:[
            {
              name:"仓库名称",
              value:"请选择",
              list:[]
            },
            {
              name:"值班人员姓名",
              value:"请选择仓库",
              list:[]
            },
            {
              name:"值班时间",
              valueOne:"请选择",
              valueTwo:"请选择",
              doubleTimeType:true,
            },
            {
              name:"备注",
              value:"",
              textArea:true
            },
          ]
        };
        for(let i=0;i<self.deptList.length;i++){
          newData.list[0].list.push(self.deptList[i].deptName);
        }
        // for(let i=0;i<self.userList.length;i++){
        //   newData.list[1].list.push(self.userList[i].userName);
        // }
        this.newModifyData = {...newData};
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 批量删除
      allDel(){
        if(this.multipleSelection[0]){
          this.windowData = {
            type:"1",
            title:"提示",
            text:"确定要批量删除这些信息吗?",
            leftButton:"取消",
            rightButton:"确定",
            cType:"1",
          };
          this.windowType = !this.windowType;
        }else{
          this.windowData = {
            type:"3",
            title:"提示",
            text:"您没有勾选任何数据!",
          };
          this.windowType = !this.windowType;
        }
      },
      //表格绑定ID
      getRowKey (row) {
        return row.id
      },
      indexMethod(index) {
        return (this.currentPage-1)*this.pagesize+index+1;
      },
      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: `,val);
        this.currentPage = val;
        this.getListData();
      },
      //编辑
      handleEdit(index, row) {
        let self = this;
        let newData = {
          title:"编辑",
          type:"2",
          id:row.id,
          deptList:self.deptList,
          list:[
            {
              name:"仓库名称",
              value:row.organizationName,
              list:[]
            },
            {
              name:"值班人员姓名",
              value:row.userName,
              list:[]
            },
            {
              name:"值班时间",
              valueOne:row.dutyStartTime,
              valueTwo:row.dutyEndTime,
              doubleTimeType:true,
            },
            {
              name:"备注",
              value:row.remark,
              textArea:true
            },
          ]
        };
        for(let i=0;i<self.deptList.length;i++){
          newData.list[0].list.push(self.deptList[i].deptName);
        }
        // for(let i=0;i<self.userList.length;i++){
        //   newData.list[1].list.push(self.userList[i].userName);
        // }
        this.newModifyData = {...newData};
        this.newModifyPageType = !this.newModifyPageType;
      },
      // 删除
      handleDelete(index, row) {
        this.windowData = {
          type:"1",
          title:"提示",
          text:"确定要删除这条信息吗?",
          leftButton:"取消",
          rightButton:"确定",
          cType:"2",
          newId:row.id
        };
        this.windowType = !this.windowType;
      },
      //勾选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.tableNum = this.multipleSelection.length
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        if(data.cType==1){
          this.clickAllDel();
        }else if(data.cType==2){
          this.clickDel(data.newId);
        }
      },
      //左上点击事件
      clickTree(data,node){
          if(node.checked){
            this.$refs.dataConfigTree.setCheckedKeys([]);
          }else{
            this.$refs.dataConfigTree.setCheckedKeys([node.data.id]);
          }
      },
      //新增-修改组件内左侧按钮事件
      newModifyLeftClick(){
        this.newModifyPageType = !this.newModifyPageType;
      },
      //新增-修改组件内左侧按钮事件
      newModifyRightClick(data){
        if(data.list[0].value=="请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择仓库",
          };
          this.windowType = !this.windowType;
          return
        }else if(data.list[1].value=="请选择仓库"||data.list[1].value=="请选择人员"||data.list[1].value=="无可选择人员"||data.list[1].value=="仓库已无该人员"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择人员",
          };
          this.windowType = !this.windowType;
          return
        }else if(data.list[2].valueOne=="请选择"||data.list[2].valueTwo=="请选择"){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请选择时间",
          };
          this.windowType = !this.windowType;
          return
        }else if(!data.list[3].value){
          this.windowData = {
            type:"3",
            title:"提示",
            text:"请输入备注信息",
          };
          this.windowType = !this.windowType;
          return
        }
        if(data.type=="1"){
          //新增
          this.operationalDutyAdd(data);
        }else{
          //编辑
          this.operationalDutyEditor(data);
        }
      },
      async operationalDutyAdd(item){
        let self = this;
        let obj = {
          organizationId:"",
          sysUserId:item.list[1].value,
          dutyStartTime:item.list[2].valueOne,
          dutyEndTime:item.list[2].valueTwo,
          remark:item.list[3].value,
        };
        for(let i=0;i<self.deptList.length;i++){
          if(item.list[0].value==self.deptList[i].deptName){
            obj.organizationId = self.deptList[i].deptId
          }
        }
        const { data } = await operationalDutyAdd(obj);
        if(data.code==200){
          this.newModifyPageType = !this.newModifyPageType;
          this.windowData = {
            type:"2",
            title:"提示",
            text:"新增成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      },
      async operationalDutyEditor(item){
        let self = this;
        let obj = {
          id:item.id,
          organizationId:"",
          sysUserId:item.list[1].value,
          dutyStartTime:item.list[2].valueOne,
          dutyEndTime:item.list[2].valueTwo,
          remark:item.list[3].value,
        };
        for(let i=0;i<self.deptList.length;i++){
          if(item.list[0].value==self.deptList[i].deptName){
            obj.organizationId = self.deptList[i].deptId
          }
        }
        const { data } = await operationalDutyEditor(obj);
        if(data.code==200){
          this.newModifyPageType = !this.newModifyPageType;
          this.windowData = {
            type:"2",
            title:"提示",
            text:"编辑成功",
          };
          this.windowType = !this.windowType;
          this.getListData();
        }
      }
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box-one
    display flex
    flex:1;
    .big-max-box-one
      margin:0 105px;
      flex:1;
      display flex
      flex-direction: column;
      .top-box
        display flex
        height:60px;
        .input-box
          width:1360px;
          display flex
          .search-input
            height:28px;
            width:290px;
            border:1px solid $theme;
            padding-left:10px;
          .time-box
            width:350px;
            display flex
            margin-left:20px;
            p
              color:$color_ff;
            p:nth-child(1)
              width:75px;
              line-height:30px;
              font-size:$font_14;
            p:nth-child(2)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              font-size:$font_12;
              line-height:30px;
            p:nth-child(3)
              width:27px;
              line-height:30px;
            p:nth-child(4)
              width:120px;
              height:30px;
              background url("~@/assets/images/button_08.png")
              background-size 100% 100%
              line-height:30px;
              font-size:$font_12;
        .button-box
          margin-left:32px;
          display flex
          height:30px;
          width:80px;
          background:url("~@/assets/images/button_03.png");
          background-size:100% 100%;
          img
            display block
            height:20px;
            width:20px;
            margin:5px 6px 0 13px;
          p
            line-height:30px;
            font-size:$font_12;
            color:$color_ff;
        .add-button
          width:110px;
          height:30px;
          background:url("~@/assets/images/button_06_1.png");
          background-size:100% 100%;
          line-height:30px
          color:$color_ff;
          font-size:$font_12;
          padding-left:44px;
          text-align left
        .del-button
          margin-left:30px;
          width:110px;
          height:30px;
          background:url("~@/assets/images/button_05_1.png");
          background-size:100% 100%;
          line-height:30px
          color:$color_ff;
          font-size:$font_12;
          padding-left:41px;
          text-align left
        .text-p
          width:103px;
          color:$color_ff;
          line-height:30px
          font-size:$font_12;
      .big-bottom-box
        display flex
        flex:1;
        .left-max-box
          width:219px;
          .max-tree-box
            z-index:1;
            overflow-x:hidden;
            overflow-y:scroll;
            white-space: nowrap;
            .tree-box
              display flex
              img
                display block
                width:20px;
                height:20px;
              p
                margin-left:8px;
        .right-max-box
          width:1490px;
          display: flex;
          flex: 1;
          flex-direction: column;
          .table-box
            width:1490px !important;
            margin-bottom:30px;
          .table-min-button
            width:140px;
            margin:0 auto;
            display flex
            div:nth-child(1)
              height:20px;
              width:60px;
              font-size:$font_14;
              color:$theme;
              display flex
              margin-right:11px;
              img
                display block
                height:20px;
                width:20px;
                margin-right:4px;
            div:nth-child(2)
              height:20px;
              width:60px;
              font-size:$font_14;
              color:$theme3;
              display flex
              img
                display block
                height:20px;
                width:20px;
                margin-right:4px;
      //时间日历
  .time-max-big-box
    z-index 6
    height:100%;
    width:100%;
    position: absolute
    top:0;
    left:0;
    background:rgba(0,0,0,0.3);
    .time-big-box
      z-index 6
      height:750px;
      width:660px;
      position: absolute
      top:50%;
      left:50%;
      transform :translate3d(-50%,-50%,0)
      margin:auto;
      background $color_ff
      border-radius:8px;
      border:4px solid $theme;
      .button-box
        display flex
        color:$color_ff;
        width:390px;
        margin:20px auto;
        p:nth-child(1)
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_10.png");
          background-size 100% 100%
        p:nth-child(2)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_05.png");
          background-size 100% 100%
        p:nth-child(3)
          margin-left:20px;
          height:30px;
          line-height:30px;
          width:120px;
          background:url("~@/assets/images/button_02.png");
          background-size 100% 100%
  //修改table表格样式
  .el-table
    background rgba(6,177,240,0.2)
  .el-table /deep/ tr
  .el-table /deep/ th
    background rgba(6,177,240,0)
  .el-table::before
    height:0;
  .el-table /deep/ .cell
    max-height:46px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  .el-table /deep/ td
  .el-table /deep/ th.is-leaf
    border-bottom:0!important;
  .el-table /deep/ .el-checkbox__inner
    //background rgba(6,177,240,0.2)
    border 1px solid #216f93 !important
  .el-table /deep/ thead
    color:$color_ff;
  .el-table /deep/ th
    text-align-last: center;
  .el-table /deep/ td
    text-align-last: center;
  .el-table
    color:$color_a1
  .el-table /deep/ tbody tr:hover > td
    background rgba(6,177,240,0.2)
    color:$theme;
  .el-table /deep/ .el-checkbox
    width:14px;
    margin:0 auto;
    display block
  //修改动作条样式
  .el-pagination.is-background /deep/ .btn-next
  .el-pagination.is-background /deep/ .btn-prev
  .el-pagination.is-background /deep/ .el-pager li
    background:url("~@/assets/images/button_13.png");
    color:$color_ff;
  .el-pagination.is-background /deep/ .el-pager li:not(.disabled).active
    background:url("~@/assets/images/button_14.png");
    color:$color_ff;
  .colorA
    color :$theme;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;

  //树状图
  .el-tree
    background rgba(0,0,0,0) !important
  /*多层级样式*/
  .levelImg{
    margin-top: 7px;
  }
  .level1{
    font-size:$font_17;
    color:$theme !important;
    height:34px;
    line-height 34px
  }
  .level2{
    font-size:$font_14;
    height:22px;
    line-height 22px
  }
  .level3{
    font-size:$font_12;
    height:20px;
    line-height 20px
  }
  .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>
