<template>
  <!-- import { setTimeout } from 'timers'; -->
  <div class="vdr_warehouse">
    <vue-draggable-resizable
      class="vdrwarehouse"
      style="z-index: 5;"
      :w="292"
      :h="500"
      :minw="200"
      :minh="250"
      :active="true"
      :drag-cancel="'.cancel'"
      :handles="['br']"
      @deactivated="onDeactivated"
      :parent="true"
      :resizable="false"
      :x="323"
      :y="35"
    >
      <div class="div_tree">
        <div class="tree_top">
          <span>构件库</span>
          <img class="top_img" @click="hide" src="@/assets/shanchu.png">
        </div>
        <div class="cancel">
          <el-input
            class="tree_input"
            placeholder="输入关键字查询"
            v-model="filterText"
            suffix-icon="el-icon-search"
            clearable
          ></el-input>
        </div>
        <div
          style="height:380px;"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-scrollbar style="height:100%;">
            <div class="filter-tree">
              <el-tree
                empty-text="请勾选结构树视图模型并点击你要查看的模型"
                show-checkbox
                :load="loadNode"
                lazy
                @check="checkSelect"
                :data="fileList"
                node-key="index"
                :props="defaultProps"
                :filter-node-method="filterNode"
                ref="tree2"
              >
                <span slot-scope="{ node, data }">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="node.label ? node.label + '(' + data.eCount + ')' : data.id.split('.')[1]"
                    placement="top"
                    :enterable="false"
                    :disabled="node.label ? (node.label + '(' + data.eCount + ')').length <= 23 : true"
                  >
                    <span
                      class="tree-node__label" style="float: left;width: 180px;"
                    >{{ node.label ? node.label + '(' + data.eCount + ')' : data.id.split('.')[1] }}</span>
                  </el-tooltip>
                </span>
              </el-tree>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
