<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/RoundTab.vue
 * @Date: 2022-07-27 16:43:03
 * @Description: 切换组件
 * @LastEditTime: 2023-09-01 15:25:08
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { watch, ref, watchEffect, withDefaults, defineProps, defineEmits } from 'vue';

interface TabProps {
  modelValue: string | number
  options?: any;
}
const props = withDefaults(defineProps<TabProps>(), {
  modelValue: '',
  options: [
    {
      name: '周',
      value: 1,
    },
    {
      name: '月',
      value: 2,
    },
    {
      name: '年',
      value: 3,
    },
  ],
});

const emit = defineEmits(['update:modelValue', 'change']);

const currentName = ref('') as any;

watchEffect(() => {
  currentName.value = props.modelValue;
});

function handleClick(item) {
  currentName.value = item.value;
  emit('update:modelValue', item.value)
  emit('change', item)
}
</script>

<template>
  <div class="custom-switch-box ya-regular-text ya-border-color ya-bg-color">
    <div class="item" @click="handleClick(tab)" :class="currentName === tab.value ? 'active' : ''"
      v-for="(tab, index) in props.options" :key="tab.value">
      {{ tab.name }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-switch-box {
  z-index: 99;
  top: 100px;
  width: 280px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: url('../../../assets/image/roundTabBg.png') no-repeat;
  background-size: 100%;

  .item {
    width: 92px;
    height: 28px;
    font-size: 14px;
    font-weight: 400;
    color: #42A4CF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .active {
    color: #FFFFFF;
    width: 92px;
    height: 28px;
    background: url('../../../assets/image/roundTabBgActive.png') no-repeat;
    background-size: 100%;
  }
}
</style>
