<template>
  <ul class="timeline-wrapper">
    <li class="timeline-item" v-for="(item, index) of timelineList" :key="index">
      <div class="timeline-box">
        <div class="out-circle">
          <div class="in-circle"></div>
        </div>
        <div class="long-line"></div>
      </div>
      <div class="timeline-content" v-if="item.children && item.children.length > 0">
        <div v-for="(cxt, cxtIndex) of item.title" :key="index + '-t-' + cxtIndex" :class="cxt.class" :style="cxt.style">
          <span v-if="cxt.ishtml" v-html="cxt.text"></span>
          <span v-else="">{{ cxt.text }}</span>
        </div>
        <div v-for="(cxt, cxtIndex) of item.contents" :key="index + '-c-' + cxtIndex" :class="cxt.class" :style="cxt.style">
          <span v-if="cxt.ishtml" v-html="cxt.text"></span>
          <span v-else>{{ cxt.text }}</span>
        </div>
        <time-line-list class="children" :timelineList="item.children"></time-line-list>
      </div>
      <div class="timeline-content" v-else>
        <div v-for="(cxt, cxtIndex) of item.title" :key="index + '-t-' + cxtIndex" :class="cxt.class" :style="cxt.style">
          <span v-if="cxt.ishtml" v-html="cxt.text"></span>
          <span v-else="">{{ cxt.text }}</span>
        </div>
        <div v-for="(cxt, cxtIndex) of item.contents" :key="index + '-c-' + cxtIndex" :class="cxt.class" :style="cxt.style">
          <span v-if="cxt.ishtml" v-html="cxt.text"></span>
          <span v-else>{{ cxt.text }}</span>
        </div>
        <div v-if="item.credentials" class="credentials" @click="swipeDataEvent(item)">{{item.credentials.name}}</div>
      </div>
    </li>
    <van-popup v-model="swipeDataStatus" style="width: 350px;height: 245px;">
      <van-swipe v-if="swipeDataStatus">
        <van-swipe-item v-for="(image, index) in currentImage.list" :key="index">
          <van-image :src="image" fit="fill" />
        </van-swipe-item>
      </van-swipe>
    </van-popup>
  </ul>
</template>

<script type="text/babel">
import Vue from 'vue'
import { TimeLineList } from '@/components'
import { isHttpHeaderURL } from '@/utils/tools'

export default Vue.component('TimeLines', {
  name: 'TimeLine',
  components: { TimeLineList },
  props: {
    timelineList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      currentImage: {},
      swipeDataStatus: false
    }
  },
  methods: {
    swipeDataEvent(item) {
      if (item.credentials && item.credentials.list && item.credentials.list.length > 0) {
        item.credentials.list.forEach(node => {
          if (!isHttpHeaderURL(node)) {
            node = process.env.VUE_APP_FILE_URL + node
          }
        })
      }

      this.currentImage = item.credentials
      this.swipeDataStatus = true
    }
  }
})
</script>

<style scoped lang="scss">
ul.timeline-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
  &.children {
    margin-left: -40px;
    .timeline-box {
      height: 0;

      .out-circle {
        width: 20px;
        height: 20px;
        background: #ffffff;
        margin-left: 5px;

        .in-circle {
          width: 10px;
          height: 10px;
          background: #cccccc;
        }
      }
    }
  }
}

/* 时间线 */
.timeline-item {
  position: relative;

  .timeline-box {
    text-align: center;
    position: absolute;
    height: 100%;

    .out-circle {
      width: 28px;
      height: 28px;
      background: #ffffff;
      // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 1);
      /*opacity: 0.1;*/
      border-radius: 50%;
      display: flex;
      align-items: center;

      .in-circle {
        width: 14px;
        height: 14px;
        margin: 0 auto;
        background: #2765E2;
        border-radius: 50%;
        // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      }
    }

    .long-line {
      width: 1px;
      height: 100%;
      background: #cccccc;
      // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      // opacity: 0.1;
      margin-left: 13px;
    }
  }

  .timeline-content {
    box-sizing: border-box;
    margin-left: 20px;
    padding: 0 0 0 20px;
    text-align: left;
    margin-bottom: 30px;

    .credentials {
      padding: 10px 0 0;
      color: #2765E2;
      font-size: 14px;
      font-weight: bold;
    }
    .title > span {
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      padding-top: 2px;
      line-height: 25px;
    }
    .subtitle > span {
      display: flex;
      padding: 2px 0 10px 0;
      align-items: center;
      font-size: 14px;
      justify-content: space-between;
    }
    .bottom-20 {
      padding-bottom: 20px;
    }
    .content-text {
      padding: 8px 15px;
      border-radius: 5px;
      background-color: #f7f7f7;
    }
    .timeline-title {
      font-size: 14px;
      word-break: break-all;
      margin-bottom: 16px;
      color: #333;
      font-weight: 500;
      /*display: inline;*/
    }

    .timeline-date {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      margin-bottom: 16px;
    }
    .timeline-desc {
      font-size: 14px;
      color: #999999;
    }
  }

}

.timeline-item:last-of-type .timeline-content {
  // margin-bottom: 0;
}
</style>
