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

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import tri1 from '@/assets/images/tri1.png'
import tri2 from '@/assets/images/tri2.png'

export interface TabsProp {
  name: string
  key: string
}

export default defineComponent({
  name: 'Tabs',
  props: {
    list: {
      type: Array as PropType<TabsProp[]>,
      required: true,
    },
    horizontal: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
  emits: ['select'],
  setup(props, ctx) {
    const img1 = ref(tri1)
    const img2 = ref(tri2)
    const curTabKey = ref(props.list[0].key)
    const handleSelect = (key: string) => {
      curTabKey.value = key
      ctx.emit('select', key)
    }
    return {
      curTabKey,
      handleSelect,
      img1,
      img2,
    }
  },
})
</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
  &.horizontal
    width 100%
    height .25rem
    flex-direction row
    border-right none
    border-bottom .01rem solid $primary-border
    >div
      flex-direction row
      align-items center
      max-width .8rem
      &.on
      &:hover
        background url('@/assets/images/tab-on2.png') 100% / 100% 100% no-repeat
      img
        height 100%
        width auto
      p
        min-height 0
        // min-width .5rem
        padding 0 .05rem
  >div
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    width inherit
    cursor pointer
    color #acacac
    font-weight bold
    &.on
    &:hover
      color #fff
      background url('@/assets/images/tab-on.png') 100% / 100% 100% no-repeat
    img
      width .25rem
      height .1rem
      &:last-child
        transform rotate(180deg)
    p
      display flex
      align-items center
      text-align center
      padding 0 .02rem
      min-height .5rem
      font-size .11rem
</style>
