<template>
<!-- 部门门类管理界面 -->
  <div>
    <el-card style="margin-bottom:8px">
      <el-row>
        <el-col :span="8">
          <span>1关键字：</span>
          <el-input style="width:70%" size="small" v-model="search.deptname" clearable placeholder="请输入部门名称搜索">
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
          <el-button size="mini" type="info" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button>
        </el-col>
        <el-col :span="8" style="text-align:right;padding:0 10px">
          <!-- <div style="margin-top:5px;text-align:right;padding:0 40px"> -->
          <el-button :loading="btnloading" size="mini" type="success" icon="el-icon-check" @click="submitSave">保
            存</el-button>
          <!-- v-if="showButtons.bc" -->
          <!-- </div> -->
        </el-col>
      </el-row>
    </el-card>
    <el-card v-loading="btnloading" :body-style="{ padding: '10px' }" style="height: calc(100vh - 180px);">
      <div class="page">
        <div class="left">
            <el-table ref="multipleTable" size='small' :max-height="tableHeights" highlight-current-row :data="tableData"
                tooltip-effect="dark" :row-key="getRowKeys" @row-click="handleRowClick" border>
                <el-table-column prop="deptname" align="center" label="部门名称"></el-table-column>
                <el-table-column prop="deptcode" align="center" label="部门编码"></el-table-column>
            </el-table>
        </div>
        <div class="right">
            <el-input clearable  placeholder="输入节点名称搜索"  v-model="filterText"></el-input>
            <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 240px)">
                <el-tree
                    :data="treeData"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="treeRef"
                    :check-strictly="isCheck"
                    highlight-current
                    :filter-node-method="filterNode"
                    :props="defaultProps">
                </el-tree>
            </el-scrollbar>
        </div>
      </div>
    </el-card>
    <loading-tem :loadingStatus='loadingStatus' />
  </div>
