<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import YlTable from '@/components/YlTable/Index.vue';
import { fetchLogicInfo } from '@/hooks/request/useSurvey';

const route = useRoute();

// 从上级传递的 sn 号码
const sn = defineModel<string>('sn');
// sn 的获取方式，默认优先从上级传递的，如果没有尝试从 router 获取
sn.value = sn.value ?? (route.query.sn as string);
// 逻辑的相关信息数据
const { quota, random, cycle, loading } = fetchLogicInfo(sn.value);

const activeTab = ref('逻辑配额');

const tabs = computed(() => [
  {
    title: '逻辑配额',
    props: [
      { prop: 'question_title', label: '题号', width: 80 },
      { prop: 'text', label: '选项', width: 90 },
      { prop: 'sample_number', label: '样本量', width: 90 },
      { prop: 'percent', label: '进度', width: 90 }
    ],
    data: quota.value
  },
  {
    title: '随机题组配额',
    props: [
      { prop: 'groupTitle', label: '题组', width: 120 },
      { prop: 'group_info', label: '题组位置', width: 120 },
      { prop: 'sample_num', label: '样本量', width: 120 },
      { prop: 'precent', label: '进度', width: 120 }
    ],
    data: random.value
  },
  {
    title: '循环题组配额',
    props: [
      { prop: 'question_title', label: '关联题目', width: 150 },
      { prop: 'group_info', label: '题组', width: 100 },
      { prop: 'quota_num', label: '样本量', width: 80 },
      { prop: 'precent', label: '进度', width: 120 }
    ],
    data: cycle.value
  }
]);

// 自动计算是否有 card 区域，只显示有数据的标签页
const currentTabs = computed(() => {
  return tabs.value.filter((item) => {
    return item.data && item.data.length > 0;
  });
});

// 调试信息
const debug = ref(false);
</script>

<template>
  <van-cell v-if="currentTabs.length > 0" class="logic-info">
    <template #extra>
      <section v-loading="loading" style="width: 86vw">
        <!--  tabs 选项列表    -->
        <van-tabs v-model:active="activeTab">
          <van-tab v-for="tab in tabs" :key="tab.title" :name="tab.title">
            <template #title>
              <el-text size="small">{{ tab.title }}</el-text>
            </template>
          </van-tab>
        </van-tabs>
        <yl-table
          :data="currentTabs.find((tab) => tab.title === activeTab)?.data"
          :props="currentTabs.find((tab) => tab.title === activeTab)?.props"
          :emptyText="`此问卷未设置${activeTab}`"
        ></yl-table>
      </section>
    </template>
  </van-cell>
</template>

<style scoped lang="scss">
.logic-info {
  &::after {
    content: '';
    border: none;
    left: 0;
    width: 0;
  }
}
</style>
