<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/CommonTabs/CommonTabs.vue
 * @Date: 2022-08-29 08:56:40
 * @Description: 公共的标签页切换 + 时间切换组件
 * @LastEditTime: 2023-02-20 20:41:48
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
-->
<script setup lang="ts">
/**
 * @author changjun
 * @description 公共的标签页切换组件 + 右侧 round 切换组件
 * @prop { String } tabValue v-model绑定的选项卡值
 * @prop { Array } tabs 选项卡的数组
 * @prop { String } roundValue v-model 绑定的 round 切换值
 * @prop { Array } roundOptions round数组
 * @event tab-click
 * @event tab-change
 * @event round-change
 * @date 2022/08/29
 */

import RoundTab from "../../components/RoundTab/RoundTab.vue";

interface CommonTabsProps {
  tabValue: number;
  tabs: any[];
  roundValue: string | number;
  roundOptions: any[];
}

const props = defineProps<CommonTabsProps>();
const emit = defineEmits([
  "update:tabValue",
  "update:roundValue",
  "tab-click",
  "tab-change",
  "round-change",
]);
const currentName = ref(props.tabValue);
const currentRoundValue = ref(props.roundValue);

watch(currentName, (tabValue) => changeTabValue(tabValue));
watch(currentRoundValue, (roundValue) => changeRoundValue(roundValue));

const changeTabValue = (tabValue) => {
  emit("update:tabValue", tabValue);
};

const changeRoundValue = (roundValue) => {
  emit("update:roundValue", roundValue);
};

const tabClick = (tab) => {
  emit("tab-click", tab);
};

const tabChange = (value) => {
  emit("tab-change", value);
};

const roundChange = (value) => {
  emit("round-change", value);
};
</script>

<template>
  <div class="common-tabs-date-change-con">
    <YaTabs
      style="margin-bottom: 12px"
      class="custom-common-tabs"
      :tabs="props.tabs"
      v-model="currentName"
      @tabChange="tabChange"
      @tabClick="tabClick"
    ></YaTabs>
    <RoundTab
      class="custom-round-tabs"
      v-if="props.roundOptions.length"
      v-model="currentRoundValue"
      :options="props.roundOptions"
      @change="roundChange"
    ></RoundTab>
  </div>
</template>

<style lang="scss" scoped>
.common-tabs-date-change-con {
  position: relative;

  :deep(.custom-round-tabs) {
    top: -12px !important;
    margin: auto 0;
  }
}

.ya-tabs-box {
  background: transparent;
}
</style>
