<template>
  <PageWrapper>
    <a-card class="proCard tabsCard">
      <a-tabs v-model:activeKey="activeName" v-if="tabData.length > 0">
        <a-tab-pane :key="item.configName" :tab="item.configName" v-for="(item, index) in tabData">
          <BasicSetting
            :dataList="item.dataList"
            v-if="activeName == item.configName"
            @success="getReshTabData"
            :activeName="activeName"
          />
        </a-tab-pane>
      </a-tabs>
    </a-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([]);

  /**
   * 获取TAB数据
   * @param name 参数
   */
  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;
  };

  /**
   * 刷新TAB数据
   */
  const getReshTabData = (name) => {
    getTabData(name);
  };

  /**
   * 钩子函数
   */
  onMounted(() => {
    getTabData();
  });
</script>
<style lang="less" 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>
