<!-- 搜索类型 -->
<template>
  <ul class="flex-row">
    <li
      v-for="item in tabList"
      :class="{ active: item.type == curTab.type }"
      :key="item.type"
      @click.stop="onClick(item)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, reactive, SetupContext, toRefs, computed } from "vue";
export default defineComponent({
  props: {
    tabTypes: {
      type: Array,
      default: () => {
        return [1, 2, 3];
      },
    },
  },
  setup(props: any, { emit }: SetupContext) {
    const state = reactive<{
      curTab: any;
    }>({
      curTab: {
        type: props.tabTypes?.[0] || 1
      },
    });
    const tabList = computed(() => {
      const tabs = [
        {
          name: "企微好友",
          type: 1,
        },
        {
          name: "个微人脉",
          type: 2,
        },
        {
          name: "联系人",
          type: 3,
        },
      ];
      return tabs.filter((e: any) => props.tabTypes?.includes(e.type));
    });
    const onClick = (res: any) => {
      state.curTab = res;
      emit("onTabChange", res);
    };
    return {
      ...toRefs(state),
      tabList,
      onClick
    };
  }
});
</script>

<style scoped lang="scss">
li {
  color: #c2c8cc;
  margin-right: j(32);

  &:last-child {
    margin-right: 0;
  }

  &.active {
    color: #000000;
    font-weight: 500;
  }
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex1 {
  flex: 1;
}

.flex-row > .flex1 {
  width: 0;
  min-width: 0;
}

</style>
