<template>
  <PageWrapper>
    <el-card shadow="never" size="small" class="proCard tabsCard">
      <el-tabs v-model="activeName" v-if="tabData.length>0">
        <el-tab-pane :name="item.configName" :label="item.configName" v-for="(item,index) in tabData" :key="index">
          <BasicSetting :dataList="item.dataList" v-if="activeName==item.configName" @success="getReshTabData" :activeName="activeName"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref,onMounted } from 'vue';
  import { getWebInfo } from '@/api/setting/web';
  import { PageWrapper } from '@/components/Page';
  import BasicSetting from './BasicSetting.vue';
  const activeName = ref();
  const tabData=ref([])

  const getTabData = async (name) => {
    let res = await getWebInfo();
    res.map(item=>{
      item.dataList.map(sub=>{
        if(sub.type=='checkbox' || sub.type=='selects'){
          const values = sub.value.split(',')
          sub.value =values
        }
        if(sub.type=='images'){
          sub.filePath = []
          sub.value = []
          if(sub.valueList && sub.valueList.length) {
            sub.valueList.map(path=>{
              sub.filePath.push({filePath:path})
              sub.value.push(path)
            })
          }
        }
        if(sub.type=='file'){
          let files = sub.value?.split('|')
          sub.fileName = files[0]
          sub.filePath = files[1]
        }
        if(sub.type=='files'){
          sub.filePath = []
          sub.value = []
          if(sub.valueList && sub.valueList.length) {
            sub.valueList.map(path=>{
              let files = path.split('|')
              sub.filePath.push({name:files[0],url:files[1]})
              sub.value.push(`${files[0]}|${files[1]}`)
            })
          }
        }
      })
    })
    tabData.value = res
    activeName.value=name?name:tabData.value[0].configName
  }
  const getReshTabData = (name)=>{
    getTabData(name)
  }
  onMounted(()=>{
    getTabData()
  })
</script>
<style lang="scss" scoped>
  .thing-cell {
    margin: 0 -16px 10px;
    padding: 5px 16px;

    &:hover {
      background: #f3f3f3;
      cursor: pointer;
    }
  }

  .thing-cell-on {
    background: #f0faff;
    color: #165DFF;

    :deep(.n-thing-main .n-thing-header .n-thing-header__title) {
      color: #165DFF;
    }

    &:hover {
      background: #f0faff;
    }
  }
</style>
