<template>
    <div style="position:relative;width:100%">
        <div style="margin-top: 134px;">
            <div class="flow-start">
                <!--1.开始-->
                <div class="flow-start">
                    <div
                            v-for="(itemStart,startIndex) in list.start"
                            :key="startIndex"
                            class="flow-start">
                        <PtCircle :name="itemStart.name" :value="itemStart.value"/>
                        <PtArrow :width="startIndex === 2?'20px':'10px'"
                                 :noArrow="startIndex === 2?true:false"
                                 :value="startEnd(startIndex,itemStart.value)"
                                 style="margin-top: 30px;"/>
                    </div>
                </div>
                <!--2.分支-->
                <div style="margin-top: -132px">
                    <div
                            v-for="(itemBranch,branchIndex) in list.branch"
                            :key="branchIndex">
                        <!--比较麻烦的在这里 start-->
                        <FlowBranch :list="itemBranch" :index="branchIndex" :endList="list.end" :branch="list.branch"/>
                        <!--比较麻烦的在这里 end-->
                    </div>
                </div>
                <!--3.结束-->
                <div class="flow-start" style="margin-left: 70px;position: relative">
                    <div
                            v-for="(itemEnd,endIndex) in list.end"
                            :key="endIndex"
                            class="flow-start">
                        <!--上面的连接线-->
                        <PtArrow v-if="endIndex === 0" :isRote="true" :value="upLineClassObj()"
                                 width="90px" style="position: absolute;top:-55px;left: -25px"/>
                        <!--下面的连接线-->
                        <PtArrow v-if="endIndex === 0" :isRote1="true" :value="downLineClassObj()"
                                 width="90px" style="position: absolute;top:110px;left: -20px"/>
                        <PtCircle :name="itemEnd.name" :value="itemEnd.value"/>
                        <PtArrow v-if="endIndex !== 3" :value="endArrow(endIndex)" style="margin-top: 30px;"/>
                    </div>
                </div>
            </div>
        </div>
        <Legend style="position:absolute;bottom:0;right:0"/>
    </div>
</template>

<script>
/**
 * 流程结构
 * 1.节点固定
 * 2.蓝色的表示已经流转的节点；红色的表示在流程中，但是没有流转到的节点；灰色的表示没有的节点
 * 3.前端根据value区分：value 为true--蓝色，为false--红色，undefined:灰色
 * 4.key 值唯一，表示一个节点的英文名称
 */
import PtArrow from '../../components/flow/PtArrow'
import PtCircle from '../../components/flow/PtCircle'
import FlowBranch from '../../components/flow/FlowBranch'
import Legend from '../../components/flow/Legend'

