<template>
	<view>
		<view @tap="$refs.calendar.open()" hover-class="cc-active">
			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ date }}</text></view>
		</view>
		<uni-calendar
		  :insert="false"
		  :range="true"
		  :show-month="true"
		  @confirm="handleChange"
		  ref="calendar"
		/>
	</view>
</template>

<script>
export default {
  name: 'DateSelector',
  data() {
    const start = this.$moment().format('YYYY-MM-DD');
    const end = this.$moment().format('YYYY-MM-DD');
    return {
      start,
      end,
    };
  },

  computed: {
    date() {
      const { start, end } = this;
      return start === end ? start : `${start} - ${end}`;
    },
  },

  methods: {
    /**
     * 日历确认选择了时间段
     * @param {object} value 日历返回对象
     */
    handleChange(value) {
      const { before, after } = value.range;
      this.start = before;
      this.end = after;
      this.menu = '';
      this.$emit('change', before, after);
    },
  },
};
</script>

<style lang="scss" scoped>
	.timer{
		font-size: 34rpx!important;
		color: $gray;
	}
</style>
