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

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

export interface TabsProp {
  name: string
  key: string
}

export default defineComponent({
  name: 'Tabs',
  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
  width .25rem
  height 100%
  display flex
  flex-direction column
  border-right .01rem solid $primary-border
  >div
    flex 1
    display flex
    flex-direction column
    width inherit
    cursor pointer
    &.on
    &:hover
      background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
    img
      width 100%
      &:last-child
        transform rotate(180deg)
    p
      display flex
      align-items center
      text-align center
      padding 0 .02rem
      min-height .5rem
      font-size .11rem
</style>
