<template>
  <view class="duration-main">
    <qy-CustomSegmented v-model:value="currentDuration" :list="durations" />
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import dayjs from 'dayjs';

const props = defineProps({
  value: {
    type: Number,
    required: true,
  },
});

const emit = defineEmits(['update:value']);

const currentDuration = ref<number>(1);

const durations = ['今日', '近一周', '近一月', '总计'];

const today = dayjs().format('YYYY-MM-DD');

const durationDate = [
  {
    name: '今日',
    value: 0,
  },
  {
    name: '近一周',
    // value: `${dayjs().subtract(7, 'day').format('YYYY-MM-DD')} - ${today}`,
    value: 1,
  },
  {
    name: '近一月',
    // value: `${dayjs().subtract(1, 'month').format('YYYY-MM-DD')} - ${today}`,
    value: 2,
  },
  {
    name: '总计',
    value: 3,
  },
];

//Math.max(0, durationDate.findIndex(item => item.value === value),);

watch(
  () => props.value,
  value => {
    currentDuration.value = value;
  },
);

watch(currentDuration, value => {
  emit('update:value', durationDate[value]?.value);
});
</script>

<style scoped lang="scss">
.duration-main {
  width: 432rpx;
  margin: 30rpx auto;
}
</style>
