<!--
 * @Descripttion : 当前组件信息
 * @Author       : 无尘
 * @Date         : 2020-02-27 13:53:03
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-02-28 11:26:52
 * @FilePath     : \Hapi-demoj:\公司\haoban-3\src\components\company\contact-tree-filter.vue
 -->

<!--
  设置成员所在部门（回收站）
  <contact-tree-filter :searchSelect="" @resetCheckData="resetCheckData"></contact-tree-filter>
  import contactTreeFilter from '@/components/company/contact-tree-filter.vue';
  -->
<template>
  <el-tree :filter-node-method="filterNode" :data="groupData" :load="loadNode" node-key="departmentId" ref="groupTree" lazy default-expand-all :props="defaultProps" :expand-on-click-node="false" @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span :class="['font-14 p-r-10 iconfont', data.isStore == 1 ? 'icondianpu-kuai' : 'iconqiye-tianchong', data.bindFlag == 1 ? 'color-2f54eb' : 'color-dedfe6']"></span><span class="font-14 color-606266">{{ node.label }}</span>
    </span>
  </el-tree>
</template>
<script>
/* eslint-disable */
import { _debounce } from '@/common/js/public';
import { getRequest, postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
export default {
  props: {
    searchSelect: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      groupData: [],
      groupDataCopy: [],
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      }
    };
  },
  computed: {},
  watch: {
    searchSelect(val) {
      this.$refs.groupTree.filter(val);
    }
  },
  methods: {
    /**
     * 加载更多
     */
    async loadNode(node, resolve) {
      // console.log(node, resolve);
      const that = this;
      if (node.level === 0) {
        return resolve(that.getGroup());
      } else {
        await that.getGroup(node, node.data, resolve);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    clearSearch() {
      const that = this;
      that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
    },
    /**
     * 点击 tree 数据
     */
    handleNodeClick(data) {
      const that = this;
      console.log(data);
      that.$emit('resetCheckData', data);
    },
    /**
     * 获取tree 数据
     */
    /**
     * 获取门店分组
     */
    getGroup(node, data, resolve) {
      let that = this;
      let para = {
        parentId: data ? data.departmentId : '',
        isStore: 0
      };
      getRequest('/haoban-manage3-web/department-list-level', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.expand = false;
                ele.children = [];
                ele.label = ele.departmentName;
              });
            }
            if (node) {
              resolve(resData.result);
              if (!data.children) {
                that.$set(data, 'children', []);
              }
              data.children = resData.result || [];
              that.$forceUpdate();
              return false;
            }
            that.groupData = resData.result || [];
            // 存一份数据自己搜索
            that.groupDataCopy = JSON.parse(JSON.stringify(that.groupData));
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  components: {},
  mounted() {
    // const that = this;
    // that.getGroup();
  }
};
</script>
<style scoped>
.m-t-5 {
  margin-top: 5px;
}

.dialog-top {
  margin-bottom: 20px;
}

.dialog-top img {
  width: 40px;
  height: 40px;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}

.dialog-top span {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.select-info {
  display: inline-block;
  vertical-align: middle;
}

.dialog-operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination-content {
  text-align: right;
}

.dialog-form {
  width: 430px;
  padding-top: 20px;
}

.w-215 {
  width: 215px;
}

.w-115 {
  width: 115px;
}

.select-tree-wrap {
  height: 445px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
}
</style>
