<template>
  <div class="organization">
      <el-row :gutter="20">
        <el-col class="rim" :span="12">
          <el-tree
            default-expand-all
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            @check="onChecked"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  v-if="node.level < 5"
                  type="text"
                  icon="el-icon-caret-bottom"
                  size="small"
                  @click="() => append(data,node)"
                ></el-button>
              </span>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="11" v-show = 'false'>
          <p class="area-p">项目范围包含下列区域所有机构和人员({{ tagsRegion.length }})</p>
          <el-tag
            v-for="tag in tagsRegion"
            :key="tag.name"
            closable
            :type="tag.type"
            @close="handleCloseTree(tag)"
          >{{tag.name}}</el-tag>
        </el-col>
      </el-row>
      <div style="margin-top: 60px;margin-left: 250px;">
      <el-button type="primary" size="small" @click="save">保存</el-button>
    </div>

  </div>
</template>

<script>
import { openLoading, closeLoading } from "@/utils/utils";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import * as operationData from "@/utils/operation";
import { moRelSearch, morDeleteOrg } from '@/utils/yqrange/memberApi';
import { getOrgProvincesReq } from '@/utils/yqrange/rangeApi';
let vm = null;
export default {
  props: {
    circleId: {
      type: Number | String,
      default: 1
    },
    roleType: {
      type: Number | String,
      default: 1
    },
  },
  data() {
    return {
      allSelectedKeys: [],
      updatedTree: false,
      organizationRegion: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf"
      },
      treeData: [],
      tagsRegion: []
    }
  },
  created() {
    vm = this;
    //Idtype:1,内部 2.外部
    vm.idType = localStorage.getItem("storageIdType");
    if(vm.idType == 1){
    }
    else {
    }
    this.getAdministrative();
  },
  mounted() {
  },
  methods: {
      //通过key设置tree
      setCheckedKeys(tagsRegion) {
      let treeKeyList = [];
      for (let index = 0; index < tagsRegion.length; index++) {
        treeKeyList[index] = tagsRegion[index].key;
      }
      this.$refs.tree.setCheckedKeys(treeKeyList);
    }, 
    //获取勾选树
     getCheckedTree() {
      if (this.idType != 2) {
        let allTree = JSON.parse(JSON.stringify(this.treeData[0].children));
        let changedTags = JSON.parse(JSON.stringify(this.tagsRegion));
        let organizationArea = operationData.treeHandler(allTree, changedTags);
        debugger
        console.log("多级树：", organizationArea);
        this.organizationRegion = organizationArea;
      }
    },
    //初始化范围树
    setTreeData(administrative) {
      let treeIdList = [];
      let checkList = [];
      for (let i = 0; i < administrative.length; i++) {
        treeIdList.push(administrative[i].id);
        checkList[i] = {};
        checkList[i].name = administrative[i].label;
        checkList[i].key = administrative[i].id;
      }
      debugger
      console.log(treeIdList);
      this.$refs.tree.setCheckedKeys(treeIdList);
      this.tagsRegion = checkList;
    },
    //查询行政范围（树）
    getAdministrative() {
      let req = {
        projectId: 87//826,874,832
      };
      openLoading(vm);
      vm.GET("portal/scope/v1/administrative", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          let administrativeAll = res.data.administrativeAll;
          let administrative = res.data.administrative;
          this.treeData = [];
          
          this.treeData[0] = administrativeAll;
          this.setTreeData(administrative);
          this.getCheckedTree();
        }
      });
    },
    onChecked(node, data) {
     debugger
      vm.checkUpdate(node, data);
      //重构归并树
      let checkedTree = operationData.getSimpleCheckedNodes(
        this.$refs.tree.store
      );
      let halfCheckedTree = this.$refs.tree.getHalfCheckedKeys();
      let allSelectedKeys = operationData.setSelectedKeys(
        checkedTree,
        halfCheckedTree
      );
      //重构内容

      this.allSelectedKeys = allSelectedKeys;
      this.initCheckList(allSelectedKeys);
      //改变行政范围后，更新设定机构和设定人员
      this.updateOrganizationAndPerson(allSelectedKeys);
      this.updatedTree = true;
    },
    //列举选中地区 右侧显示数据
    initCheckList(allSelectedKeys) {
      this.tagsRegion = [];
      debugger
      let nodeData = this.$refs.tree.getCheckedNodes();
      for (let i = 0; i < nodeData.length; i++) {
        for (let j = 0; j < allSelectedKeys.length; j++) {
          if (
            allSelectedKeys[j].type == 1 &&
            nodeData[i].id == allSelectedKeys[j].key
          ) {
            let tagObj = {};
            tagObj.name = nodeData[i].label;
            tagObj.key = nodeData[i].id;
            this.tagsRegion.push(tagObj);
          }
        }
      }
    },
    checkUpdate(node, data) {
      let flag = -1;
      flag = data.checkedKeys.indexOf(node.id);
      if (vm.status4Flag == 1 && flag >= 0) {
        console.log(node, data, flag, vm.status4Flag);
        vm.nowCheck = node;
        vm.warnType = 0;
        vm.dialogWarn = true;
        // this.$refs.tree.setChecked(data,false)
      }
    },

  }
}
</script>
<style >
/*.organization .el-dialog {*/
  /*max-height: 90%;*/
  /*overflow: scroll;*/
/*}*/
</style>
<style lang="scss" scoped>
.organization {
  .add-organization {
    margin-left: 36px;
    line-height: 20px;
    width: 120px;
    cursor: pointer;
    padding-top: 10px;
    i {
      font-size: 18px;
      margin-right: 2px;
    }

  }
}
</style>
