<template>
  <div class="tabs-container">
    <div
      v-for="tab in list"
      :key="tab.key"
      :class="{ on: curTabKey === tab.key }"
      @click.prevent="handleSelect(tab.key)"
    >
      <p>{{ tab.name }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'

export interface TabsProp {
  name: string
  key: string
}

export default defineComponent({
  name: 'SubTabs',
  props: {
    list: {
      type: Array as PropType<TabsProp[]>,
      required: true,
    },
  },
  emits: ['select'],
  setup(props, ctx) {
    const curTabKey = ref(props.list[0].key)
    const handleSelect = (key: string) => {
      curTabKey.value = key
      ctx.emit('select', key)
    }
    return {
      curTabKey,
      handleSelect,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.tabs-container
  display flex
  width 100%
  margin .05rem 0
  >div
    display flex
    align-items center
    cursor pointer
    color #aaa
    font-size .1rem
    transition color .1s ease
    margin-right .1rem
    &.on
    &:hover
      color #fff
    &.on
      &:before,
      &:after
        content ''
        display inline-block
        width .16rem
        height @width
        background url('@/assets/images/modal-head-tri.png') 100% / 100% 100% no-repeat
      &:after
        transform rotate(180deg)
    p
      padding 0 .05rem
      flex 1
</style>
