<!--
 * @Description: 
 * @Autor: chengq
 * @Date: 2022-08-02 11:15:29
 * @LastEditors: 李佐宁
 * @LastEditTime: 2023-03-21 15:22:43
 * @Author: 程迁
-->
<script setup lang="ts">
import {
  reactive,
  ref,
  defineProps,
  defineEmits,
  nextTick,
  watch,
  defineComponent,
  onMounted,
} from "vue";
const emit = defineEmits(["handleChangeTab"]);
const props = defineProps({
  tablist: {
    fromType: Array,
    default: () => [],
  },
  style: {
    fromType: String,
    default: () => "",
  },
  clickIndex: {
    fromType: Number,
    default: () => 0,
  },
});
// const clickIndex = ref(0);
const tabClick = (index) => {
  emit("handleChangeTab", index);
};
</script>
<template>
  <div class="searchtitle">
    <div style="height: 50px">
      <div
        v-for="item in props.tablist"
        :key="item.name"
        class="searchcontent"
        :style="props.style"
        @click="tabClick(item.value)"
      >
        <div
          :class="
            item.value == props.clickIndex
              ? 'active ya-border-active-color'
              : ''
          "
        >
          <div class="searchimg"><img :src="item.img" /></div>
          <div class="searcomnt">
            <div class="ya-primary-text" style="margin-top: 3px">
              {{ item.num }}
            </div>
            <div class="ya-regular-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div style="height: 12px; border-bottom: 1px solid;" class="ya-border-color"></div> -->
  </div>
</template>
<style scoped lang="scss">
.searchtitle {
  padding: 0.8vw 1.55vw 0;
  // background: #fff;
}
.searchcontent {
  float: left;
  // width: 14%;
  cursor: pointer;
  > div {
    width: 6.97vw;
    display: flex;
    padding-bottom: 5px;
  }
}
.searchimg {
  width: 54px;
  height: 54px;
  // float: left !important;
  margin-right: 8px;
  > img {
    width: 54px;
    height: 54px;
  }
}
.searcomnt {
  height: 54px;
  > div:nth-of-type(1) {
    height: 24px;
    font-size: 24px;
    font-family: D-DIN-Bold, D-DIN;
    font-weight: bold;
    line-height: 26px;
  }
  > div:nth-of-type(2) {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    line-height: 20px;
    margin-top: 2px;
    white-space: nowrap;
  }
}
.active {
  position: relative;
  border-bottom: 3px solid #0095ff;
  bottom: 0;
}
</style>
