<template>
  <div class="root">
    <div
      v-for="(item, index) in cItems"
      class="simple-flow-item-wrapper"
      :key="index"
      :accessible="true"
      :aria-label="
        `${item.title},${item.desc ? item.desc : ''},${item.date ? item.date : ''},${
          item.highlight ? '已完成' : '等待完成'
        }`
      "
      style="width: 750px;"
    >
      <div v-if="leftContent" class="left-content-wrap" :style="leftContentStyle">
        <slot name="leftContent" :item="item"
          ><text
            v-if="item.leftContentDate"
            class="left-text-date"
            :class="item.__titleTextClass__"
            :style="item.__titleStyle__"
            >{{ item.leftContentDate }}</text
          >
        </slot>
      </div>
      <div ref="rightContent" style="flex: 1;">
        <div class="title flex-row">
          <div class="line" :class="item.__titleLineClass__" :style="item.__lineStyle__"></div>
          <div class="point" :class="item.__pointClass__" :style="item.__pointStyle__">
            <div
              class="highlightInner"
              v-if="item.highlight && !_isColmo"
              :style="{
                backgroundColor: item.__pointStyle__.innerBackgroundColor
                  ? item.__pointStyle__.innerBackgroundColor
                  : (_isDiablo ? '#0490D3' : '#00a4f2')
              }"
            ></div>
          </div>
          <text class="text-title full-rest" :class="item.__titleTextClass__" :style="item.__titleStyle__">{{
            item.title
          }}</text>
        </div>
        <div class="content flex-row" :class="item.__contentClass__">
          <div class="line" :class="item.__contentLineClass__" :style="item.__lineStyle__"></div>
          <div class="full-rest">
            <text
              v-if="item.desc"
              class="text-desc"
              :style="{ width: rightContentWidth ? rightContentWidth + 'px' : 'auto' }"
              >{{ item.desc }}</text
            >
            <text v-if="item.date" class="text-date">{{ item.date }}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="./colmo.css" scoped></style>
<style src="./diablo.css" scoped></style>
<style scoped>
.left-content-wrap {
  /* flex-direction: column;
  flex-wrap: nowrap; */
}
.simple-flow-item-wrapper {
  flex-direction: row;
}
.flex-row {
  flex-direction: row;
}

.full-rest {
  flex: 1;
}

.root {
  padding-top: 28px;
  padding-bottom: 24px;
  background-color: transparent;
}

.content {
  padding-top: 9px;
  padding-bottom: 42px;
}

.last-one-content {
  padding-bottom: 0;
}

.title,
.content {
  padding-left: 70px;
  padding-right: 70px;
}

.line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38px;
  width: 2px;
  background-color: #dddddd;
}

.first-one-title-line {
  top: 20px;
}

.last-one-title-line {
  bottom: 20px;
}

.last-one-content-line {
  width: 0;
}

