<template>
  <view class="date_filter">
    <text
      v-for="(i, idx) in list"
      :key="idx"
      :class="{ label: true, active_label: i.value === selectVal }"
      @click="handleFilter(i)"
    >
      {{ i.label }}
    </text>
  </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
export interface selectType {
  value: string | number;
  label: string | number;
}

const props = withDefaults(
  defineProps<{
    list?: selectType[]; // 0-今天 1-七天 2-30天 3-总计
    dateType?: number | string;
  }>(),
  {
    list: () => [
      { label: '今天', value: 0 },
      { label: '近一周', value: 1 },
      { label: '近一月', value: 2 },
      { label: '总计', value: 3 },
    ],
  },
);
const emits = defineEmits(['filter']);
const selectVal = ref<number | string>();
function handleFilter(i: any) {
  emits('filter', i);
  selectVal.value = i.value;
}
watch(
  () => props.dateType,
  val => {
    selectVal.value = val;
  },
);
watch(
  () => props.list,
  val => {
    if (val) {
      selectVal.value = val[0].value;
    }
  },
  {
    immediate: true,
  },
);
</script>
<style lang="scss" scoped>
.date_filter {
  .label {
    display: inline-block;
    width: 108rpx;
    height: 52rpx;
    background-color: #f7f8fa;
    font-size: 26rpx;
    line-height: 52rpx;
    text-align: center;
    color: #666666;
    box-sizing: border-box;
    border-right: 1rpx solid #d9e1f2;

    &:first-child {
      border-radius: 12rpx 0 0 12rpx;
    }

    &:last-child {
      border-radius: 0 12rpx 12rpx 0;
      border-right: none;
    }
  }

  .active_label {
    background-color: #615dff;
    color: #ffffff;
  }
}
</style>
