<template>
  <div class="kTabsIdx" :style="{ width: tabWidth }">
    <van-tabs @click-tab="tabClk" @change="tabChg" :color="color" :title-active-color="activeColor"
      :title-inactive-color="inactiveColor" v-model:active="active">
      <van-tab v-for="(item, index) in tabList" :key="index">
        <template #title>
          {{ item.name
          }}
          <van-icon v-if="item.icon" :color="active === index ? 'color' : ''" :name="item.icon" />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
/**
 * kTabs tab栏组件
 * @description 本组件主要是vant的tab二次封装组件。
 *
 */
import { ref } from "vue";
export default {
  props: {
    // 宽度
    tabWidth: {
      type: String,
      default: '78%'
    },
    // 列表
    tabList: {
      type: Array,
      default: () => [],
    },
    // 主题色
    color: {
      type: String,
      default: "#FF3456",
    },
    // 选中颜色
    activeColor: {
      type: String,
      default: "#FF3456",
    },
    // 非选中颜色
    inactiveColor: {
      type: String,
      default: "#8787A6",
    },
  },
  setup(props, { emit }) {
    const active = ref(0);
    // 点击tab栏
    const tabClk = (e) => {
      emit("tabclk", e);
    }
    // tab状态改变时
    const tabChg = (e) => {
      emit("tabchg", e);
    };
    // 手动改变tab选中状态
    const chgActive = (e) => {
      active.value = e;
    }
    return { tabChg, active, chgActive, tabClk };
  },
};
</script>

<style lang="less" scoped>
.kTabsIdx {
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #b9bad0;
  }

  :deep(.van-tabs--line .van-tabs__wrap) {
    height: 30px;
  }
}
</style>