</template>
<script>
import { antiShake } from "@/utils/antiShake.js"; // 防抖
import { mapState, mapGetters, mapActions } from "vuex";
import { clearObjValue, message } from "@/utils/common";
import {getClassTreeByDeptId,saveDeptClass} from "@/api/jurisdiction/dept";
import {getClassTreeByClassNameTwo} from "@/api/fondclass.js";
  export default {
    data() {
      return {
        isCheck:false, // 是否关联父子联动
        filterText:'',
        btnloading: false,
        search: {
          deptname: "",
        },
        getRowKeys(row) {
          return row.id;
        },
        loadingStatus: false,
        rowOne: {},
        paramsOne: {},
        paramsTwo: {},
        multipleSelection: [],
        isAllSelect: false,
        treeData:[], // 树结构数据
        tableHeights: window.innerHeight - 220,
        defaultProps:{
            children: 'childClass',
            label: 'className'
        },
        currentRowArr:[], // 当前行对象
        checkedIds:[], // 回显树显示对象
      }
    },
    watch: {
      filterText(val) {
        this.$refs.treeRef.filter(val);
      }
    },
    computed: {
      ...mapState({
        tableData:(state)=>state.dept.tableData, // 用户全宗
      }),
    },
    methods: {
        // 树节点筛选
        filterNode(value, data) {
            if (!value) return true;
            return data.className.indexOf(value) !== -1;
        },
        // 行点击
        handleRowClick(row){
            this.currentRowArr = [];
            this.currentRowArr.push(row)
            this.getClassTreeByDeptId();
        },
        // 根据部门查询对应门类树
        getClassTreeByDeptId(){
            // 清空
            this.$refs.treeRef.setCheckedKeys([]);
            this.isCheck = true; // 父子不联动；
            this.filterText = "";
            let params = {
                deptId:this.currentRowArr[0].id
            }
            getClassTreeByDeptId(params).then((res)=>{
                let result = res.body.classTrees;
                if(result.length != 0){
                    let nodeIds = result.map((item)=>{return item.id}) || [];
                    this.$nextTick(()=>{
                      this.$refs.treeRef.setCheckedKeys(nodeIds);
                      this.isCheck = false; // 赋值完后联动；
                    })
                }
                
            }).catch((error)=>{
                this.$message({type:'error',message:error});
            })
        },
        // 树节点check发生变化
        treeCheckChange(data){
            console.log(data)
        },
        // 点击保存按钮
        submitSave:antiShake(function(){
            if(this.currentRowArr.length==0){
                this.$message({type:'warning',message:'请选择左侧部门数据'})
                return;
            }
            this.btnloading = true;
            // 获取选中的树节点id
            let checkedKeys = this.$refs.treeRef.getCheckedKeys();
            let params = {
                classIds:checkedKeys.join(","),
                deptId:this.currentRowArr[0].id
            }
            saveDeptClass(params).then((res)=>{
                this.btnloading = false;
                this.getClassTreeByDeptId();
                this.$message({type:'success',message:res.msg});
            }).catch((error)=>{
                this.btnloading = false;
                this.$message({type:'error',message:error});
            })
        }),
        // 递归查询treeId
        findNodeById(nodes, id) {
            if(nodes.length==0){
                return []
            }
            for(let i=0;i<nodes.length;i++){
                this.checkedIds.push(nodes[i].id);
                if(nodes[i].children.length == 0){
                    return this.checkedIds;
                }else{
                    this.findNodeById(nodes[i].children);
                }
            }

            return null;
        },
        searchClick(val) {
            switch (val) {
            case 1:
                this.getDeptData();
                this.currentRowArr = [];
                this.$refs.treeRef.setCheckedNodes([]);
                break;
            case 2:
                clearObjValue(this.search)
                break;
            }
        },
        // 部门列表
        getDeptData() {
            let params = {
            deptname: this.search.deptname,
            limit: 5000
            };
            this.$store.dispatch("dept/GetDepts", params);
        },
        // 查询树结构
        initGetTree(){
            this.btnloading = true;
            let data = {
                className: "档案",
                onlyMapped: true
            };
            getClassTreeByClassNameTwo(data).then(res => {
                this.btnloading = false;
                if (res.success) {
                    this.treeData = res.body.list;
                } else {
                    this.$message.error(res.msg);
                }
                })
                .catch(err => {
                this.btnloading = false;
            });
        },
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid"),
      }
      this.getDeptData();
      this.initGetTree();
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    display: flex;
    justify-content: space-between;

    .left {
      width: 35%;
    }

    .right {
      width: 63%;
    }
  }

  ::v-deep .el-table__row--level-1 {
    .el-table-column--selection {
      .cell {
        text-align: right;
      }
    }

  }

  ::v-deep.row-expand-unhas {
    .el-table__expand-column {
      pointer-events: none;
    }
  }

  ::v-deep .row-expand-unhas {
    .el-table__expand-column {
      .el-table__expand-icon {
        visibility: hidden;
      }
    }
  }

  ::v-deep.el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  // /*2.展开按钮未点击的样式是加号带边框*/
  // ::v-deep .row-expand-has {
  //   .el-icon-arrow-right:before {
  //     content: "\e6e9";
  //     border: 1px solid #ccc;
  //     // padding: 1px;
  //   }
  // }
  // /*2.按钮已点击展开之后的样式是减号带边框*/
  // ::v-deep .row-expand-has {
  //   .el-icon-arrow-right:before {
  //     content: "\e6e9";
  //   }
  // }

  .EBAY-publication {
    // background:red;
    // width: 80%;
    letter-spacing: 1px;
    max-height: 750px;
    overflow-y: scroll;

    ::v-deep.el-checkbox__label {
      font-size: 12px;
      // color: red;
    }

    ::v-deep .mianmune {
      .el-checkbox__label {
        font-weight: bolder;
        font-size: 15px;
        letter-spacing: 2px;
        // color: #000;
      }


    }

    ::v-deep .Twomune {
      .el-checkbox__label {
        font-weight: bolder;
        font-size: 13px;
        letter-spacing: 2px;
      }
    }

    ::v-deep .threemune {
      .el-checkbox__label {
        font-weight: bolder;
        font-weight: 600;
        font-size: 12px;
      }
    }

    .el-divider--horizontal {
      margin: 10px 0;
    }

    .margin-L40 {
      padding-left: 70px;

    }

    .flx {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      align-items: center;

      .flx-box {
        width: 20%;
        line-height: 2rem;
      }
    }
  }

  ::v-deep {
    .el-table__body tr.current-row>td {
      background-color: #95aaee;
      color: #ffffff;
      font-weight: 600;
    }
  }

</style>
