<template>
  <div style="display: flex">
    <div class="text-tabs">
      <!-- <div
        v-for="item in timeTypeList"
        class="tab-item"
        @click="onClickTab(item)"
        :key="item.label"
      >
        <span> {{ item.label }} </span>
        <div v-if="activeTab == item.value" class="tab-underline"></div>
      </div> -->
      <el-radio-group v-model="activeTab" class="score-select" @change="onClickTab">
        <el-radio-button
          v-for="item in timeTypeList"
          :value="item.value"
          :key="item.value"
          :label="item.label"
        ></el-radio-button>
      </el-radio-group>
    </div>
    <el-date-picker
      v-model="timeSlot"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="onDateChnage"
    >
      <template #range-separator>
        <img src="@/assets/images/date-to.png" />
      </template>
    </el-date-picker>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { TimeTabEnum, timeTypeList } from '../types';
  import dayjs from 'dayjs';

  const activeTab = ref<TimeTabEnum>(TimeTabEnum.DAY);

  const emits = defineEmits(['checkTab', 'changeDateRange']);

  const today = dayjs().format('YYYY-MM-DD');
  const weekDay = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
  const monthDay = dayjs().startOf('month').format('YYYY-MM-DD');

  const timeSlot = ref([today, today]);

  const onClickTab = () => {
    switch (activeTab.value) {
      case TimeTabEnum.DAY:
        timeSlot.value = [today, today];
        break;

      case TimeTabEnum.WEEK:
        timeSlot.value = [weekDay, today];
        break;

      case TimeTabEnum.MONTH:
        timeSlot.value = [monthDay, today];
        break;
    }
    emits('checkTab', { tab: activeTab.value, data: timeSlot.value });
  };

  const onDateChnage = (date) => {
    timeSlot.value = date.map((item) => dayjs(item).format('YYYY-MM-DD'));
    onClickTab();
  };
</script>

<style scoped>
  .text-tabs {
    /* width: 132px; */
    height: 23px;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-right: 24px;
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #2e2e2e;
    line-height: 20px;
    cursor: pointer;
  }

  .tab-underline {
    width: 100%;
    height: 2px;
    background: #1677ff;
  }

  :deep(.el-date-editor .el-range__icon) {
    display: none;
  }
  :deep(.el-date-editor .el-range__close-icon--hidden) {
    display: none;
  }

  :deep(.el-range-editor.el-input__wrapper) {
    width: 236px;
    flex: unset;
    height: 32px;
    margin-top: 13px;
    margin-right: 10px;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }
</style>
