<!--
 * @Descripttion: 
 * @version: 
 * @Author: 曹文丽
 * @Date: 2023-09-01 15:05:21
 * @LastEditors: 曹文丽
 * @LastEditTime: 2023-09-01 15:20:52
-->
<template>
  <div class="ya-custom-tabs">
    <div class="ya-tab" @click="handleChooseTab(tab.value)" :class="current === tab.value ? 'active' : ''"
      v-for="tab in options" :key="tab.value">{{ tab.name }}</div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

interface Props {
  current: number, // 当前选中tab
  options: Array<any>, // tab数组
}
const { current, options } = defineProps<Props>()
const emit = defineEmits(['change']);

/**
 * tab切换
 * @param value - 当前点击tab
 */
const handleChooseTab = (value) => {
  emit('change', value)
}
</script>

<style lang="scss" scoped>
.ya-custom-tabs {
  display: flex;
  justify-content: space-between;

  .ya-tab {
    cursor: pointer;
    text-align: center;
    width: 80px;
    padding: 6px 0px;
    background: #2D3B6D;
    border: 1px solid #68D9E4;
    font-weight: 400;
    color: #74F8FD;
    font-size: 14px;

    &.active {
      box-shadow: 0px 4px 10px 0px rgb(35 45 123 / 30%), inset 0px 0px 10px 0px #68d9e4;
      ;
    }
  }
}
</style>