<template>

  <div class="select-time-wrapper">

    <h5 class="titie">选择自提时间</h5>

    <div class="select-time-content flex">

      <ul class="days">

        <li

          v-for="(item, i) in days"

          :key="i"

          class="select-day"

          :class="{ current: currentDay === i }"

          @click="currentDay = i"

        >

          {{ item }}

        </li>

      </ul>

      <ul class="time-range">

        <li

          v-for="(item, i) in displayTimeRange"

          :key="i"

          class="select-time"

          @click="handleTimeClick(i)"

        >

          <span class="txt">{{ item }}</span>

          <i class="icon"></i>

        </li>

      </ul>

    </div>

  </div>

</template>

<script>

import dayjs from 'dayjs';

const checkNum = num => (num < 10 ? `0${num}` : String(num));

const suffixZero = str => `${str}:00`;

const translateToDays = {

  0: '周日',

  1: '周一',

  2: '周二',

  3: '周三',

  4: '周四',

  5: '周五',

  6: '周六'

};

const defaultSelectedDay = 0;

export default {

  name: 'SelectTime',

  data() {

    const date = dayjs();

    const tomorrow = date.add(1, 'day');

    const theDayAfterTomorrow = date.add(2, 'day');

    const days = [

      `今日（${translateToDays[date.day()]}）`,

      `明日（${translateToDays[tomorrow.day()]}）`,

      `${theDayAfterTomorrow.format('M-DD')}（${

        translateToDays[theDayAfterTomorrow.day()]

      }）`

    ];

    return {

      days,

      currentDay: defaultSelectedDay,

      initialArr: [],

      maxHour: 22,

      minHour: 9,

      selectedTime: ''

    };

  },

  computed: {

    displayTimeRange() {

      const { currentDay, initialArr, minHour, maxHour } = this;

      const currentHour = new Date().getHours();

      const sliceStart =

        currentHour < minHour || currentHour + 1 > maxHour

          ? 0

          : currentHour + 1 - minHour;

      return currentDay === defaultSelectedDay

        ? initialArr.slice(sliceStart)

        : [...initialArr];

    }

  },

  created() {

    this.initialArr = this.generateArr();

  },

  methods: {

    generateArr() {

      const { minHour, maxHour } = this;

      var arr = [];

      for (let i = minHour; i < maxHour; i++) {

        arr.push(

          [suffixZero(checkNum(i)), '-', suffixZero(checkNum(i + 1))].join('')

        );

      }

      return arr;

    },

    handleTimeClick(i) {

      this.selectedTime = this.displayTimeRange[i];

    }

  }

};

</script>

<style lang="scss" scoped>

.select-time-wrapper {

  .titie {

    padding: 10px;

    text-align: center;

  }

  .select-time-content {

    display: flex;

    .days {

      width: 120px;

      background-color: #ddd;

      text-align: center;

    }

    .time-range {

      flex: 1;

      height: 200px;

      overflow-y: scroll;

      -webkit-overflow-scrolling: smooth;

    }

    .select-day,

    .select-time {

      cursor: pointer;

    }

    .select-day {

      &.current {

        background-color: #fff;

      }

    }

  }

}

</style>