<template>
  <!-- 组件   每个模块的title和右测tab切换 -->
  <div class="EachModuleTitle">
    <div class="flex_sbc p56">
      <div class="title">{{ title }}</div>
      <div v-if="isTab" class="tabData flex">
        <div
          class="eachClick"
          :class="active == item.value ? 'active' : ''"
          v-for="item in rightTabArr"
          :key="item.value"
          @click="tabClick(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="EachModuleTitle">
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['rightTabClick']);

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: () => {
      return '';
    },
  },
  // tab数据
  rightTabArr: {
    type: Array,
    default: () => {
      return [];
    },
  },
  //   默认值
  activeTab: {
    type: String,
    default: () => {
      return '';
    },
  },
  //   是否有tab
  isTab: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const active = ref('');
watch(
  () => props.activeTab,
  value => {
    active.value = value;
  },
  { immediate: true }
);
const tabClick = item => {
  console.log('item', item);
  active.value = item.value;
  emit('rightTabClick', item);
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
.EachModuleTitle {
  width: 100%;
  height: 44px;
  background: url('@/assets/images/pictureOnMap/eachBgc.png') no-repeat center;
  background-size: 100% 100%;
  .title {
    font-weight: bold;
font-size: 20px;
color: #FFFFFF;
  }
  .p56 {
    height: 100%;
    padding-left: 56px;
    padding-right: 7px;
  }
  .tabData {
    .eachClick {
      // width: 64px;
      height: 26px;
      background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
      border-radius: 1px;
      border: 1px solid #0b9bff;
      margin-left: 10px;
      padding: 0 8px;
      
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      line-height: 26px;
      cursor: pointer;
    }
    .active {
      background: linear-gradient(0deg, rgba(6, 227, 209, 0.8) 0%, rgba(12, 59, 85, 0.1) 100%);
      border: 1px solid #2ff6e8;
    }
  }
}
</style>