<template>
  <div
    class="inline-calendar"
    :class="{'is-weekend-highlight': highlightWeekend}"
  >
    <div
      v-show="!hideHeader"
      class="calendar-header"
    >
      <div class="calendar-year">
        <a
          class="year-prev vux-prev-icon"
          href="javascript:"
          @click="go(year - 1, month)"
        />
        <a
          class="calendar-year-txt calendar-title"
          href="javascript:"
        >{{ year }}</a>
        <a
          class="year-next vux-next-icon"
          href="javascript:"
          @click="go(year + 1, month)"
        />
      </div>

      <div class="calendar-month">
        <a
          class="month-prev vux-prev-icon"
          href="javascript:"
          @click="prev"
        />
        <a
          class="calendar-month-txt calendar-title"
          href="javascript:"
        >{{ months[month] }}</a>
        <a
          class="month-next vux-next-icon"
          href="javascript:"
          @click="next"
        />
      </div>
    </div>

    <table>
      <thead v-show="!hideWeekList">
        <tr>
          <th
            v-for="(week, index) in weeksList"
            :key="week"
            :class="['week', `is-week-list-${index}`]"
          >
            {{ week }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(day, k1) in days"
          :key="k1"
        >
          <td
            v-for="(child, k2) in day"
            :key="child.day"
            :data-date="formatDate(year, month, child)"
            :data-current="currentValue"
            :class="buildClass(k2, child, formatDate(year, month, child) === currentValue && !child.isLastMonth && !child.isNextMonth)"
            @click="select(k1,k2,$event)"
          >
            <span
              v-show="(!child.isLastMonth && !child.isNextMonth ) || (child.isLastMonth && showLastMonth) || (child.isNextMonth && showNextMonth)"
            >{{ replaceText(child.day, formatDate(year, month, child)) }}</span>
            {{ customSlotFn(k1, k2, child) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import format from '../datetime/format'
import { getDays, zero } from './util'
import props from './props'

export default {
  props: props(),
  data () {
    return {
      year: 0,
      month: 0,
      days: [],
      current: [],
      today: format(new Date(), 'YYYY-MM-DD'),
      months: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      currentValue: ''
    }
  },
  computed: {
    _replaceTextList () {
      const rs = {}
      for (let i in this.replaceTextList) {
        rs[this.convertDate(i)] = this.replaceTextList[i]
      }
      return rs
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue (val) {
      this.currentValue = this.convertDate(val)
      if (this.renderOnValueChange) {
        this.render(null, null, val)
      } else {
        this.render(this.year, this.month, this.currentValue)
      }
      this.$emit('on-change', val)
      this.$emit('input', val)
    },
    returnSixRows (val) {
      this.render(this.year, this.month, this.currentValue)
    },
    disablePast () {
      this.render(this.year, this.month, this.currentValue)
    },
    disableFuture () {
      this.render(this.year, this.month, this.currentValue)
    }
  },
  created () {
    this.currentValue = this.value
  },
  mounted () {
    this.currentValue = this.convertDate(this.currentValue)
    this.render(this.renderMonth[0], this.renderMonth[1] - 1)
  },
  methods: {
    replaceText (day, formatDay) {
      return this._replaceTextList[formatDay] || day
    },
    convertDate (date) {
      return date === 'TODAY' ? this.today : date
    },
    buildClass (index, child, isCurrent) {
      const className = {
        current: child.current || isCurrent,
        'is-disabled': child.disabled,
        'is-today': child.isToday
      }
      className[`is-week-${index}`] = true
      return className
    },
    render (year, month) {
      let data = getDays({
        year: year,
        month: month,
        value: this.currentValue,
        rangeBegin: this.convertDate(this.startDate),
        rangeEnd: this.convertDate(this.endDate),
        returnSixRows: this.returnSixRows,
        disablePast: this.disablePast,
        disableFuture: this.disableFuture
      })
      this.days = data.days
      this.year = data.year
      this.month = data.month
    },
    formatDate: (year, month, child) => {
      return [year, zero(child.month + 1), zero(child.day)].join('-')
    },
    prev () {
      if (this.month === 0) {
        this.month = 11
        this.year = this.year - 1
      } else {
        this.month = this.month - 1
      }
      this.render(this.year, this.month)
    },
    next () {
      if (this.month === 11) {
        this.month = 0
        this.year = this.year + 1
      } else {
        this.month = this.month + 1
      }
      this.render(this.year, this.month)
    },
    go (year, month) {
      this.render(year, month)
    },
    select (k1, k2) {
      if (this.current.length > 0) {
        this.days[this.current[0]][this.current[1]].isCurrent = false
      }
      this.days[k1][k2].current = true
      this.current = [k1, k2]
      this.currentValue = [this.year, zero(this.month + 1), zero(this.days[k1][k2].day)].join('-')
    }
  }
}
</script>
