<script setup lang="tsx">
import { PropType, watch, ref, onMounted } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import { getHeaderBasics } from '@/api/system/config'
import { headerBasice } from '@/api/system/config/types'
import Write from './components/detailWrite.vue'
import { ContentWrap } from '@/components/ContentWrap'
import { useRoute } from 'vue-router'
const route = useRoute()
// console.log(route)
const props = defineProps({
  id: {
    type: Number as PropType<number>,
    default: () => 0
  }
})
onMounted(async () => {
  const { data } = await getHeaderBasics({ pid: props.id })
  tablist.value = data.config_tab.map((re) => {
    re.loading = true
    re.loadData = false
    return re
  })
  if (tablist.value.length > 0) {
    tablist.value[0].loadData = true
  }
  // console.log('tablist', tablist)
})
const actionIndex = ref(0)
const tablist = ref<headerBasice[]>([])
watch(actionIndex, async (val) => {
  if (val !== null) {
    actionIndex.value = val
    tablist.value[val].loadData = true
  }
})
const lodingSuccess = async (item) => {
  item.loading = false
}
</script>
<style lang="less" scoped>
.tab-box {
  min-height: 500px;
}
</style>
<template>
  <ContentWrap :title="route.meta.title">
    <ElTabs v-model="actionIndex" type="border-card">
      <ElTabPane
        class="tab-box"
        :label="item.label"
        v-for="(item, index) in tablist"
        :key="index"
        :name="index"
        v-loading="item.loading"
        element-loading-text="Loading..."
        ><Write
          :loadData="item.loadData"
          @success="lodingSuccess(item)"
          v-show="actionIndex == index"
          :id="item.id"
          :key="item.id"
      /></ElTabPane>
    </ElTabs>
  </ContentWrap>
</template>