.point {
  position: absolute;
  top: 6px;
  left: 33px;
  width: 12px;
  height: 12px;
  background-color: #dddddd;
  /* border-style: solid;
    border-width: 2px;
    border-color: #00A4F2; */
  border-radius: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.highlightInner {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  /* background-color: #00a4f2; */
}

.highlight-point {
  top: 4px;
  left: 25px;
  width: 28px;
  height: 28px;
  /* background-color: #ccedfd; */
  /* border-style: solid; */
  /* border-width: 6px; */
  /* border-color: rgba(38, 122, 255, 0.3); */
  /* border-color: #BED7FF; */
}

.text-title {
  font-size: 28px;
  color: #8e969b;
}
.left-text-date {
  font-family: PingFangSC-Regular;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
}

.text-highlight-title {
  color: #00a4f2;
}

.text-desc,
.text-date {
  font-size: 24px;
  color: #8e969b;
}

.text-desc {
  margin-bottom: 12px;
  line-height: 32px;
  lines: 3;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

<script>
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  props: {
    list: {
      type: Array,
      required: true
    },
    flowConfig: {
      type: Object,
      default: () => ({})
    },
    leftContent: {
      type: Boolean,
      default: false
    },
    leftContentStyle: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    cItems() {
      return this.adapter(this.list)
    }
  },
  data() {
    return {
      rightContentWidth: null
    }
  },
  methods: {
    adapter(items) {
      const {
        lineColor, // 时间轴线条颜色
        pointInnerColor, // 时间节点圈点Point颜色
        // pointBorderColor,
        highlightTitleColor, // 高亮标题 title颜色
        highlightPointInnerColor, // 高亮节点的 圈点颜色
        // highlightPointBorderColor,
        titleSize, // 标题字体大小
        highlightPointOuterColor // 高亮节点的 圈点外框颜色
      } = this.flowConfig
      const len = items.length
      const pre = Date.now()

      return items.map((item, index) => {
        item.key = `${pre}_${index}`
        item.__titleLineClass__ = []
        item.__contentClass__ = []
        item.__contentLineClass__ = []
        item.__pointClass__ = []
        item.__titleTextClass__ = []
        item.__pointStyle__ = {}
        item.__lineStyle__ = {}
        item.__titleStyle__ = {}

        if (lineColor) item.__lineStyle__.backgroundColor = lineColor
        if (pointInnerColor) item.__pointStyle__.backgroundColor = pointInnerColor
        if (titleSize) item.__titleStyle__.fontSize = titleSize //add by lau 新增设置标题字体大小
        if (this.rightContentWidth) {
          item.__titleStyle__.width = this.rightContentWidth + 'px'
        }
        // if (pointBorderColor) item.__pointStyle__.borderColor = pointBorderColor;

        if (index === 0) {
          item.__titleLineClass__.push('first-one-title-line')
        }

        if (index === len - 1) {
          item.__titleLineClass__.push('last-one-title-line')
          item.__contentClass__.push('last-one-content')
          item.__contentLineClass__.push('last-one-content-line')
        }

        if (item.highlight) {
          item.__pointClass__.push('highlight-point')
          item.__titleTextClass__.push('text-highlight-title')
          if (highlightTitleColor) item.__titleStyle__.color = highlightTitleColor
          if (highlightPointOuterColor) {
            item.__pointStyle__.backgroundColor = highlightPointOuterColor
          } else if (!highlightPointOuterColor && highlightPointInnerColor) {
            item.__pointStyle__.backgroundColor = highlightPointInnerColor
          } else if (!this._isColmo) {
            item.__pointStyle__.backgroundColor = this._isDiablo ? '#0e2c3b' : 'rgba(2,162,242,0.2)'
          }
          if (highlightPointInnerColor) item.__pointStyle__.innerBackgroundColor = highlightPointInnerColor

          // if (highlightPointBorderColor) item.__pointStyle__.borderColor = highlightPointBorderColor;
        }
        return item
      })
    },

    // add by lau
    colorToRGBA(color) {
      var color1, color2, color3
      color = '' + color
      if (typeof color !== 'string') return
      if (color.charAt(0) == '#') {
        color = color.substring(1)
      }
      if (color.length == 3) {
        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2]
      }
      if (/^[0-9a-fA-F]{6}$/.test(color)) {
        color1 = parseInt(color.substr(0, 2), 16)
        color2 = parseInt(color.substr(2, 2), 16)
        color3 = parseInt(color.substr(4, 2), 16)
        let rgbaColor = 'rgba(' + color1 + ',' + color2 + ',' + color3 + ',' + 0.1 + ')'
        console.log('rgbaColor edn', rgbaColor)
        return rgbaColor
      }
    }
  },
  mounted() {
    setTimeout(() => {
      dom.getComponentRect(this.$refs.rightContent[0], rect => {
        if (rect && rect.size) {
          this.rightContentWidth = rect.size.width - 140
        }
      })
    }, 20)
  }
}
</script>
