<!-- 搜索类型 -->
<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 } from "vue";
export default defineComponent({
  setup(props: any, { emit }: SetupContext) {
    const state = reactive<{
      tabList: any[];
      curTab: any;
    }>({
      curTab: {
        type: 1
      },
      tabList: [
        {
          name: "企微好友",
          type: 1
        },
        {
          name: "个微人脉",
          type: 2
        },
        {
          name: "手机号线索",
          type: 3
        }
      ]
    });
    const onClick = (res: any) => {
      state.curTab = res;
      emit("onTabChange", res);
    };
    return {
      ...toRefs(state),
      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>
