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

// #region (constant)
const TABLE_KEY = 'xkj_id'
const URL_CUT = '/xdjx/kbgl_jskb'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'xkj_jsmc': string; // 教师名称
  'xkj_kbmc': string; // 课表名称
  'team_id': string; // 学期编号
  'team_name': string; // 学期名称
  'xkj_scr': string; // 上传人
  'xkj_kbxq_json': string; // 课表详情JSON
  'xxk_kblx': string; // 课表类型
  'xkj_xls': string; // 课表文件
  'xkj_jsbh': string; // 教师编号
  'xkj_img': string; // 课表图片
}
// #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)
  loading.value = false
}
init()
// #endregion

</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">

      <div class="flex text-2xl">
        <!-- <div>课表名称</div> -->
        <div>{{ detail_Data.xkj_kbmc }}</div>
      </div>
      <!-- <div class="flex">
        <div>教师名称</div>
        <div>{{ detail_Data.xkj_jsmc }}</div>
      </div>
      <div class="flex">
        <div>学期编号</div>
        <div>{{ detail_Data.team_id }}</div>
      </div>
      <div class="flex">
        <div>学期名称</div>
        <div>{{ detail_Data.team_name }}</div>
      </div>
      <div class="flex">
        <div>上传人</div>
        <div>{{ detail_Data.xkj_scr }}</div>
      </div>
      <div class="flex">
        <div>课表详情JSON</div>
        <div>{{ detail_Data.xkj_kbxq_json }}</div>
      </div>
      <div class="flex">
        <div>课表类型</div>
        <div>{{ detail_Data.xxk_kblx }}</div>
      </div>
      <div class="flex">
        <div>课表文件</div>
        <div>{{ detail_Data.xkj_xls }}</div>
      </div>
      <div class="flex">
        <div>教师编号</div>
        <div>{{ detail_Data.xkj_jsbh }}</div>
      </div>
      <div class="flex">
        <div>课表图片</div>
        <div>{{ detail_Data.xkj_img }}</div>
      </div> -->
       <div class="flex my-4">
        <div>课表文件：</div>
        <file-link :file="detail_Data.xkj_xls" />
      </div>

      <!-- <div>
        <img class="w-full" :src="handleImageUrl(detail_Data?.xkj_img)" alt="">
      </div> -->
      <!-- <div class="w-full flex-grow">
        <!~~ <img class="w-full" :src="handleImageUrl(detail_Data?.xkx_img)" alt=""> ~~>
        <iframe class="w-full h-700px"
          :src="`https://view.officeapps.live.com/op/view.aspx?src=${handleImageUrl(detail_Data.xkj_xls)}`"
          frameborder="0"></iframe>
      </div> -->
    </template>
  </div>

</template>
