<template>
  <div class="week-picker">
    <div class="week-picker-header">
      <van-icon name="arrow-left" @click="prevWeek" />
      <span class="week-picker-title" @click="show = true">{{ date }}</span>
      <van-icon name="arrow" @click="nextWeek" />
    </div>
    <van-calendar v-model:show="show" color="#00AA4F" :default-date="defaultDates"
                  type="range" @confirm="onConfirm" max-range="7" :min-date="minDate"
    />
  </div>
</template>

<script type="module">
import { computed, defineComponent, getCurrentInstance, reactive, ref, watch } from 'vue';
import { Calendar, Icon } from 'vant';
import { formatDate } from "~/utils";
import dayjs from "dayjs";


export default defineComponent({
  name: "week-picker",
  components: {
    [Calendar.name]: Calendar,
    [Icon.name]: Icon
  },
  props: {
    startDate: Date,
    endDate: Date
  },
  setup(props) {
    const show = ref(false);

    const instance = getCurrentInstance();

    const state = reactive({
      startDate: formatDate(props.startDate || dayjs().startOf('week')),
      endDate: formatDate(props.endDate || dayjs().endOf('week'))
    });

    const date = computed(() => [state.startDate, state.endDate].join('~'));
    const defaultDates = computed(() => {
      return [new Date(state.startDate), new Date(state.endDate)]
    })

    const onConfirm = values => {
      const [start, end] = values;
      change(start, end);
      show.value = false;
    };

    const change = (startDate, endDate) => {
      state.startDate = formatDate(startDate);
      state.endDate = formatDate(endDate);
      instance.emit("change", { startDate, endDate });
    };

    const prevWeek = () => {
      let { startDate, endDate } = state;
      change(dayjs(startDate).subtract(1, 'week'), dayjs(endDate).subtract(7, 'day'));
    };
    const nextWeek = () => {
      let { startDate, endDate } = state;
      change(dayjs(startDate).add(1, 'week'), dayjs(endDate).add(7, 'day'));
    };

    watch([props.startDate, props.endDate], () => {
      let { startDate, endDate } = props;
      change(startDate, endDate);
    });

    return {
      show, date, onConfirm, prevWeek, nextWeek,
      defaultDates, minDate: new Date(formatDate(dayjs().subtract(1, 'month')))
    };
  }
});
</script>

<style scoped lang="less">
  .week-picker {
    position: relative;
    width: 100%;
    height: 0.44rem;
    padding: 0.3rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;

    .week-picker-header {
      width: 4.14rem;
      height: 0.6rem;
      padding: 0.12rem 0.24rem;
      background: rgba(0,170,79,0.05);
      border-radius: 0.3rem;
      font-size: 0.24rem;
      font-weight: bolder;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #00AA4F;

      i {
        font-weight: bolder;
      }

      .week-picker-title {
        width: auto;
        display: inline-flex;
      }
    }

  }
</style>
