<template>
  <el-dialog class="itemCheckComponent"
             :close-on-click-modal="false"
             title="选择检查项目" :visible.sync="itemCheckType" v-if="itemCheckType"
             @close="addDialogAllOff" width="1383px" append-to-body>
    <div class="itemCheckComponent-user-box">
      <div class="itemCheckComponent-user-content-box">
        <div class="left-max-box">
          <div class="dept-table-title-box">
            <p>待选项目</p>
            <p>{{leftTreeNum}}/{{leftTreeList.length}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="leftTreeQueryParams" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="itemIdOne">
                <el-select v-model="leftTreeQueryParams.itemIdOne" @change="leftSelectChange" placeholder="一级检查项" style="width: 214px">
                  <el-option
                    v-for="item in leftItemOptionOne"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="itemIdTwo">
                <el-select v-model="leftTreeQueryParams.itemIdTwo" placeholder="二级检查项" style="margin-right:0;">
                  <el-option
                    v-for="item in leftItemOptionTwo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="getLeftTreeData" style="width:60px;margin-right:10px;">搜索</p>
              <p class="page-reset-common-style-button" @click="resetLeftTreeData" style="width:60px;margin-right:0;">重置</p>
            </el-form>
            <div class="tree-max-big-box">
              <div class="tree-title-box">
                <div class="tree-title-check-box">
                  <p class="check-p el-icon-check" v-if="leftTreeCheckType" @click="leftAllCheck"></p>
                  <p class="no-check-p" v-if="!leftTreeCheckType" @click="leftAllCheck"></p>
                  <p class="tree-title-p">序号</p>
                </div>
                <p class="tree-title-name-p">检查项目</p>
              </div>
              <el-tree
                @check-change="leftTreeChange"
                class="tree-check-box"
                :data="leftTreeData"
                show-checkbox
                ref="leftTree"
                node-key="id"
                :default-expand-all="true"
                :render-content="renderContent"
                :props="defaultProps">
              </el-tree>
            </div>
          </div>
        </div>
        <div class="center-box">
          <p class="el-icon-arrow-left" @click="itemArrowButton(1)">到左边</p>
          <p class="el-icon-arrow-right" @click="itemArrowButton(2)">到右边</p>
        </div>
        <div class="right-max-box">
          <div class="dept-table-title-box">
            <p>已选项目</p>
            <p>{{rightTreeNum}}/{{rightTreeList.length}}</p>
          </div>
          <div class="dept-table-max-box">
            <el-form :model="rightTreeQueryParams" class="form-box" ref="queryForm" :inline="true" label-width="50px">
              <el-form-item label="" prop="itemIdOne">
                <el-select v-model="rightTreeQueryParams.itemIdOne" @change="rightSelectChange" placeholder="一级检查项" style="width: 214px">
                  <el-option
                    v-for="item in rightItemOptionOne"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="itemIdTwo">
                <el-select v-model="rightTreeQueryParams.itemIdTwo" placeholder="二级检查项" style="margin-right:0;">
                  <el-option
                    v-for="item in rightItemOptionTwo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <p class="page-inquire-common-style-button" @click="getRightTreeData" style="width:60px;margin-right:10px;">搜索</p>
              <p class="page-reset-common-style-button" @click="resetRightTreeData" style="width:60px;margin-right:0;">重置</p>
            </el-form>
            <div class="tree-max-big-box">
              <div class="tree-title-box">
                <div class="tree-title-check-box">
                  <p class="check-p el-icon-check" v-if="rightTreeCheckType" @click="rightAllCheck"></p>
                  <p class="no-check-p" v-if="!rightTreeCheckType" @click="rightAllCheck"></p>
                  <p class="tree-title-p">序号</p>
                </div>
                <p class="tree-title-name-p">检查项目</p>
              </div>
              <el-tree
                @check-change="rightTreeChange"
                class="tree-check-box"
                :data="rightTreeData"
                show-checkbox
                ref="rightTree"
                node-key="id"
                :default-expand-all="true"
                :render-content="renderContent"
                :props="defaultProps">
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="addDialogAllOff">取消</p>
        <p class="dialog-footer-button-primary" @click="addUserButton">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import {
    securityCheckOptionShuttleList,securityCheckOptionShuttleRightList,securityCheckOptionSelList
  } from '@/api/safetyCheck/index'
  import { getDeptDropList } from '@/api/commonality/permission'
  export default {
    name: 'itemCheckComponent',
    props:{
      itemCheckComponentData:{},
    },
    data(){
      return{
        itemCheckType:true,
        /*===================================树形表配置===================================*/
        checkIds:[],
        /*===================================树形表配置===================================*/
        defaultProps: {
          children: 'children',
          label: 'code'
        },
        /*===================================左侧穿梭框相关===================================*/
        leftTreeCheckType:false,
        leftItemOptionOne:[],
        leftItemOptionTwo:[],
        leftTreeQueryParams:{
          itemIdOne:null,
          itemIdTwo:null,
        },
        leftTreeData:[],
        leftTreeList:[],
        leftTreeTotal:0,
        leftTreeNum:0,
        /*===================================右侧穿梭框相关===================================*/
        rightTreeCheckType:false,
        rightItemOptionOne:[],
        rightItemOptionTwo:[],
        rightTreeQueryParams:{
          itemIdOne:null,
          itemIdTwo:null,
        },
        rightTreeData:[],
        rightTreeList:[],
        rightTreeTotal:0,
        rightTreeNum:0,
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize() {
        this.$set(this,'checkIds',this.itemCheckComponentData);
        this.getItemOne();
        this.getLeftTreeData();
        this.getRightTreeData();
      },
      //窗口关闭
      addDialogAllOff(){
        this.$parent.tableButton(4)
      },
      //提交
      addUserButton(){
        if(!this.checkIds[0]){
          this.msgError('请勾选检查项')
          return
        }
        this.$parent.tableButton(5,this.checkIds)
      },
      //查询一级指标项
      getItemOne(){
        securityCheckOptionSelList({level:1,parentId:''}).then(response => {
          this.$set(this, 'leftItemOptionOne', response.data)
          this.$set(this, 'rightItemOptionOne', response.data)
        });
      },
      //获取检查指标下拉列表
      getItemTwo(val,type){
        securityCheckOptionSelList({level:2,parentId:val}).then(response => {
          if(type == 'left'){
            this.$set(this.leftTreeQueryParams, 'itemIdTwo', null)
            this.$set(this, 'leftItemOptionTwo', response.data)
          }else if(type == 'right'){
            this.$set(this.rightTreeQueryParams, 'itemIdTwo', null)
            this.$set(this, 'rightItemOptionTwo', response.data)
          }
        });
      },
      /*===================================左侧列表相关===================================*/
      //全选/反选
      leftAllCheck(){
        if(!this.leftTreeData[0]){
          return
        }
        if(this.leftTreeCheckType){
          this.$refs.leftTree.setCheckedKeys([]);
          this.$set(this,'leftTreeCheckType',false);
        }else{
          let list = [];
          let maxList = this.convertTreeData(this.leftTreeData);
          for(let i=0;i<maxList.length;i++){
            list.push(maxList[i].id)
          }
          this.$refs.leftTree.setCheckedKeys(list);
          this.$set(this,'leftTreeCheckType',true);
        }
      },
      //树选中触发
      leftTreeChange(val){
        let self = this;
        let list = []
        list = list.concat(this.$refs.leftTree.getCheckedKeys())
        list = list.concat(this.$refs.leftTree.getHalfCheckedKeys())
        list = [...new Set(list)]
        let maxNum = this.convertTreeData(this.leftTreeData).length;
        let num = list.length;
        if(maxNum == num){
          this.$set(this,'leftTreeCheckType',true);
        }else{
          this.$set(this,'leftTreeCheckType',false);
        }
        let minList = this.$refs.leftTree.getCheckedKeys();
        let minNum = 0
        for(let i=0;i<minList.length;i++){
          for(let o=0;o<self.leftTreeList.length;o++){
            if(minList[i]==self.leftTreeList[o].id){
              minNum++
            }
          }
        }
        this.$set(this,'leftTreeNum',minNum);
      },
      //左侧下拉列表选中
      leftSelectChange(val){
        this.getItemTwo(val,'left');
      },
      //查询
      getLeftTreeData(){
        let obj = {
          id:this.leftTreeQueryParams.itemIdTwo?this.leftTreeQueryParams.itemIdTwo:(this.leftTreeQueryParams.itemIdOne?this.leftTreeQueryParams.itemIdOne:null),
          notIds:this.checkIds,
        };
        securityCheckOptionShuttleList(obj).then(response => {
          let maxList = [];
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let num = 0;
            if(response.data[i].children){
              for(let o=0;o<response.data[i].children.length;o++){
                if(response.data[i].children[o].children){
                  num++
                  for(let x=0;x<response.data[i].children[o].children.length;x++){
                    list.push(response.data[i].children[o].children[x])
                  }
                }
              }
            }
            if(num != 0){
              maxList.push(response.data[i]);
            }
          }
          this.$set(this,'leftTreeData',maxList);
          this.$set(this,'leftTreeList',list);
          this.$set(this,'leftTreeNum',0);
          this.$set(this,'leftTreeCheckType',false);
        });
      },
      //重置
      resetLeftTreeData(){
        this.$set(this,'leftTreeQueryParams',{
          itemIdOne:null,
          itemIdTwo:null,
        });
        this.$set(this, 'leftItemOptionTwo', [])
        this.getLeftTreeData();
      },
      /*===================================右侧列表相关===================================*/
      //全选-反选
      rightAllCheck(){
        if(!this.rightTreeData[0]){
          return
        }
        if(this.rightTreeCheckType){
          this.$refs.rightTree.setCheckedKeys([]);
          this.$set(this,'rightTreeCheckType',false);
        }else{
          let list = [];
          let maxList = this.convertTreeData(this.rightTreeData);
          for(let i=0;i<maxList.length;i++){
            list.push(maxList[i].id)
          }
          this.$refs.rightTree.setCheckedKeys(list);
          this.$set(this,'rightTreeCheckType',true);
        }
      },
      //树选中触发
      rightTreeChange(val){
        let self = this;
        let list = []
        list = list.concat(this.$refs.rightTree.getCheckedKeys())
        list = list.concat(this.$refs.rightTree.getHalfCheckedKeys())
        list = [...new Set(list)]
        let maxNum = this.convertTreeData(this.rightTreeData).length;
        let num = list.length;
        if(maxNum == num){
          this.$set(this,'rightTreeCheckType',true);
        }else{
          this.$set(this,'rightTreeCheckType',false);
        }
        let minList = this.$refs.rightTree.getCheckedKeys();
        let minNum = 0
        for(let i=0;i<minList.length;i++){
          for(let o=0;o<self.rightTreeList.length;o++){
            if(minList[i]==self.rightTreeList[o].id){
              minNum++
            }
          }
        }
        this.$set(this,'rightTreeNum',minNum);
      },
      //右侧下拉列表选中
      rightSelectChange(val){
        this.getItemTwo(val,'right');
      },
      //查询
      getRightTreeData(){
        let obj = {
          id:this.rightTreeQueryParams.itemIdTwo?this.rightTreeQueryParams.itemIdTwo:(this.rightTreeQueryParams.itemIdOne?this.rightTreeQueryParams.itemIdOne:null),
          ids:this.checkIds,
        };
        securityCheckOptionShuttleRightList(obj).then(response => {
          let maxList = [];
          let list = [];
          for(let i=0;i<response.data.length;i++){
            let num = 0;
            if(response.data[i].children){
              for(let o=0;o<response.data[i].children.length;o++){
                if(response.data[i].children[o].children){
                  num++
                  for(let x=0;x<response.data[i].children[o].children.length;x++){
                    list.push(response.data[i].children[o].children[x])
                  }
                }
              }
            }
            if(num != 0){
              maxList.push(response.data[i]);
            }
          }
          this.$set(this,'rightTreeData',maxList);
          this.$set(this,'rightTreeList',list);
          this.$set(this,'rightTreeNum',0);
          this.$set(this,'rightTreeCheckType',false);
        });
      },
      //重置
      resetRightTreeData(){
        this.$set(this,'rightTreeQueryParams',{
          itemIdOne:null,
          itemIdTwo:null,
        });
        this.$set(this, 'rightItemOptionTwo', [])
        this.getRightTreeData();
      },
      /*===================================穿梭按钮相关===================================*/
      //穿梭按钮
      itemArrowButton(type){
        if(type == 1){
          let maxList = JSON.parse(JSON.stringify(this.checkIds));
          let checkList = this.$refs.rightTree.getCheckedNodes();
          for(let o=0;o<checkList.length;o++){
            for(let i=0;i<maxList.length;i++){
              if(maxList[i]==checkList[o].id){
                maxList.splice(i,1);
                i--
              }
            }
          }
          this.$set(this,'checkIds',JSON.parse(JSON.stringify(maxList)));
          this.getLeftTreeData();
          this.getRightTreeData();
        }else if(type == 2){
          let list = this.checkIds.concat(this.$refs.leftTree.getCheckedKeys())
          list = list.concat(this.$refs.leftTree.getHalfCheckedKeys())
          list = [...new Set(list)]
          this.$set(this,'checkIds',JSON.parse(JSON.stringify(list)));
          this.getLeftTreeData();
          this.getRightTreeData();
        }
      },
      /*===================================工具类===================================*/
      // tree 结构转化成一维数组
      convertTreeData(list) {
        let menuOptions = JSON.parse(JSON.stringify(list))
        for (let i = 0; i < menuOptions.length; i++) {
          if (menuOptions[i].children != undefined) {
            const temp = menuOptions[i].children;
            delete menuOptions[i].children;
            menuOptions = menuOptions.concat(temp);
          }
        }
        return menuOptions;
      },
      /*===================================树形表配置===================================*/
      renderContent(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span class='custom-tree-node-code'>{data.code}</span>
            <span class='custom-tree-node-name'>{data.name}</span>
          </span>
        )
      },
    }
  }
