<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/components/RoundTab.vue
 * @Date: 2022-07-27 16:43:03
 * @Description: 切换组件
 * @LastEditTime: 2023-09-01 17:05:45
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { watch, ref, watchEffect, withDefaults, 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,
    },
    {
      name: '全部',
      value: 4,
    },
  ],
});

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;
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 170px;
  height: 28px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2000);
  box-sizing: border-box;

  .item {
    width: 40px;
    height: 22px;
    background: transparent;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6500);
    cursor: pointer;
    box-sizing: border-box;
  }

  .active {
    color: #FFFFFF;
    background: #0095FF;
  }
}
</style>
