<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/RoundTab/RoundTab.vue
 * @Date: 2022-07-27 16:43:03
 * @Description: 切换组件
 * @LastEditTime: 2023-08-31 11:38:46
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { watch, ref, watchEffect, defineEmits } from "vue";
import { mapMapping } from "../../assets/map/provinceData";
const mapData = mapMapping();
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" :class="mapData?.en == 'anhui' ? 'custom-switch-box1' : ''">
    <div class="custom-round-tab-item" @click="handleClick(tab)"
      :class="currentName === tab.value ? 'ya-primary-bg-color 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;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 2px;
  display: inline-flex;
  align-items: center;

  .custom-round-tab-item {
    width: 60px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    font-weight: 400;
    color: #71b8d0;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    background: url("../../assets/image/card/date-base.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 16px;

    &:nth-child(1) {
      margin-left: 0;
    }
  }

  .active {
    font-weight: 600 !important;
    color: #9aefff !important;
    background: url("../../assets/image/card/date-chose.png") no-repeat !important;
    background-size: 100% 100% !important;
  }
}
</style>
