<template>
  <div class="PbsTreeManagement">
    <el-tabs v-model="activeName">
      <el-tab-pane label="设计" name="design">
        <div class="designSearch">
          <div class="designItem">
            <el-select size="mini" v-model="searchType" @change="searchTypeChange">
              <el-option label="工程名称" value="2"></el-option>
              <el-option label="PBS编码" value="0"></el-option>
              <el-option label="部件标识码" value="1"></el-option>
            </el-select>
          </div>
          <div class="designItem">
            <el-input size="mini" v-model="searchInput" clearable @clear="clearInput"> </el-input>
          </div>
          <div class="designItem">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchOperation"></el-button>
          </div>
        </div>
        <div class="designTree">
          <el-tree
            :data="treeData"
            :props="props"
            :load="loadNode"
            lazy
            node-key="id"
            highlight-current
            :default-expanded-keys="[1]"
            :render-content="renderContent"
            @node-click="handleNodeClick"
            @node-contextmenu="exportQRCode"
          ></el-tree>
          <div class="tip" :style="{ left: optionCardX + 'px', top: optionCardY + 'px' }" v-show="tipShow">
            <el-button type="primary" size="mini" @click="exportCurrent">导出二维码</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="竣工" name="completed">暂无</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { pbsTreeList_api, pbsTreeSearch_api, pbsTreeMinimum_api, createPdfByType_api } from '@/api/APIs'