export default {
  name: 'warehouse',
  data() {
    return {
      loading: false,
      children: null,
      viewId: '',
      nodeName: '',
      filterText: '',
      fileList: [],
      defaultProps: {
        children: 'children',
        label: 'showName',
        isLeaf: 'leaf'
      },
      modelViewUidList: []
    };
  },
  methods: {
    onDeactivated() { },
    filterNode(value, data) {
      // 输入框过滤搜索
      if (!value) { return true; }
      if (data.showName || data.id) {
        return data.showName ? data.showName.indexOf(value) !== -1
          : data.id.split('.')[1].indexOf(value) !== -1;
      }
    },
    checkSelect(data, nodes) {
      // 复选框勾选事件
      if (nodes.checkedNodes.length > 0) {
        const modeluidList = [];
        nodes.checkedNodes.forEach(item => {
          if (item && item.uId) {
            modeluidList.push(item.uId);
          }
        });
        if (modeluidList && modeluidList.length > 0) {
          this.$store.commit('SET_MODEL_LIST_VIEW', modeluidList.join(','));
        }
      } else {
        this.$store.commit('SET_MODEL_LIST_VIEW', '');
      }
    },
    loadNode(node, resolve) {
      // 点击加载请求接口
      const projectNoType = this.$store.state.tree.projectNoType
        ? this.$store.state.tree.projectNoType
        : '';
      console.log('=======uuuu', sessionStorage.getItem('modelNo'));
      const modelNo = sessionStorage.getItem('modelNo')
        ? JSON.parse(sessionStorage.getItem('modelNo'))
        : {};
      const param = {
        viewId: node.data.viewId,
        nodeType: 'F',
        projectNo: modelNo.projectNo,
        stagingNo: modelNo.stagingNo,
        parent: node.data.nodeName,
      };
      const params = {
        viewId: node.data.viewId,
        nodeType: 'T',
        projectNo: modelNo.projectNo,
        stagingNo: modelNo.stagingNo,
        parent: node.data.nodeName,
        grandParent: (node.parent && node.parent.label) ? node.parent.label : ''
      };
      const parames = {
        viewId: node.data.viewId,
        eId: node.data.id,
        projectNo: modelNo.projectNo,
        stagingNo: modelNo.stagingNo,
        treeType: projectNoType
      };
      if (node.level === 1) {
        this.$axios('/artifacts/queryArtifactsTree', param, 'POST')
          .then(data => {
            if (data.data.value && data.data.value.length > 0) {
              node.data.children = data.data.value;
              setTimeout(() => {
                return resolve(node.data.children);
              }, 500);
            } else {
              return resolve([]);
            }
          })
          .catch(resultMsg => {
            // console.log('error ==', resultMsg);
          });
      }
      if (node.level === 2) {
        this.$axios('/artifacts/queryArtifactsTree', params, 'POST')
          .then(data => {
            if (data.data.value && data.data.value.length > 0) {
              node.data.children = data.data.value;
              setTimeout(() => {
                return resolve(node.data.children);
              }, 500);
            } else {
              return resolve([]);
            }
          })
          .catch(resultMsg => {
            // console.log('get tree error', resultMsg);
          });
      }
      // console.log('===============parames', parames);
      if (node.level === 3) {
        this.$axios('/artifacts/queryArtifactsEinstance', parames, 'POST')
          .then(data => {
            if (data.data.value && data.data.value.length > 0) {
              node.data.children = data.data.value;
              if (node.data.children) {
                node.data.children.forEach(element => {
                  element.leaf = true;
                });
                // console.log('=====node.data.children', node.data.children);
                setTimeout(() => {
                  return resolve(node.data.children);
                }, 500);
              }
            } else {
              return resolve([]);
            }
          })
          .catch(resultMsg => {
            // console.log('get tree error', resultMsg);
          });
      }
      if (node.level === 4) {
        return resolve([]);
      }
    },
    search() {
      // 列表查询接口
      this.loading = true;
      const modelNo = sessionStorage.getItem('modelNo')
        ? JSON.parse(sessionStorage.getItem('modelNo'))
        : {projectNo: '', stagingNo: ''};
      const viewId = sessionStorage.getItem('tree-viewId')
        ? JSON.parse(sessionStorage.getItem('tree-viewId'))
        : '';
      console.log(viewId, 22222222222222222222222);
      this.$axios(
        '/artifacts/queryArtifactsTree',
        {
          viewId: viewId,
          nodeType: 'C',
          projectNo: modelNo.projectNo,
          stagingNo: modelNo.stagingNo,
          parent: null,
          grandParent: ''
        },
        'POST'
      )
        .then(data => {
          this.loading = false;
          // console.log(111111111111111111111111111111, this.fileList);
          if (data.data.code === 200) {
            this.fileList = data.data.value || [];
            setTimeout(() => {
              this.setChecked();
            }, 300);
          }
        })
        .catch(resultMsg => {
          this.fileList = [];
          this.loading = false;
          // console.log(resultMsg);
        });
    },
    setChecked() {
      // 复选框全部打钩
      this.$refs.tree2.setCheckedNodes(this.fileList);
    },
    hide() {
      // 关闭
      this.$emit('warehouseSwitch', false);
      this.$eventHub.$emit('bus-warehouseSwitch', false);
    },
    getStatus(val) {
      if (val === true) {
        this.search();
      } else if (val === false) {
        this.fileList = [];
      }
    }
  },
  computed: {
    // getModelViewId() {
    //   // 取视图ID
    //   return {
    //     viewId: $store.state.tree.viewId
    //   };
    // }
  },
  watch: {
    filterText(val) {
      // 监听输入框字段
      if (val && val.length > 0) {
        this.$refs.tree2.filter(val);
      } else {
        this.search();
      }
    },
    // getModelViewId(data) {
    //   // console.log('========date==view', data);
    //   this.viewId = data.viewId ? data.viewId : '';
    //   this.search(this.viewId);
    // }
  },
  created: function() {
    this.$eventHub.$on('bus-warehouseModel', this.getStatus);
  },
  beforeMount: function() { },
  mounted: function() {
    console.log(111111111111111111111111111111111111111111111);
    this.search();
  },
  beforeDestroy: function() { },
  destroyed: function() { },
  directives: {}
};
</script>
