<template>
  <div class="step-body">
    <div class="step-item-wrapper" :style="[rowStyles]" ref="wrapper">
      <div class="step-flow-wrapper">
        <template v-for="(item, index) in formattedList">
          <div
            v-if="index < formattedList.length - 1"
            :class="['step-line', showLine && 'hline']"
            :key="'line' + index"
            :style="Object.assign(item.lineStyles, linePos[index])"
          ></div>
        </template>
      </div>
      <div
        v-for="(item, index) in formattedList"
        :key="'desc' + index"
        class="step-item"
        :ref="'item' + index"
        :style="[item.columnStyles]"
      >
        <div :class="['step-point']" :style="[item.pointStyles]" :ref="'point' + index"></div>
        <text :class="['step-desc']" :style="[item.descStyles]">{{ item.desc }}</text>
      </div>
    </div>
  </div>
</template>

<script>
const domModule = weex.requireModule('dom')
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    stylesConfig: {
      type: Object,
      default: function() {
        return {}
      }
    },
    showLine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      componentWidth: 750,
      activeIndex: -1,
      linePos: []
    }
  },
  watch: {
    list(newVal) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.init()
        }, 100)
      })
    }
  },
  computed: {
    formattedList() {
      let formattedList = this.formatList(this.list)
      return formattedList
    },
    rowStyles() {
      const { rowStyles = {} } = this.stylesConfig

      //处理行
      return { ...rowStyles }
    }
  },
  methods: {
    init() {
      this.list.forEach(item => {
        this.linePos.push({ width: 0 })
      })
      // 确定第一条线的左边距离
      if (this.linePos.length > 0) {
        domModule.getComponentRect(this.$refs['item0'][0], data => {
          this.linePos[0]['margin-left'] = data.size.width / 2 + 8 + 'px'
        })
      }
      this.list.forEach((item, index, arr) => {
        // 确定条线的宽度
        domModule.getComponentRect(this.$refs['point' + index][0], data => {
          if (index == 0) {
            this.linePos[index]['data-right'] = data.size.right
          } else {
            this.linePos[index]['data-right'] = data.size.right
            this.linePos[index - 1]['width'] = data.size.left - this.linePos[index - 1]['data-right'] + 'px'
          }
        })
      })
    },
    formatList(list) {
      let tempList = JSON.parse(JSON.stringify(list))
      const {
        activedColor = '#00de51',
        pointStyles = {},
        lineStyles = {},
        descStyles = {},
        columnStyles = {}
      } = this.stylesConfig

      tempList.forEach((item, index) => {
        if (item.isActived) this.activeIndex = index
      })

      let result = []
      result = tempList.map((item, index) => {
        //处理列
        item['columnStyles'] = { ...item['columnStyles'], ...columnStyles }

        //处理节点point
        item['pointStyles'] = { ...item['pointStyles'], ...pointStyles }

        if (index <= this.activeIndex) {
          item['pointStyles']['background-color'] = activedColor
          item['pointStyles']['opacity'] = 1
        }

        //处理节点线条
        item['lineStyles'] = { ...item['lineStyles'], ...lineStyles }
        if (index < this.activeIndex) {
          item['lineStyles']['border-top-color'] = activedColor
          item['lineStyles']['opacity'] = 1
        }

        //处理内容
        item['descStyles'] = { ...item['descStyles'], ...descStyles }
        if (item.isActived && activedColor) {
          item['descStyles']['color'] = activedColor
          item['descStyles']['opacity'] = 1
        }

        return item
      })

      return result
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.init()
      }, 100)
    })
  }
}
</script>

<style scoped>
.step-body {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
}
.step-flow-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.step-line {
  width: 0px;
  height: 2px;
  border-top-color: #e5e5e8;
  border-top-width: 2px;
  border-top-style: solid;
  margin-left: 8px;
  margin-right: 8px;
}

.hline {
  border-top-width: 4px;
}
.step-item-wrapper {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.step-item {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  padding-left: 8px;
  padding-right: 8px;
}
.step-point {
  width: 16px;
  height: 16px;
  background-color: #c7c7cc;
  border-radius: 32px;
}
.step-desc {
  padding-top: 20px;
  font-family: PingFangSC-Regular;
  font-size: 26px;
  color: #8E969B;
  text-align: center;
}
.active-step {
  color: #1E2E37;
}
</style>
