<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>
    <span v-if="horizontal" class="dot"></span>
  </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
  align-items center
  border-right .01rem solid $primary-border
  position relative
  >.dot
    display inline-block
    width 0
    height @width
    border .05rem solid transparent
    border-right-color #FFB560
    position absolute
    right 0
  &.horizontal
    width 100%
    height .25rem
    flex-direction row
    border-right none
    border-bottom .01rem solid rgba(255,255,255,.2)
    >div
      flex-direction row
      align-items center
      max-width .6rem
      color $edge
      font-size .09rem
      opacity 0.6
      transition all .1s ease
      &.on
      &:hover
        color #fff
        font-size .11rem
        opacity 1
        font-weight bold
        // 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
    color $edge
    font-size .09rem
    opacity 0.6
    transition all .2s ease
    &.on
    &:hover
      color #fff
      font-size .11rem
      opacity 1
      font-weight bold
      // 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>
