<template>
  <view class="select-time-range">
    <view class="select-time-box">
      <view class="select-time-box__start" @click="chooseStartTime">
        <view class="value" v-if="startShow || startTime">
          <text>{{ startTime || '开始时间' }}</text>
          <view class="clear" @click.stop="onTimeClear('startTime')">
            <zui-icon name="close"></zui-icon>
          </view>
          <u-datetime-picker ref="datetimePicker" :show="startShow" v-model="value1" mode="date" @cancel="cancle" @close="cancle" @confirm="submit" :formatter="formatter"/>
        </view>
        <text v-else class="placeholder">开始时间</text>
      </view>
      <view class="select-time-box__split">
        <text>-</text>
      </view>
      <view class="select-time-box__end" @click="chooseEndTime">
        <view class="value" v-if="endShow || endTime">
          <text>{{ endTime || '结束时间' }}</text>
          <view class="clear" @click.stop="onTimeClear('endTime')">
            <zui-icon name="close"></zui-icon>
          </view>
          <u-datetime-picker ref="datetimePicker2" :show="endShow" v-model="value1" mode="date" @cancel="cancle" @close="cancle" @confirm="submit" :formatter="formatter"/>
        </view> 
        <text v-else class="placeholder">结束时间</text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  props: {
    value: {
      type: Object,
      default: function() {
        return {
          start: '',
          end: '',
        };
      },
    },
  },
  data: function() {
    return {
      startTime: this.value.start || '',
      endTime: this.value.end || '',
      value1: Number(new Date()),
      timeType: '',
      startShow: false,
      endShow: false,
    };
  },
  watch: {
    value: function(val) {
      this.startTime = val ? val.start : '';
      this.endTime = val ? val.end : '';
    }
  },
  onReady() {
    // 微信小程序需要用此写法
    // this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 开始选择开始时间
    chooseStartTime: function() {
      this.startShow = true;
      this.timeType = 'start';
      this.value1 = this.startTime || dayjs().format('YYYY-MM-DD');
    },
    // 开始选择结束时间
    chooseEndTime: function() {
      this.endShow = true;
      this.timeType = 'end';
      this.value1 = this.endTime || dayjs().format('YYYY-MM-DD');
    },
    // 清除时间
    onTimeClear: function(type) {
      this[type] = '';
      this.$nextTick(() => {
        let emitValue = { start: this.startTime, end: this.endTime };
        this.$emit('input', emitValue);
      });
    },
    submit(val){
      if(this.timeType === 'start') {
        this.startTime = dayjs(val.value).format('YYYY-MM-DD');
      }else if(this.timeType === 'end') {
        this.endTime = dayjs(val.value).format('YYYY-MM-DD');
      }
      this.startShow = false;
      this.endShow = false;
      this.$nextTick(() => {
        let emitValue = { start: this.startTime, end: this.endTime };
        this.$emit('input', emitValue);
      });
    }, 
    cancle() {
      this.startShow = false;
      this.endShow = false;
      this.$nextTick(() => {
        let emitValue = { start: this.startTime, end: this.endTime };
        this.$emit('input', emitValue);
      });
    },
  }
};
</script>

<style lang="scss">
.select-time-range {
  font-size: $font-md;
  .select-time-box {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-break: break-all;
    font-size: $font-md;
    &__split {
      padding: 0 34upx;
      white-space: nowrap;
      word-break: break-all;
      color: $color-text-minor;
    }
    &__start, &__end {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80upx;
      border-radius: 8upx;
      background-color: $color-field;
      color: $color-black;
      white-space: nowrap;
      word-break: break-all;
      .value {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      .clear {
        color: $color-text-minor;
        padding: 10upx;
        height: 100%;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .placeholder {
        color: $color-text-minor;
      }
    }
  }
}
</style>
