<template>
  <div class="date-selector-dropdown_wrap">
    <div class="segment-button__wrap">
      <div class="segment-button__item" :class="{active:dateMode === 1 }" @click.stop="onChangeDateMode(1)">
        <span>月</span>
      </div>
      <div class="segment-button__item" :class="{active:dateMode === 2 }" @click.stop="onChangeDateMode(2)">
        <span>日</span>
      </div>

      <!--      <div class="exchange-button" @click.stop="onChangeDateMode">-->
      <!--        <span>按{{ isMonthMode ? '日':'月' }}选择</span>-->
      <!--        <svg viewBox="0 0 1024 1024" width="0.46rem" height="0.46rem">-->
      <!--          <path-->
      <!--            d="M252 462h524c19.9 0 36-16.1 36-36s-16.1-36-36-36H339.4l59-59c14.1-14.1 14.1-36.9 0-50.9-14.1-14.1-36.9-14.1-50.9 0L230.3 397.2c-8.7 6.6-14.3 17-14.3 28.8 0 19.9 16.1 36 36 36zM802 564c-8.5-8.5-20.3-11.9-31.4-10H252c-19.9 0-36 16.1-36 36s16.1 36 36 36h437.1l-58.5 58.5c-14.1 14.1-14.1 36.9 0 50.9 7 7 16.2 10.5 25.5 10.5s18.4-3.5 25.5-10.5L802 615c14-14.1 14-36.9 0-51z"-->
      <!--            fill="#666666"-->
      <!--          />-->
      <!--        </svg>-->
      <!--      </div>-->
    </div>
    <div class="date-value_wrap">
      <div
        class="date-input-value"
        :style="{flex: isMonthMode ? 0.592 : 1 }"
        @click.stop="currDatePicker = 1"
      >
        <span :class="{active: currDatePicker === 1}">{{ startDateStr }}</span>
      </div>
      <div class="to-date__label" v-if="isDayMode">至</div>
      <div class="date-input-value" v-if="isDayMode" @click.stop="currDatePicker = 2">
        <span class="date-input" :class="{active: currDatePicker === 2}" v-if="endDateStr">{{ endDateStr }}</span>
        <span class="date-input-placeholder" v-else>结束时间</span>
      </div>
    </div>
    <van-datetime-picker
      v-show="currDatePicker === 1"
      v-model="startDate"
      :type="isMonthMode ? 'year-month': 'date'"
      :show-toolbar="false"
      item-height="40"
      :formatter="formatter"
    />
    <van-datetime-picker
      v-if="currDatePicker === 2"
      :min-date="minEndDate"
      v-model="endDate"
      :show-toolbar="false"
      type="date"
      item-height="40"
      :formatter="formatter"
    />
    <div class="date-picker__toolbar">
      <van-button
        class="reset-button"
        block
        square
        color="rgba(38,162,255,0.2)"
        @click="onResetDate"
      >{{ resetBtnText }}
      </van-button>
      <van-button block square type="info" @click="onConfirmDate">确认</van-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import moment from 'moment'
  import {Button, DatetimePicker} from 'vant'

  Vue.use(Button).use(DatetimePicker)

  export default {
    name: 'DateSelectorDropdown',
    props: {
      title: {type: String},
      resetBtnText: {type: String, default: '恢复默认'}
    },
    data () {
      return {
        currDatePicker: 1,
        dateMode: 1,
        endDate: new Date(),
        startDate: new Date(),
      }
    },
    watch: {
      startDate (newVal) {
        this.changeTitle(newVal)
      },
      dateMode () {
        this.changeTitle(this.startDate)
      }
    },
    computed: {
      isMonthMode () {
        return this.dateMode === 1
      },
      isDayMode () {
        return this.dateMode !== 1
      },
      startDateStr () {
        return moment(this.startDate).format(
          this.isMonthMode ? 'YYYY-MM' : 'YYYY-MM-DD'
        )
      },
      endDateStr () {
        return this.endDate ? moment(this.endDate).format('YYYY-MM-DD') : null
      },
      minEndDate () {
        return this.deepCopyDate(this.startDate)
      }
    },
    methods: {
      formatter (type, val) {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
        return `${val}日`
      },
      deepCopyDate (date) {
        return new Date(date.getFullYear(), date.getMonth(), date.getDate())
      },
      changeTitle (startDate) {
        if (this.isMonthMode) {
          const now = new Date()
          if (startDate.getMonth() === now.getMonth() && startDate.getFullYear() === now.getFullYear()) {
            this.$emit('update:title', '本月')
          } else {
            this.$emit('update:title', startDate.getMonth()+1 +'月')
          }
        } else {
          this.$emit('update:title', startDate.getDate() + '日')
        }
      },
      onResetDate () {
        this.startDate = new Date()
        this.resetDefaultDateMode()
      },
      resetDefaultDateMode () {
        this.endDate = new Date()
        this.dateMode = 1
        this.currDatePicker = 1
      },
      onConfirmDate () {
        if (this.isDayMode && this.startDate.getTime() > this.endDate.getTime()) {
          this.$notify({type: 'warning', message: '开始日期不能大于结束如期'})
          return
        }
        this.$emit('onConfirm', {dateMode: this.dateMode, startDate: this.startDateStr, endDate: this.endDateStr})
      },
      onChangeDateMode (val) {
        if (this.dateMode === val) return
        if (this.isMonthMode) {
          this.dateMode = 2
        } else {
          this.resetDefaultDateMode()
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .date-selector-dropdown_wrap {
    position: relative;

    .date-picker__toolbar {
      display: flex;
      flex-direction: row;

      & .reset-button {
        touch-action: none;
        color: #26a2ff !important;
        border: transparent !important;
      }
    }

    .segment-button__wrap {
      display: flex;
      margin-top: 0.24rem;
      flex-direction: row;
      justify-content: center;

      .segment-button__item {
        display: flex;
        width: 1.1rem;
        height: 0.52rem;
        font-size: 0.28rem;
        color: #303133;
        background-color: #fff;
        border-top: 0.02rem solid #26a2ff;
        border-bottom: 0.02rem solid #26a2ff;
        border-left: 0.02rem solid #26a2ff;
        align-items: center;
        justify-content: center;
        transition: color, background-color 150ms;
        touch-action: none;

        &.active {
          color: #fff;
          background-color: #26a2ff;
        }

        &:first-child {
          border-radius: 0.08rem 0 0 0.08rem;
        }

        &:last-child {
          border-right: 0.02rem solid #26a2ff;
          border-radius: 0 0.08rem 0.08rem 0;
        }
      }
    }

    .date-value_wrap {
      position: relative;
      display: flex;
      padding: 0.32rem;
      font-size: 0.28rem;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      & .date-input-value {
        display: flex;
        flex: 1;
        height: 0.56rem;
        color: #303133;
        border-bottom: 1px solid #26a2ff;
        align-items: center;
        justify-content: center;
        touch-action: none;

        & >span.active {
          color: #26a2ff;
        }

        & .date-input-placeholder {
          color: #ccc;
        }
      }

      & .to-date__label {
        padding: 0 0.4rem;
        color: #999;
      }
    }
  }
</style>
