<template>
  <div ref="edFlow" class="ed-flow">
    <template v-for="(date, index) in dateArray">
      <ed-flow-item :key="index" :end="end || nowDate"
                    :flow-item="date"
                    :notDate="getNotDate"
                    :sort="index+1"
                    :start="start" :stopDate="getStopDate"
                    :total="dateArray.length"
                    :width="itemWidth"></ed-flow-item>
    </template>
  </div>
</template>

<script>
import EdFlowItem                                             from "./EdFlowItem";
import {getDate, getMonth, getNowDate, monthNumber} from "../../../tools/date-format";

export default {
  name: "EdFlow",
  components: {EdFlowItem},
  props: {
    // 无数据描述
    tips: {
      type: String,
      default: '暂无数据'
    },
    // 开始日期
    start: {
      type: String,
      default: ''
    },
    // 结束日期
    end: {
      type: String,
      default: ''
    },
    // 数据信息
    data: {
      type: Object,
      default: () => {
      }
    },
    // 数据映射
    map: {
      type: Object,
      default: () => {
        return {
          stop: 'stopDate',
          nots: "notDate"
        }
      }
    },
  },
  data() {
    return {
      dateArray: [],
      itemWidth: 0
    }
  },
  computed: {
    total() {
      return getDate(this.end || this.nowDate).getFullYear() - getDate(this.start).getFullYear() + 1
    },
    years() {
      let years = []
      for (let i = 0; i < this.total; i++) {
        years.push(getDate(this.start).getFullYear() + i)
      }
      return years
    },
    nowDate() {
      return getNowDate()
    },

    // 计算总月份数量
    months() {
      return monthNumber(this.start, this.end)
    },
    // 无数据时间段
    getStopDate() {
      return this.data && this.data[this.map.stop] ? this.data[this.map.stop] : []
    },
    // 中断日期
    getNotDate() {
      return this.data && this.data[this.map.nots] ? this.data[this.map.nots] : []
    },
  },
  mounted() {
    //测试，第一个参数为数组，第二个为份数
    this.getTimeSlot()
  },
  methods: {
    // 获取每行数据
    getTimeSlot() {
      let startM = Number(getMonth(this.start))
      let items = []
      let y = 0
      for (let i = 0; i < this.months; i++) {
        if (startM <= 12) {
          items.push({
            label: this.years[y],
            value: startM
          })
          if (startM === 12) y++
          startM++
        } else {
          startM = 1
        }
      }

      const result = [];
      for (let i = 0; i < items.length; i += 12) {
        result.push(items.slice(i, i + 12));
      }

      this.dateArray = result
      this.itemWidth = Number((this.$refs.edFlow.offsetWidth / 12).toFixed(2))
    },
    // 筛选年份
    Includes(arr) {
      return arr.map(i => {
        return getDate(i).getFullYear()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.ed-flow {
  padding-top: 16px;
}

.ed-flow-none {
  text-align: center;
  font-size: 15px;
}
</style>
