<template>
  <view class="day_select">
    <view
      v-for="(i, index) in listDay"
      :key="index"
      :class="`day_items ${i?.value === props.day ? 'active' : ''}`"
      @click="handleSelect(i?.value)"
    >
      {{ i?.label }}
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const props = defineProps(["day"]);
import { getDay } from "@/common/libraries/day";
const emit = defineEmits(["update:valueModel"]);
const handleSelect = (day: string) => {
  emit("update:valueModel", day);
};
const listDay = ref([
  {
    label: "今天",
    value: getDay(),
  },
  {
    label: "昨天",
    value: getDay(1),
  },
  {
    label: "前天",
    value: getDay(2),
  },
]);
</script>
<style lang="scss" scoped>
.day_select {
  display: flex;
  align-items: center;
  width: 340rpx;
  height: 55rpx;
  line-height: 55rpx;
  border: 1px solid #44ba04;
  border-radius: 100rpx;
  font-size: 27rpx;
  color: #44ba04;
  overflow: hidden;
  .day_items {
    flex: 1;
    text-align: center;
    border-radius: 100rpx;
  }
  .active {
    background-color: #44ba04;
    color: #fff;
  }
}
</style>