</script>

<style scoped lang="scss">
  .itemCheckComponent{
    overflow: hidden;
    .itemCheckComponent-user-box{
      height:600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .itemCheckComponent-user-content-box{
        flex:1;
        display: flex;
        overflow: hidden;
        .dept-table-title-box{
          display: flex;
          padding:0 20px;
          background: rgba(1,131,250,0.1);
          p{
            flex:1;
            color:#0183FA;
            font-size:16px;
            line-height:40px;
          }
          p:nth-child(1){
            text-align: left;
          }
          p:nth-child(2){
            text-align: right;
          }
        }
        .dept-table-max-box{
          border: 1px solid #e0e0e0;
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          padding:20px;
          .form-index{
            .el-input__inner{
              border-right:none;
              padding-right:0;
            }
            .el-input-group__append{
              background: #fff;
              cursor: pointer;
              padding:0 10px;
            }
          }
          input{
            border: 1px solid #DCDFE6;
          }
        }
        .left-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .right-max-box{
          height:550px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          width:639px;
        }
        .center-box{
          width:70px;
          p{
            display: block;
            width:60px;
            height:30px;
            line-height:30px;
            text-align: center;
            background: #fff;
            color:#0183FA;
            border-radius:4px;
            border:1px solid #0183FA;
            cursor: pointer;
            font-size:12px;
          }
          p:nth-child(1){
            margin:270px 5px 0;
          }
          p:nth-child(2){
            margin:14px 5px 0;
          }
          p:hover{
            background: #0183FA;
            color:#fff;
            border:1px solid #0183FA;
          }
        }
        ::v-deep .el-range-editor--small .el-range__icon{
          display: none;
        }
        ::v-deep .el-range-editor--small .el-range__close-icon{
          display: none;
        }
        ::v-deep .el-date-editor .el-range-input{
          width:45%;
        }
        ::v-deep .el-range-editor--small .el-range-separator{
          line-height:30px;
        }
        ::v-deep .el-input-group__append, .el-input-group__prepend{
          background-color: #fff;
        }
        .form-index{
          ::v-deep .el-input--medium .el-input__inner{
            border:1px solid #DCDFE6;
            border-right:none;
            padding-right:0;
          }
          ::v-deep .el-input-group__append{
            padding:0 10px;
            cursor: pointer;
          }
        }
      }
      .dialog-footer-box{
        display: flex;
      }
    }
    ::v-deep .el-dialog__body{
      padding: 30px 20px!important;
    }
    .tree-max-big-box{
      width:595px;
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .tree-title-box{
        height:40px;
        display: flex;
        flex-direction: row;
        border:1px solid #E0E0E0;
        background-color: #f5f5f5;
        .tree-title-check-box{
          width:190px;
          display: flex;
          border-right:1px solid #E0E0E0;
          .check-p{
            background-color: #0183FA;
            border-radius:2px;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            font-size:12px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p{
            border:1px solid #E0E0E0;
            border-radius:2px;
            background-color: #fff;
            color:#fff;
            text-align: center;
            line-height:14px;
            width:14px;
            height:14px;
            margin:13px 15px 13px 13px;
            cursor: pointer;
          }
          .no-check-p:hover{
            border:1px solid #0183FA;
          }
          .tree-title-p{
            font-size:16px;
            color: #333;
            line-height:40px;
          }
        }
        .tree-title-name-p{
          width:420px;
          text-align: center;
          font-size:16px;
          color: #333;
          line-height:40px;
        }
      }
      //表格滚动条样式
      .tree-check-box::-webkit-scrollbar{
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 6px;
      }
      .tree-check-box::-webkit-scrollbar-thumb{
        border-radius: 5px;
        background: #D3D7D4;
      }
      .tree-check-box::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px #FFFFFF;
        border-radius: 0;
        background: #FFFFFF;
      }
      .tree-check-box{
        height:400px;
        overflow-y: scroll;
        border:1px solid #E0E0E0;
        border-top:none;
        ::v-deep .el-tree-node__content{
          border-bottom:1px solid #E0E0E0;
          height:40px;
          .el-tree-node__label{
            display: inline-block;
            height:40px;
            line-height:40px;
            border-left:1px solid #E0E0E0;
            padding-left:24px;
          }
          .el-tree-node__expand-icon{
            margin-left:18px;
          }
          .el-tree-node__label{
            margin-left:40px;
          }
          .custom-tree-node-code{
            display: inline-block;
            width:120px;
            height:40px;
            line-height:40px;
            border-right:1px solid #E0E0E0;
          }
          .custom-tree-node-name{
            padding-left:24px;
          }
        }
        ::v-deep .el-tree-node__children{
          .el-tree-node__content{
            .custom-tree-node-code{
              display: inline-block;
              width:102px;
              height:40px;
              line-height:40px;
              border-right:1px solid #E0E0E0;
            }
          }
          .el-tree-node__children{
            .el-tree-node__content{
              .custom-tree-node-code{
                display: inline-block;
                width:84px;
                height:40px;
                line-height:40px;
                border-right:1px solid #E0E0E0;
              }
            }
          }
        }
      }
    }
  }
</style>
