<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/RoundTab/RoundTab.vue
 * @Date: 2022-07-27 16:43:03
 * @Description: 切换组件
 * @LastEditTime: 2022-09-13 15:08:19
 * @LastEditors: changjun
-->
<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,
    },
    {
      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">
    <div class="custom-round-tab-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: 12px;
  right: 24px;
  bottom: 0;
  height: 28px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2000);
  box-sizing: border-box;
  padding: 2px;

  .custom-round-tab-item{
    height: 22px;
    background: transparent;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,0.6500);
    cursor: pointer;
    padding: 0 12px;
    box-sizing: border-box;
  }

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