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

// #region (constant)
const TABLE_KEY = 'xqz_id'
const URL_CUT = '/xdjy/qjygl_zyxxlb'
// #endregion

// #region (type)
type TYPE_TABLE_FIELD = {
  [TABLE_KEY]: string;
  'xqz_zymc': string; // 资源名称
  'xqz_zylx': string; // 资源类型
  'xqz_zylx_option_k': string; // 资源类型
  'xqz_zylx_option_n': string; // 资源类型
  'xqz_zydx': string; // 资源大小
  'xqz_scr': string; // 上传人
  'xqz_scsj': string; // 上传时间
  'xqz_zypf': string; // 资源评分
  'xqz_pfbz': string; // 评分备注
  'xqz_nr': string; // 内容
  'xqz_qtfj': string; // 其他附件
  'grade_id': string; // 年级编号
  'grade_name': string; // 年级名称
  'subject_id': string; // 学科编号
  'subject_name': 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-3xl">
        <!-- <div>资源名称</div> -->
        <div>{{ detail_Data.xqz_zymc }}</div>
      </div>
      <div class="flex text-gray-500 justify-between flex-wrap py-2">
        <!-- <div class="flex">
        <div>年级编号</div>
        <div>{{detail_Data.grade_id}}</div>
      </div> -->
        <div class="flex flex-none">
          <div>年级名称：</div>
          <div>{{ detail_Data.grade_name }}</div>
        </div>
        <!-- <div class="flex">
        <div>学科编号</div>
        <div>{{detail_Data.subject_id}}</div>
      </div> -->
        <div class="flex flex-none">
          <div>学科：</div>
          <div>{{ detail_Data.subject_name }}</div>
        </div>
        <div class="flex flex-none">
          <div>资源类型：</div>
          <div>{{ detail_Data.xqz_zylx_option_n }}</div>
        </div>
        <!-- <div class="flex">
        <div>资源大小</div>
        <div>{{detail_Data.xqz_zydx}}</div>
      </div> -->
        <div class="flex flex-none">
          <div>上传人：</div>
          <div>{{ detail_Data.xqz_scr }}</div>
        </div>
        <div class="flex flex-none">
          <div>上传时间：</div>
          <div>{{ detail_Data.xqz_scsj }}</div>
        </div>
      </div>

      <div class="flex text-gray-500">
        <div class="flex-none">附件：</div>
        <!-- <div>{{ detail_Data.xqz_qtfj }}</div> -->
        <file-link :file="detail_Data.xqz_qtfj"></file-link>
      </div>
      <div class="flex bg-gray-100 text-gray-600 my-2 p-4 text-sm h-300px overflow-auto">
        <!-- <div>内容</div> -->
        <div>{{ detail_Data.xqz_nr }}</div>
      </div>

      <!-- <div class="text-xl">资源评价</div> -->
      <div class="flex flex-col text-gray-500" v-if="detail_Data.xqz_pfbz">
        <div class="flex items-center">
          <div>资源评分：</div>
          <!-- <div>{{ detail_Data.xqz_zypf }}</div> -->
          <str-to-num v-model="detail_Data.xqz_zypf">
            <template #default="{ value }">
              <el-rate :model-value="value" disabled />
            </template>
          </str-to-num>
        </div>
        <div class="flex">
          <div>评分备注：</div>
          <div>{{ detail_Data.xqz_pfbz }}</div>
        </div>
      </div>
    </template>
  </div>

</template>