export default {
  name: 'Index',
  components: {
    PtArrow,
    PtCircle,
    FlowBranch,
    Legend
  },
  props: {
    // 数据源
    listInfo: null
  },
  data() {
    return {
      list: {
        start: [
          { name: '收样', key: 'receiveSample' },
          { name: '任务评审', key: 'review' },
          { name: '开土', key: 'openSoil' }
        ],
        branch: [
          [
            { name: '物性试验', key: 'wuxing' },
            { name: '完成率', key: 'wuxingEnd', line: true },
            { name: '自校版', key: 'wuxingZiJiaoCheck', type: 'rect' }
          ],
          [
            { name: '力学试验', key: 'lixue' },
            { name: '完成率', key: 'lixueEnd', line: true },
            { name: '自校版', key: 'lixueZiJiaoCheck', type: 'rect' }
          ],
          [
            { name: '高级试验', key: 'gaoji' },
            { name: '完成率', key: 'gaojiEnd', line: true },
            { name: '自校版', key: 'gaojiZiJiaoCheck', type: 'rect' }
          ]
        ],
        end: [
          { name: '报告编制', key: 'reportMake' },
          { name: '报告审核', key: 'reportCheck' },
          { name: '报告批准', key: 'reportIssue' },
          { name: '报告签发', key: 'reportEnd' }
        ]
      },
      // 构造数据源
      obj: [],
      nodeObj: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      if (this.listInfo) {
        this.obj = this.listInfo
      }
      for (let j = 0; j < this.obj.length; j++) {
        Object.assign(this.nodeObj, this.obj[j])
      }
      // 1.后台返回的数据，需要流转的全部节点数据（前后盾自己定义，对应上即可）
      // key:bool (已经流转的节点为true,待流转的节点为false)
      // this.obj = {
      // key1: true,
      // key2: true,
      // key3: true,
      // key4: true,
      // key5: true,
      // key6: undefined,
      // key7: true,
      // key8: true,
      // key9: true,
      // key10: false,
      // key11: false,
      // key12: false,
      // key13: true,
      // key14: false,
      // key15: false,
      // key16: false,
      // key20: '20%'
      // }
      // 2.前端进行过组合数据
      const startArray = this.list.start
      const branchArray = this.list.branch.flat() // 将一个二维数组拉平
      const endArray = this.list.end
      const allArray = startArray.concat(branchArray, endArray)
      for (let i = 0; i < allArray.length; i++) {
        const key = allArray[i].key
        this.$set(allArray[i], 'value', this.nodeObj[key])
        switch (allArray[i].key) {
          case 'wuxingEnd':
            this.$set(allArray[i], 'per', this.nodeObj.wuxingEndRate)
            break
          case 'lixueEnd':
            this.$set(allArray[i], 'per', this.nodeObj.lixueEndRate)
            break
          case 'gaojiEnd':
            this.$set(allArray[i], 'per', this.nodeObj.gaojiEndRate)
            break
          case 'wuxingZiJiaoCheck':
            this.$set(allArray[i], 'num', this.nodeObj.wuxingZiJiao)
            break
          case 'lixueZiJiaoCheck':
            this.$set(allArray[i], 'num', this.nodeObj.lixueZiJiao)
            break
          case 'gaojiZiJiaoCheck':
            this.$set(allArray[i], 'num', this.nodeObj.gaojiZiJiao)
            break
        }
        // if (allArray[i].key === 'wuxingEnd') {
        //   this.$set(allArray[i], 'per', this.nodeObj.wuxingEndRate)
        // } else if (allArray[i].key === 'lixueEnd') {
        //   this.$set(allArray[i], 'per', this.nodeObj.lixueEndRate)
        // } else if (allArray[i].key === 'gaojiEnd') {
        //   this.$set(allArray[i], 'per', this.nodeObj.gaojiEndRate)
        // } else if (allArray[i].key === 'wuxingZiJiao') {
        //   if (this.nodeObj.wuxingZiJiao) {
        //     this.list.branch[0][2].name = this.nodeObj.wuxingZiJiao
        //   } else {
        //     this.list.branch[0][2].name = '自校'
        //   }
        // }
      }
    },
    // 上面连接线颜色
    upLineClassObj() {
      const valueZero = this.list.end[0].value
      // const upValue = this.list.branch[0][2].value
      const upValueZero = this.list.branch[0][0].value
      if (upValueZero === false) {
        return false
      } else {
        return valueZero
      }
    },
    // 下面连接线颜色
    downLineClassObj() {
      const valueZero = this.list.end[0].value // true  报告编制
      // const downValue = this.list.branch[2][2].value // false 高级自校版
      const downValueZero = this.list.branch[2][0].value // false 高级
      if (downValueZero === false) {
        return false
      } else {
        return valueZero
      }
    },
    // 开始模块的最后一个节点颜色(根据branch的第一个节点判断)
    startEnd(index) {
      let itemValue
      const itemList = this.list.start[index + 1]
      if (itemList !== undefined) {
        itemValue = itemList.value
      }
      const branchZero = this.list.branch[0][0].value
      const branchOne = this.list.branch[1][0].value
      const branchTwo = this.list.branch[2][0].value
      if (index === 2) {
        if (branchZero !== false) {
          if (
            (branchZero === undefined) &
            (branchOne === true || branchTwo === true)
          ) {
            return true
          } else {
            return branchZero
          }
        }
        if (branchOne !== false) {
          return branchOne
        }
        if (branchTwo !== false) {
          return branchTwo
        }
      } else {
        return itemValue
      }
    },
    endArrow(index) {
      let itemValue
      const itemList = this.list.end[index + 1]
      if (itemList !== undefined) {
        itemValue = itemList.value
      }
      return itemValue
    }
  }
}
</script>

<style>
.flow-start {
  display: flex;
  flex-direction: row;
  justify-items: center;
}
</style>
