<script setup lang="ts">
import { ref } from "vue";
import request, { download } from '~/utils/request';

// #region (constant)
const TABLE_KEY = 'xkk_id'
const URL_CUT = '/xdjx/kcpzgl_kcpz'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'xkk_name': string; // 考试名称
  'xkk_kslx': string; // 考试类型
  'xkk_kc': string; // 考场
  'xkk_kc_json': string; // 考场JSON
  'xkk_ks': string; // 考生
  'xkk_ks_json': string; // 考生JSON
  'xkk_zkzqz': string; // 准考证前缀
  'xkk_sjkmjk_json': string; // 时间科目监考JSON
}
// #endregion

// #region (variable)
const loading = ref(true)
// #endregion

// #region (props)
const props = defineProps<{
  aid: string
}>()
// #endregion

function detailApi(_id: string) {
  return request({
    url: URL_CUT + '/detail',
    data: {
      [TABLE_KEY]: _id,
    }
  })
}

const detail_Data = ref<TYPE_TABLE_FIELD>()

// #region (page init)
async function init() {
  const res = await detailApi(props.aid)
  detail_Data.value = (res.data.one_info)
  info.value = JSON.parse(detail_Data.value?.xkk_sjkmjk_json as string)
  const tempInfo: any = {
    ...detail_Data.value,
    xkk_kc: (detail_Data.value?.xkk_kc as string).split(','),
    xkk_kc_json: (detail_Data.value?.xkk_kc_json as string).split(','),
    xkk_ks: (detail_Data.value?.xkk_ks as string).split(','),
    xkk_ks_json: (detail_Data.value?.xkk_ks_json as string).split(','),
    kc: [],
    ks: []
  }
  tempInfo.kc = tempInfo.xkk_kc.map((_: unknown, i: number) => ({ value: tempInfo.xkk_kc[i], label: tempInfo.xkk_kc_json[i] }))
  tempInfo.ks = tempInfo.xkk_ks.map((_: unknown, i: number) => ({ value: tempInfo.xkk_ks[i], label: tempInfo.xkk_ks_json[i] }))
  sessionStorage.setItem('ksxx', JSON.stringify(tempInfo))

  loading.value = false
}
init()
// #endregion

const info = ref()
</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">
      <div class="flex text-3xl">
        <!-- <div>考试名称</div> -->
        <div>{{ detail_Data.xkk_name }}</div>
      </div>
      <!-- <div class="flex">
        <div>考试类型</div>
        <div>{{ detail_Data.xkk_kslx }}</div>
      </div> -->
      <!-- <div class="flex">
        <div>考场</div>
        <div>{{ detail_Data.xkk_kc }}</div>
      </div> -->
      <div class="flex my-10">
        <div class="mr-6 flex-none">考场</div>
        <div>{{ detail_Data.xkk_kc_json.split(',').join(' , ') }}</div>
      </div>
      <!-- <div class="flex">
        <div>考生</div>
        <div>{{ detail_Data.xkk_ks }}</div>
      </div>
      <div class="flex">
        <div>考生JSON</div>
        <div>{{ detail_Data.xkk_ks_json }}</div>
      </div>
      <div class="flex">
        <div>准考证前缀</div>
        <div>{{ detail_Data.xkk_zkzqz }}</div>
      </div> -->
      <div class="flex">
        <div class="mr-6 flex-none">考试信息</div>
        <div class="flex-auto">
          <el-table :data="info">
            <el-table-column prop="kskm" label="考试科目" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="kssj" label="考试时间" width="auto" show-overflow-tooltip></el-table-column>
            <el-table-column prop="jkls" label="监考老师" width="auto" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
    </template>
  </div>

</template>

