<template>
  <div class="Tab-main">
    <div class="Tab-container">
      <div class="Tab-box" @click="switchIdx($event)">
        <template v-for="(item,idx) in props.tabList" >
          <div  class="Tab-items"  >
            <nuxt-link :data-idx = 'idx' :class="props.active.idx === idx ? '_Tab-item active':'_Tab-item'" :to="item?.nuxtLink" @click="changChildren(!!item.children,$event)">{{item.name}}</nuxt-link>
            <div class="Tab-child-box dNone" v-if="item?.children">
              <template v-for="(_item,_idx) in item.children">
                <nuxt-link :to="_item?.nuxtLink" class="Tab-child-items" @click="switchCIdx(_idx,$evnet)">{{_item.name}}</nuxt-link>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>

/**
 *
 * @type {Readonly<ExtractPropTypes<{tabList: ArrayConstructor, active: ObjectConstructor}>>}
 * @description 接收两个参数，第一个是tabList，第二个是active
 * @example：
 * tabList：[
 *  {
    name: '招生新闻',    //名字
    target: news      //组件 也可以是a标签路径,可选
    },
    //。。。
 * ]
 * active：reactive({idx:0})   //必须用reactive包裹成一个对象，里面必须包含idx属性
  ，这个idx为默认先展示第几个
 * @return 这个组件没有返回值，如果你选中了一个选项，它会更新这个active，你可以用watch监听这个active
 */
const props = defineProps({
  tabList:Array,
  active:Object
})

let idx = 0
const switchIdx = function (e){
  let tag = e.target,
      cl = tag.classList
  if(cl.value.indexOf('_Tab-item')!==-1){
    tag.parentElement.parentElement.children[idx].children[0].classList.remove('active')
    idx = Number(tag.dataset.idx)
    tag.parentElement.parentElement.children[idx].children[0].classList.add('active')

    props.active.idx = idx
    props.active.name = tag.innerText;
    if('target' in props.active){
      props.active.target  =  props.tabList[idx].target
    }
    props.active.nuxtLink =   props.tabList[idx].nuxtLink
  }

}
const changChildren = function (has,e){
  if(has){
    let tag = e.target,
        cl = tag.classList
    if(cl.value.indexOf('_Tab-item')!==-1){
      tag.nextElementSibling.classList.toggle('dNone')
    }
  }else {
    [...document.getElementsByClassName('Tab-child-box')].map(item=>{
      item.classList.add('dNone')
    })
  }
}
const switchCIdx = function (_idx,e){
  props.active.cIdx = _idx
}

</script>

<style scoped src="~/assets/css/Tab/index.scss"></style>
<style scoped src="~/assets/css/Tab/media.scss"></style>
