<template>
  <div class="head" :style="{ marginBottom: bottom + 'px' }">
    <div class="title g-xs" v-for="(item, i) in props.titles" @click="onPitch(i)">
      <div :class="{ 'title-pitch': isPitch == i }"></div>
      {{ item }}
    </div>
  </div>
</template>

<script setup lang="ts">
  const isPitch = ref(0)
  const props = defineProps({
    titles: {
      type: Array,
      default: () => ['资料库', '故障库']
    },
    bottom: {
      type: [String, Number],
      default: 30
    }
  })

  const setIsPitch = (v: any) => {
    isPitch.value = v
  }
  defineExpose({
    setIsPitch
  })
  const emit = defineEmits(['onTabChange'])
  const onPitch = (v: number) => {
    isPitch.value = v
    emit('onTabChange', props.titles[v], v)
  }
</script>

<style lang="less" scoped>
  .head {
    width: 100%;
    height: 86px;
    line-height: 86px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    padding: 0 68px;
    .title {
      font-size: 16px;
      min-width: 57px;
      font-weight: bold;
      margin-right: 65px;
      position: relative;
      text-align: center;
    }
    .title-pitch {
      position: absolute;
      width: 57px;
      height: 5px;
      background: #2dcadc;
      border-radius: 2px;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
</style>
