<template>

<div>
      <div slot="header" style="margin-bottom:7px;">
        <!-- <Icon type="paper-airplane" size="20"></Icon> -->
        <span class="send-mail-title">{{ initParam.title }}</span>
      </div>
      <div class="modal-group">
        <el-tree :data="baseData" :props="defaultProps" accordion lazy :load="loadNode" @node-expand="nodeExpand" @node-collapse="nodeCollapse" @node-click="nodeCallback"></el-tree>
      </div>
      <div class="modal-group-person">

        <div class="group-person-item" v-for="(item,index) in userList" :key="index" :class="item.isCheck?'active':''" @click="selectUser(item)">{{item.userName}}</div>
        <div class="transfer-panel-empty">无数据</div>
      </div>
      <div class="modal-group-button">
        <div class="modal-center ivu-transfer-operation">
          <Button type="ghost" size="small" @click.native="plusUser">
            <Icon type="chevron-right"></Icon>
          </Button>
          <Button type="ghost" size="small" @click.native="minusUser">
            <Icon type="chevron-left"></Icon>
          </Button>
        </div>
      </div>
      <div class="modal-group-select">

        <div class="group-person-select" v-for="(item,index) in selectList" :key="index" :class="item.isCheck?'active':''" @click="deleteSelected(item)">{{item.value.userName}}</div>
        <div class="transfer-panel-empty">无数据</div>
      </div>
      <div class="run-modal-ftbButton" slot="footer" style="text-align:right;margin-top:20px;">
        <Button type="ghost" @click.native="onCancel">{{ initParam.cancleBtn }}</Button>
        <Button type="primary" @click.native="onOk">{{ initParam.okBtn }}</Button>
      </div>
</div>
</template>
<script>
export default {
  props: {
    initParam: {
      type: Object,
      default() {
        return {
          title: "导入用户",
          cancleBtn: "取消导入",
          okBtn: "确认导入"
        };
      }
    }
  },
  data() {
    return {
      baseData: [],
      currnodeId: "CR000",
      defaultProps: {
        children: "children",
        label: "name",
        depId: "CR000"
      },
      userListStore: {},
      userList: [],
      selectList: []
    };
  },
  created: function() {},
  methods: {
    // 异步加载数据方法
    loadNode(node, resolve) {
      // console.log(node);
      if (node.data.depId) {
        this.currnodeId = node.data.depId;
        if (
          this.userListStore[this.currnodeId] &&
          this.userListStore[this.currnodeId].length > 0
        ) {
          this.userList = this.userListStore[this.currnodeId];
          return;
        }
        $store
          .dispatch("GetGroup", { orgId: this.currnodeId })
          .then(response => {
            if(!response) return;
            if(response.statusCode != '0'){
              this.$Message.warning({
                content: response.dataResult.msg,
                duration: 3
              })
              return ;
            }
            var nextNodes = [];
            if (response.depList.length > 0) {
              for (let i = 0; i < response.depList.length; i++) {
                let depItem = response.depList[i];
                nextNodes.push({
                  name: depItem.orgName,
                  depId: depItem.orgId,
                  children: []
                });
                resolve(nextNodes);
              }
            } else {
              resolve(nextNodes);
            }
            this.userListStore[this.currnodeId] = response.empList;
            this.userList = this.userListStore[this.currnodeId];
            this.$forceUpdate();
          });
      } else {
        $store
          .dispatch("GetGroup", { orgId: this.currnodeId })
          .then(response => {
            if(!response) return;
            if(response.statusCode != '0'){
              this.$Message.warning({
                content: response.dataResult.msg,
                duration: 3
              })
              return ;
            }
            for (let i = 0; i < response.depList.length; i++) {
              let item = response.depList[i];
              this.baseData.push({
                name: item.orgName,
                depId: item.orgId,
                children: []
              });
            }
            this.userListStore[this.currnodeId] = response.empList;
            for (
              let i = 0;
              i < this.userListStore[this.currnodeId].length;
              i++
            ) {
              let item = this.userListStore[this.currnodeId];
              item.isCheck = false;
            }
            this.$forceUpdate();
          });
      }
    },
    nodeCallback(data) {
      // console.log(data);
    },
    nodeCollapse(data, node) {
      this.userList = [];
    },
    nodeExpand(data, node) {
      // console.log(data);
      // console.log(node);
      this.userList = this.userListStore[data.depId];
      this.$forceUpdate();
    },
    // 选择人员方法
    selectUser(item) {
      item.isCheck = !item.isCheck;
      this.$forceUpdate();
    },
    // 删除选中的人员
    deleteSelected(item) {
      item.isCheck = !item.isCheck;
      this.$forceUpdate();
      console.log(item);
    },
    // 选中添加处理
    plusUser() {
      if (this.selectList <= 0) {
        for (let i = 0; i < this.userListStore[this.currnodeId].length; i++) {
          let noItem = this.userListStore[this.currnodeId][i];
          if (noItem.isCheck) {
            this.selectList.push({
              key: this.currnodeId,
              value: noItem,
              isCheck: false
            });
          }
        }
      } else {
        for (let i = 0; i < this.userListStore[this.currnodeId].length; i++) {
          var hasItem = this.userListStore[this.currnodeId][i];
          if (hasItem.isCheck) {
            let Index = "";
            Index = this.selectList.findIndex((item, index, arr) => {
              return hasItem.userId == item.value.userId;
            });
            console.log(Index);
            if (Index < 0) {
              this.selectList.push({
                key: this.currnodeId,
                value: hasItem,
                isCheck: false
              });
            }
            Index = "";
          }
        }
      }
      this.$forceUpdate();
    },
    // 去掉选中处理
    minusUser() {
      var indexArr = [];
      for (let i = 0; i < this.selectList.length; i++) {
        let selItem = this.selectList[i];
        if (selItem.isCheck) {
          indexArr.push(i);
          let userIndex = "";
          userIndex = this.userListStore[
            selItem.key
          ].findIndex((value, index, arr) => {
            return value.userId == selItem.value.userId;
          });

          if (userIndex >= 0) {
            this.userListStore[selItem.key][userIndex].isCheck = false;
          }
          userIndex = "";
        }
      }
      for (let k = 0; k < indexArr.length; k++) {
        let i = this.selectList.findIndex(row => {
          return row.isCheck == true;
        });
        this.selectList.splice(i, 1);
      }
      this.$forceUpdate();
    },
    onOk(){
        this.$emit('ok', this.selectList)
    },
    onCancel(){
         this.$emit("oncancle","");
    },

  }
};
</script>


