<!--
  * @File: 时间统计 - 组件
  * @FileDescription:
      接收父组件传递过来的数据，展示不同时间段，重新封装-时间统计组件，该组件功能分为（按月统计、按季度统计、按半年度统计、按年统计、自定义日期）等，使用灵活，可在多场景下使用。

      * 组件案例 *
      <timeStatistics
          ref="time"             // 定义组件名称
          :label="'统计时间'"     // 定义时间类型名称
          :width="140"           // 定义时间类型宽度
          :timeList="timeList"   // 定义时间类型数组数据 *必传*
          :selectShow="true"     // 判断是否显示下拉框
          :period="2"            // 自定义周期（按月份），不传参 -> 默认 1个月为一周期
          :sDate="'2020-9-01'"   // 自定义周期 - 开始日期
          :eDate="'2021-10-31'"  // 自定义周期 - 结束日期
      />

      /*****     需要展示的时间类型     *****/
      timeList: [
        {
          value: 'MONTH',
          name: '按月统计'
        },
        {
          value: 'QUARTER',
          name: '按季度统计'
        },
        {
          value: 'HYEAR',
          name: '按半年度统计'
        },
        {
          value: 'YEAR',
          name: '按年统计'
        },
        {
          value: 'Section',
          name: '自定义日期'
        },
      ]

  * @Author: 蒋新平
  * @Date: 2021.10.26
  * @Update: 2021.10.26
-->
<template>
  <div>
    <a-form-item :label="label">
      <a-select
        :default-value="timeList[0].value"
        :style="{ width: width + 'px' }"
        v-if="selectShow"
        style="margin-right: 10px;"
        @change="handleChange"
      >
        <a-select-option v-for="(item, index) in timeList" :key="index" :value="item.value">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <timechange :dateType="dateType" @timeback="sTimeback" v-if="dateType !== 'Section'"></timechange>
    </a-form-item>
    <a-form-item>
      <sectionDate
        :listSection="listSection"
        @timeback="sTimeback"
        v-if="dateType === 'Section'"
        style="width: 260px"
      />
    </a-form-item>
  </div>
</template>

<script>
import timechange from './timechange'
import sectionDate from './sectionDate'
import moment from 'moment'
export default {
  name: 'TimeStatistics',
  components: { timechange, sectionDate },
  props: {
    timeList: {
      type: Array,
      default: () => [
        {
          value: 'MONTH',
          name: '按月统计'
        },
        {
          value: 'QUARTER',
          name: '按季度统计'
        },
        {
          value: 'HYEAR',
          name: '按半年度统计'
        },
        {
          value: 'YEAR',
          name: '按年统计'
        },
        {
          value: 'Section',
          name: '自定义日期'
        }
      ]
    },
    label: {
        type: String,
        default: '统计时间'
    },
    width: {
      type: Number,
      default: 120
    },
    selectShow: {
      type: Boolean,
      default: true
    },
    period: { // 自定义周期（按月份），默认 1个月为一周期
      type: Number,
      default: 0
    },
    sDate: {
      type: String,
      default: ''
    },
    eDate: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      dateType: this.timeList[0].value,
      sTimes: [],
      listSection: []
    }
  },
  watch: {
    period(newName, oldName) {
      if (newName !== oldName) {
        this.period = newName
      }
      this.periodicTime()
    },
    sDate(newName, oldName) {
      if (newName !== oldName) {
        this.sDate = newName
      }
      this.periodicTime()
    },
    eDate(newName, oldName) {
      if (newName !== oldName) {
        this.eDate = newName
      }
      this.periodicTime()
    }
  },
  created () {
    if (this.dateType === 'Section') {
      if (!this.period || !this.sDate || !this.eDate) {
        this.$message.warning('时间周期、开始日期、结束日期，不能为空！')
      } else {
        this.periodicTime()
      }
    }
  },
  methods: {
    // 周期时间的变化事件
    periodicTime () {
      const { nPayCount } = this.getSectionNum(this.period, this.sDate, this.eDate)
      // 获取时间 和 期数
      this.listSection = this.getListSection(this.period, this.sDate, this.eDate, nPayCount)
    },
    // 时间统计下拉框变化事件
    handleChange (val) {
      this.dateType = val
      if (val === 'Section') {
        if (!this.period || !this.sDate || !this.eDate) {
          this.$message.warning('时间周期、开始日期、结束日期，不能为空！')
        } else {
          this.periodicTime()
        }
      }
    },
    sTimeback (data) {
      this.sTimes[0] = data.s
      this.sTimes[1] = data.e
    },
    // 获取付款周期数组
    getSectionNum (payment, conStartDate, conEndDate) {
      let nPayCount = Math.ceil(moment(conEndDate).diff(moment(moment(conStartDate).add(-1, 'day')), 'months') / payment)
      const isAftreIntegerSection = this.isAfterDate(moment(conEndDate).format('YYYY-MM-DD'), moment(moment(conStartDate).add(nPayCount * payment, 'months').add(-1, 'day')).format('YYYY-MM-DD'))
      nPayCount = isAftreIntegerSection ? nPayCount + 1 : nPayCount
      const isIntegerSection = moment(conEndDate).format('YYYY-MM-DD') !== moment(moment(conStartDate).add(nPayCount * payment, 'months').add(-1, 'day')).format('YYYY-MM-DD')
      return { nPayCount: nPayCount, isIntegerSection: isIntegerSection }
    },
    // 日期比较函数
    isAfterDate (sDate, eDate) {
      return moment(moment(sDate).format('YYYY-MM-DD')).isAfter(moment(moment(eDate).format('YYYY-MM-DD')))
    },
    // 获取期数数组
    getListSection (payment, conStartDate, conEndDate, nPayCount) {
      return Array(nPayCount).fill({}).map((v, i) => {
        const conSectionStartDate = moment(conStartDate).add(payment * i, 'months').format('YYYY-MM-DD')
        let conSectionEndDate = moment(conStartDate).add(payment * (i + 1), 'months').add(-1, 'day')
        conSectionEndDate = this.isAfterDate(conSectionEndDate, conEndDate) ? moment(conEndDate).format('YYYY-MM-DD') : moment(conSectionEndDate).format('YYYY-MM-DD')
        return { section: i + 1, sDate: conSectionStartDate, eDate: conSectionEndDate }
      })
    },
  }
}
</script>

<style scoped></style>
