<script setup lang="ts">
import { ref } from "vue";
import request, { download } from '~/utils/request';
import DetailBlock from './components/detail-block.vue';

// #region (constant)
const TABLE_KEY = 'xwk_id'
const URL_CUT = '/xdjy/wljy_kclb'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'xwk_kcmc': string; // 课程名称
  'xwk_kclx': string; // 课程类型
  'xwk_kclx_option_v': string; // 课程类型
  'xwk_kclx_option_n': string; // 课程类型
  
  'xwk_kt': string; // 课题
  'xwk_fqr': string; // 发起人
  'xwk_zt': string; // 状态
  'grade_id': string; // 年级编号
  'grade_name': string; // 年级名称
  'subject_id': string; // 学科编号
  'subject_name': string; // 学科名称
  'xwk_td': string; // 团队
  'xwk_sctp': string; // 上传图片
  'xwk_qtfj': string; // 其他附件
  'xwk_content': 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


const detailBlock_Ref = ref()
const handleStartClass = () => {
  detailBlock_Ref.value.add()
}
</script>

<template>
  <div :loading="loading">
    <template v-if="detail_Data">
      <div class="relative">
        <el-button class="absolute top-2px right-2px" size="default" @click="handleStartClass" type="success">开课</el-button>

        <div class="flex text-3xl">
          <!-- <div>课程名称</div> -->
          <div>{{ detail_Data.xwk_kcmc }}</div>
        </div>
        <div class="flex text-gray-500 justify-between flex-wrap mt-2">
          <div class="flex">
            <div>课程类型：</div>
            <div>{{ detail_Data.xwk_kclx_option_n }}</div>
          </div>


          <!-- <div class="flex">
            <div>状态</div>
            <div>{{ detail_Data.xwk_zt }}</div>
          </div> -->
          <!-- <div class="flex">
            <div>年级编号</div>
            <div>{{ detail_Data.grade_id }}</div>
          </div> -->
          <div class="flex">
            <div>年级名称：</div>
            <div>{{ detail_Data.grade_name }}</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 text-gray-500">
            <div>发起人：</div>
            <div>{{ detail_Data.xwk_fqr }}</div>
          </div>
        </div>

        <div class="flex text-gray-500">
          <div>课题：</div>
          <div>{{ detail_Data.xwk_kt }}</div>
        </div>

        <div class="flex text-gray-500">
          <div>团队：</div>
          <div>{{ detail_Data.xwk_td }}</div>
        </div>
        <!-- <div class="flex">
          <div>上传图片</div>
          <div>{{ detail_Data.xwk_sctp }}</div>
        </div> -->
        <div class="flex text-gray-500">
          <div class="flex-none">附件：</div>
          <!-- <div>{{ detail_Data.xwk_qtfj }}</div> -->
          <file-link :file="detail_Data.xwk_qtfj"></file-link>
        </div>
        <div class="area h-200px">
          <!-- <div>内容</div> -->
          <div>{{ detail_Data.xwk_content }}</div>
        </div>
      </div>
      <div class="divider"></div>
      <detail-block ref="detailBlock_Ref" :aid="aid" :info="detail_Data"></detail-block>
    </template>
  </div>

</template>
