<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/RoundTab.vue
 * @Date: 2022-07-27 16:43:03
 * @Description: 切换组件
 * @LastEditTime: 2022-08-04 16:59:03
 * @LastEditors: 程迁
-->
<script setup lang="ts">
import { watch, ref, watchEffect } 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 {
  border: 1px solid rgba(0, 0, 0, 0.2);
  z-index: 99;
  top: 100px;
  width: 167px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-size: 100%;
  position: absolute;
  right: 5px;
  top: 0px;
  .item {
    margin: 4px;
    width: 92px;
    height: 28px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .active {
    color: #ffffff;
    width: 92px;
    width: 50px;
    height: 22px;
    background: #0095ff;
    border-radius: 2px;
  }
}
</style>
