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

// #region (constant)
const TABLE_KEY = 'xjj_id'
const URL_CUT = '/xdjx/jxjhgl_jsjxjh'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'team_id': string; // 适用学期编号
  'grade_name': string; // 适用年级名称
  'grade_id': string; // 适用年级编号
  'subject_id': string; // 适用学科编号
  'subject_name': string; // 适用学科名称
  'xjj_cjr': string; // 创建人
  'xjj_cjrq': string; // 创建日期
  'xjj_jhnr': string; // 计划内容
  'xjj_jhmc': string; // 计划名称
  'team_name': string; // 适用学期名称
  'xjj_fj'?: 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">
        <div>适用学期编号</div><div>{{detail_Data.team_id}}</div>
      </div>
      <div class="flex">
        <div>适用年级名称</div><div>{{detail_Data.grade_name}}</div>
      </div>
      <div class="flex">
        <div>适用年级编号</div><div>{{detail_Data.grade_id}}</div>
      </div>
      <div class="flex">
        <div>适用学科编号</div><div>{{detail_Data.subject_id}}</div>
      </div>
      <div class="flex">
        <div>适用学科名称</div><div>{{detail_Data.subject_name}}</div>
      </div>
      <div class="flex">
        <div>创建人</div><div>{{detail_Data.xjj_cjr}}</div>
      </div>
      <div class="flex">
        <div>创建日期</div><div>{{detail_Data.xjj_cjrq}}</div>
      </div>
      <div class="flex">
        <div>计划内容</div><div>{{detail_Data.xjj_jhnr}}</div>
      </div>
      <div class="flex">
        <div>计划名称</div><div>{{detail_Data.xjj_jhmc}}</div>
      </div>
      <div class="flex">
        <div>适用学期名称</div><div>{{detail_Data.team_name}}</div>
      </div>
    </template>
  </div>

</template> -->

<template>
  <div :loading="loading" class="flex flex-col h-full">
    <template v-if="detail_Data">
      <div class="flex flex-none">
        <!-- <div>计划名称</div> -->
        <div class="text-3xl">{{ detail_Data.xjj_jhmc }}</div>
      </div>
      <div class="flex text-gray-500 flex-none py-2">
        <div class="flex mr-30">
          <div>适用学期名称：</div>
          <div>{{ detail_Data.team_name }}</div>
        </div>
        <!-- <div class="flex">
            <div>适用学期编号</div>
            <div>{{detail_Data.team_id}}</div>
          </div> -->
        <div class="flex mr-30">
          <div>适用年级名称：</div>
          <div>{{ detail_Data.grade_name }}</div>
        </div>
        <!-- <div class="flex">
            <div>适用年级编号</div>
            <div>{{detail_Data.grade_id}}</div>
          </div> -->
        <!-- <div class="flex">
            <div>适用学科编号</div>
            <div>{{detail_Data.subject_id}}</div>
          </div> -->
        <div class="flex mr-30">
          <div>适用学科名称：</div>
          <div>{{ detail_Data.subject_name }}</div>
        </div>
        <!-- <div class="flex">
            <div>创建人</div>
            <div>{{detail_Data.xjj_cjr}}</div>
          </div> -->
        <!-- <div class="flex">
            <div>创建日期</div>
            <div>{{detail_Data.xjj_cjrq}}</div>
          </div> -->
      </div>
      <div class="flex mr-30">
        <div>附件：</div>
        <file-link :file="detail_Data.xjj_fj"></file-link>
      </div>

      <div class="flex flex-auto bg-gray-100 text-gray-600 p-4 text-sm">
        <!-- <div>计划内容</div> -->
        <div>{{ detail_Data.xjj_jhnr }}</div>
      </div>
    </template>
  </div>
</template>