import Vue from 'vue'
import PipeUnitInfo from '@/views/widgets/PipeUnitInfo/index.vue'
export default {
  name: 'PbsTreeManagement',
  data() {
    return {
      activeName: 'design',
      searchType: '2', //默认为工程名称
      searchInput: '',
      choke: false, //节流
      //设计模块的数据
      originalData: '', //设计模块请求来的原始数据，用于项目名称搜索功能
      fatherNodesData: [], //第一次请求来处理后的父节点数据
      treeData: [],
      tipShow: false,
      optionCardX: '',
      optionCardY: '',
      treeNodeId: '',
      //设计模块的elm绑定属性
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      viewer: window.viewer,
      pipeInfo: null
    }
  },
  computed: {
    prjId() {
      return this.$store.getters['project/id'].projectId
    }
  },
  methods: {
    //懒加载树状下层
    async loadNode(node, resolve) {
      if (node.level == 0) {
        return this.loadtreeData(resolve)
      }
      if (node.level >= 1 && node.data) {
        if (node.data.levelname == '部件类型') {
          let id = node.data.id
          let res = await this.minimumNodesResult(id)
          if (res) {
            return resolve(res)
          }
        } else {
          return resolve(node.data.children)
        }
      }
    },
    // 获取树状结构列表
    async loadtreeData(resolve) {
      let res = await pbsTreeList_api({ prjId: this.prjId })
      let { result } = res
      this.fatherNodesData = this.getPbsTree(result)
      resolve(this.fatherNodesData)
      this.originalData = result
    },
    //结构树最小单元
    async minimumNodesResult(id) {
      let minimumTree = await this.getTreeMinimum(id)
      return minimumTree
    },
    //获取树状结构列表的最小单元
    async getTreeMinimum(val) {
      let res = await pbsTreeMinimum_api({ prjId: this.prjId, id: val })
      let { result } = res
      result.forEach((item) => {
        item.value = item.code
        item.name = `${item.code}(${item.pipeId})`
        item.leaf = true
      })
      return result
    },
    //对后台返回的列表结构处理分类成PBS分支树所需的树状数据
    getPbsTree(results) {
      let that = this
      let dep = 0
      let curPid = []
      function arr2tree(data, parent) {
        let tree = [] // 定义最终输出
        let temp = [] // 定义中间存储用变量
        const usedParent = that.$_.find(curPid, function (item) {
          return item.pid === parent
        })
        if (!usedParent) {
          dep += 1
          curPid.push({ pid: parent, dep: dep })
        }
        for (let i = 0; i < data.length; i++) {
          if (data[i].pid == parent) {
            // 找到父级
            let obj = data[i] // 保存父级
            obj.originname = obj.name
            obj.name = `${obj.name}_${obj.code}`
            obj.leaf = false //用于elementUI的渲染
            obj.prjId = obj.prjid
            obj.prjName = obj.prjname
            const curparent = that.$_.find(curPid, function (item) {
              return item.pid === parent
            })
            let open = true
            if (curparent) {
              dep = curparent.dep
              if (curparent.dep >= 2) open = false
            }
            if (obj.levelname !== '部件类型') {
              temp = arr2tree(data, data[i].id) // 递归调用
            }
            if (temp.length > 0) {
              // 如果找到了
              obj.children = temp // 父级的子集就等于刚才递归的结果
              obj.open = open
            } else {
              obj.children = [] // 没有子集就把这个父级的children字段改成null 防止出现收起展开的图标
            }
            tree.push(obj) // 把父级和子集放到最终输出
          }
        }
        return tree
      }
      let treeData = arr2tree(results[0].structures, null)
      return treeData
    },
    renderContent(h, { node, data, store }) {
      if (data.pressureType == '1') {
        return <span style="font-size:14px;">{node.label}</span>
      } else if (data.pressureType == '2') {
        return <span style="color:#0076FF;font-size:14px;">{node.label}</span>
      } else if (data.pressureType == '3') {
        return <span style="color:#009100;font-size:14px;">{node.label}</span>
      } else {
        return <span style="font-size:14px;">{node.label}</span>
      }
    },
    // 树结构子项点击调用
    handleNodeClick(data) {
      this.tipShow = false
      if (!this.viewer) return
      if (data !== null && data.layerName) {
        let lyName = '',
          code = data.value
        if (data.layerName.indexOf(',') > -1) {
          lyName = data.layerName.split(',')[1]
        } else {
          lyName = data.layerName
        }
        const pipeInfoConstructor = Vue.extend(PipeUnitInfo)
        // if(!this.pipeInfo){
        const pipeInfo = new pipeInfoConstructor({
          data: {
            pickType: 'point',
            isInteractive: false,
            locateUnit: {
              name: lyName,
              id: code
            }
          },
          store: this.$store
        }).$mount()
        // }else{
        //   this.pipeInfo.$set(this.pipeInfo.locateUnit,"name",lyName)
        //   this.pipeInfo.$set(this.pipeInfo.locateUnit,"id",code)
        // }
      }
    },
    //右键点击显示导出按钮
    exportQRCode(e, data) {
      this.treeNodeId = ''
      if (data !== null && data.levelname === '部件类型') {
        this.tipShow = false
        this.optionCardX = e.x
        this.optionCardY = e.y
        this.treeNodeId = data.id
        this.tipShow = true
      } else {
        this.tipShow = false
      }
    },
    //点击导出二维码
    async exportCurrent() {
      const downloadUrl = '/tofly-sxgk/commonFile/download'
      const data = { stdId: this.treeNodeId }
      let res = await createPdfByType_api(data)
      const { code, result } = res
      if (code === 1) {
        const pdf = this.$store.state.apiRoot + downloadUrl + '?fileName=' + result
        window.open(pdf)
        this.tipShow = false
      } else {
        this.$message.error('获取二维码信息失败')
      }
    },
    //设计模块的搜索
    searchOperation() {
      if (this.choke) return
      this.choke = true
      const code = this.searchInput.toString().trim()
      if (code === '') {
        this.$notify.error({
          title: '提示',
          message: '请输入查询内容',
          duration: 2500
        })
        return
      }
      const searchType = this.searchType.toString()
      switch (searchType) {
        case '0':
          this.searchOnline(code)
          break
        case '1':
          this.searchOnline(code)
          break
        case '2':
          this.searchLocal(code, true)
          break
      }
      setTimeout(() => {
        this.choke = false
      }, 4000)
    },
    //在线搜索，除工程名称外的2个选项使用
    searchOnline(value) {
      if (!value) return
      const size = 50 //每次最大搜索条数
      this.searchPBS(value, size)
    },
    //搜索功能
    async searchPBS(value, size) {
      let res = await pbsTreeSearch_api({
        prjId: this.prjId,
        pbs: value,
        pageSize: size
      })
      let { result, code } = res
      if (code === 1 && result) {
        if (result.length >= size) {
          this.$notify({
            title: '提示',
            message: `查询结果过多！当前显示匹配的${size}条结果`,
            type: 'warning',
            duration: 2000
          })
        }
        // 对搜索结果进行处理，让elementUI可以渲染
        const nodes = result.map((item) => {
          item.value = item.code
          item.name = `${item.code}(${item.pipeId})`
          item.leaf = true
          return item
        })
        this.treeData = nodes
      }
    },
    /**
     * 工程名称选项本地搜索
     * code 模糊查询字符串
     * vague 是否模糊查询
     */
    searchLocal(code, vague) {
      let nodes = []
      let allNodes = this.originalData[0].structures //服务器原始数据目录
      let filterNodes = []
      if (vague) {
        //查找包含字符
        for (let i of allNodes) {
          if (i.originname) {
            if (i.originname.indexOf(code) != -1) {
              filterNodes.push(i)
            }
          }
        }
        //判断父子节点
        for (let i = 0; i < filterNodes.length; i++) {
          const item = filterNodes[i]
          const parentNode = _.find(filterNodes, (node) => {
            return node.id === item.pid
          })
          if (!parentNode) {
            nodes.push(item)
          }
        }
      }
      //显示查找结果
      this.treeData = nodes
    },
    //搜索类型改变时清空输入
    searchTypeChange() {
      this.searchInput = ''
    },
    //清除搜索结果
    clearInput() {
      this.treeData = this.fatherNodesData
    }
  }
}
</script>

<style lang="scss" scoped>
.PbsTreeManagement {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  .designSearch {
    display: flex;
    .designItem {
      margin: 0 5px;
    }
  }
  .designTree {
    height: 700px;
    overflow-y: auto;
    margin-top: 10px;
    position: relative;
    .tip {
      position: fixed;
      z-index: 999;
      width: 50px;
    }
  }
  ::v-deep.el-tree-node > .el-tree-node__children {
    overflow: unset;
    background-color: transparent;
  }
}
</style>