<template>
  <div v-show="visibleTree" class="container">
    <work-tree :list="list"></work-tree>
    <div class="direction">
      <div style="display:flex;">
        <div class="part-background sphere"></div>&nbsp;
        <div>设备部位</div>
      </div>
      <div style="display:flex;">
        <div class="spare-background sphere"></div>&nbsp;
        <div>设备备件</div>
      </div>
      <div style="display:flex;">
        <div class="child-background sphere"></div>&nbsp;
        <div>子设备</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSbTreeInfo } from '@/api/sb/modelbom'

import WorkTree from '@/components/WorkTree/WorkTree.vue'
export default {
  name: 'SbTreeModel',
  components: {
    WorkTree
  },
  data () {
    return {
      visibleTree: true,
      list:
        {

        }
    }
  },
  created () {
    this.base()
  },
  methods: {
    base () {
      getSbTreeInfo(this.$route.query.id).then(res => {
        console.log(res)
        const list = this.formatTreeData(res.data)
        this.list = list
        console.log(list)
      })
    },
    formatTreeData (data, type = 3) {
      const tree = {
        name: data.name,
        id: data.id,
        type: type,
        status: data.status,
        model: data.model,
        spareNum: data.sbModelSpareBomVOList.length,
        children: []
      }
      if (data.partInfoList.length > 0) {
        data.partInfoList.forEach(item => {
          const children = []
          if (item.sparePartInfoVOList.length > 0) {
            item.sparePartInfoVOList.forEach(item1 => {
              children.push({
                name: item1.spareName,
                type: 2,
                changeDate: item1.changeDate,
                realChangeDate: item1.realChangeDate,
                id: item1.id
              })
            })
          }
          tree.children.push({
            name: item.name,
            type: 1,
            id: item.id,
            spareNum: item.sparePartInfoVOList.length,
            children: children
          })
        })
      }
      if (data.sbModelSpareBomVOList.length > 0) {
        data.sbModelSpareBomVOList.forEach(item => {
          tree.children.push({
            name: item.spareName,
            id: item.id,
            type: 2,
            changeDate: item.changeDate,
            realChangeDate: item.realChangeDate
          })
        })
      }
      if (data.subSbTreeVOList.length > 0) {
        data.subSbTreeVOList.forEach(item => {
          tree.children.push(this.formatTreeData(item, 4))
        })
      }
      return tree
    },
    handleBack () {
      this.visibleTree = false

      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>

.container{
  position: relative;
  width: 100%;
}
.direction{
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  top:20px;
  right: 40px;
  width: 100px;
  height: 150px;
}
.sphere{
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.sb-background {
  background: linear-gradient(89.96deg, #fa6f32 0.05%, #fb9337 79.83%);
}
.child-background {
  background: linear-gradient(89.96deg, #ec0808 0.05%, #ec6409 79.83%);
}
.part-background {
  background: linear-gradient(90.04deg, #268bfb -16.37%, #33e1ae 137.34%);
}
.spare-background {
  background: linear-gradient(90.04deg, #5c1ac7 -16.37%, #d11764 137.34%);
}
</style>
