<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: string | number
    dataList?: anyObj[]
  }>(),
  {
    dataList: () => [
      { label: '今日', value: 0 },
      { label: '近一周', value: 1 },
      { label: '近一月', value: 2 },
      { label: '总计', value: 3 },
    ],
  },
)

const emits = defineEmits(['change', 'update:modelValue'])
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
function handleSelect(item: any) {
  if (props.modelValue === item.value) return
  emits('update:modelValue', item.value)
  emits('change', item)
}
</script>
<template>
  <div class="select-list">
    <div
      v-for="item in dataList"
      :key="item.value"
      :class="{
        'data-item': true,
        active: props.modelValue === item.value,
      }"
      @click="handleSelect(item)"
    >
      <div class="text">
        {{ item.label }}
      </div>
      <div
        v-if="props.modelValue === item.value"
        class="bg_img"
        :style="{
          background: `url(${OSS_URL}/icon/leaf_solid.svg) 100% / contain no-repeat`,
        }"
      ></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.select-list {
  display: flex;
  height: 5.42vh;
  align-items: flex-end;
  .data-item {
    margin-right: 8px;
    cursor: pointer;
    &:last-child {
      margin-right: 0;
    }
    .text {
      font-size: 2vh;
      font-weight: 400;
      line-height: 4vh;
      text-align: center;
      background: #f0f1ff;
      border-radius: 2vh;
      padding: 0 30px;
    }

    &.active {
      position: relative;
      .text {
        position: relative;
        z-index: 1;

        background: #8a94fd;
        border: 0.17vh solid #615dff;
        color: #fff;
      }
      .bg_img {
        height: 2.08vh;
        width: 46px;
        position: absolute;
        z-index: 0;
        left: -6px;
        top: -1.5vh;
      }
    }
  }
}
</style>
