<template>
    <div class="flow-start" style="position: relative">
        <div v-if="index === 0" :class="classObj(1)" class="flow-start-border"></div>
        <div v-if="index === 1" :class="classObj(3)" class="flow-start-border"></div>
        <div v-for="(item,itemIndex) in list" :key="itemIndex" style="position: relative;margin-bottom: 70px">
            <div v-if="item.type !== 'rect'" class="flow-start">
                <PtArrow :value="item.value" style="margin-top: 32px;"/>
                <PtCircle :name="item.name" :per="item.per?item.per:''" :value="item.value"/>
            </div>
            <div v-if="item.type === 'rect'" class="flow-start" style="position: absolute;right: -10px;bottom:-60px">
                <PtArrow :isRote="true" :value="item.value"/>
                <PtRect :name="item.name" :num="item.num?item.num:''" :value="item.value" style="margin-top: 60px;"/>
            </div>
            <!--最后的连接线-->
            <div style="position: absolute;left: 81px;top: 30px">
                <PtArrow v-if="item.line" :width="index === 1?'60px':'100px'"
                         :noArrow="index !== 1?true:false"
                         :value="endValue()"/>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * 分支组合
 */
import PtArrow from './PtArrow.vue'
import PtRect from './PtRect.vue'
import PtCircle from './PtCircle.vue'

export default {
  name: 'FlowBranch',
  components: {
    PtArrow,
    PtRect,
    PtCircle
  },
  props: {
    // 数据源
    list: null,
    // 第几个分支
    index: null,
    // 最后一部分
    endList: null,
    // 分支总数据
    branch: null
  },
  methods: {
    // 左侧的边线
    classObj(msg) {
      // const list_0_value = this.branch[0][0].value
      const listZeroValue = this.branch[0][0].value
      // const list_2_value = this.branch[2][0].value
      const listTwoValue = this.branch[2][0].value
      if (msg === 1) {
        // switch (list_0_value) {
        switch (listZeroValue) {
          case true:
            return 'blue-flow-start-border'
          case false:
            return 'red-flow-start-border'
        }
      }
      if (msg === 3) {
        switch (listTwoValue) {
          case true:
            return 'blue-flow-start-border'
          case false:
            return 'red-flow-start-border'
        }
      }
    },
    // 右侧的连接线
    endValue() {
      // 最后一个节点数据
      // const current_value = this.list[2].value
      const currentValue = this.list[2].value
      const endValue = this.endList[0].value
      // const list_0_value = this.list[0].value
      const listZeroValue = this.list[0].value
      // if (current_value) {
      if (currentValue === false) {
        return false
      } else if (currentValue) {
        return endValue
      } else {
        // undefined,说明要接着向下走
        // eslint-disable-next-line no-lonely-if
        if (listZeroValue === true && endValue) {
          return true
        } else if (listZeroValue === false) {
          return false
        }
      }
    }
  }
}
</script>

<style scoped>
.flow-start-border {
  width: 2px;
  height: 133px;
  /*background: #666;*/
  background: #eb6877;
  position: absolute;
  top: 30px;
}

.blue-flow-start-border {
  background: #00a0e9;
}

.red-flow-start-border {
  /*background: #eb6877;*/
  background: #666;
}
</style>
