<template>
  <div class="bg-white rounded-md pb-10 h-screen">
    <div class="flex w-full px-15 py-4 justify-between">
      <h3 class="text-hex-00A3FF">{{ detailData.tx_mc }}详情</h3>
      <!-- <el-button type="primary" @click="backLink">返回</el-button> -->
    </div>
    <el-form
      style="height: calc(80% - 50px)"
      class="grid grid-cols-2 overflow-auto main text-black-600"
      ref="ruleFormRef"
      label-position="right"
      label-width="150px"
      :model="detailForm"
    >
      <!-- <el-form class="grid grid-cols-2" ref="ruleFormRef" label-position="right" label-width="90px" :model="detailForm"> -->
      <el-form-item label="名称:" class="col-span-full">
        {{ detailForm.tx_mc }}
      </el-form-item>
      <el-form-item label="资源封面:" class="col-span-full">
        <img
          class="w-228px h-129px"
          :src="getFullUrl(detailForm.tx_img)"
          alt=""
        />
      </el-form-item>
      <el-form-item label="资源封面（地址）:" class="col-span-full">
        {{ getFullUrl(detailForm.tx_img) }}
      </el-form-item>
      <el-form-item label="资源文件:" class="col-span-full">
        <img
          class="w-228px h-129px"
          :src="getFullUrl(detailForm.tx_file)"
          alt=""
        />
      </el-form-item>
      <el-form-item label="资源文件（地址）:" class="col-span-full">
        {{ getFullUrl(detailForm.tx_file) }}
      </el-form-item>
      <el-form-item label="年级:">
        {{ detailForm.tjzn_name }}
      </el-form-item>
      <el-form-item label="册别:">
        {{ detailForm.tx_cb }}
      </el-form-item>
      <el-form-item label="学科:">
        {{ detailForm.tjzx_xkmc }}
      </el-form-item>
      <el-form-item label="单元:">
        {{ detailForm.tx_dy }}
      </el-form-item>
      <el-form-item label="小节:" class="col-span-full">
        {{ detailForm.tx_xj }}
      </el-form-item>
      <el-form-item label="资源类型:">
        {{ detailForm.tx_zylx }}
      </el-form-item>
      <el-form-item label="资源格式:">
        {{ detailForm.tx_zygs }}
      </el-form-item>
      <el-form-item label="资源教师姓名:">
        {{ detailForm.tx_zyjsxm }}
      </el-form-item>
      <el-form-item label="描述:" class="col-span-full h-100px overflow-auto">
        <div v-html="detailForm.tx_ms"></div>
      </el-form-item>
      <el-form-item label="所属工作室:">
        {{ detailForm.tx_ssmcgzs_mc }}
      </el-form-item>
    </el-form>
    <!-- </el-form> -->
  </div>
</template>

  <script setup>
import { getFullUrl } from "~/utils/helper";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { xkzy_detail } from "./api";

let detailData = $ref({});

function backLink() {
  router.go(-1);
}
let detailForm = $ref({});
function initData() {
  const data = {
    tx_id: route.params.id,
  };

  xkzy_detail(data).then((res) => {
    if (res.code === "1") {
      detailData = res.data.one_info;
      detailForm = {
        tx_mc: detailData.tx_mc,
        tx_img: detailData.tx_img,
        tx_file: detailData.tx_file,
        tjzn_name: detailData.tjzn_name,
        tjzx_xkmc: detailData.tjzx_xkmc,
        tx_cb: detailData.tx_cb,
        tx_dy: detailData.tx_dy,
        tx_xj: detailData.tx_xj,
        tx_zylx: detailData.tx_zylx,
        tx_zygs: detailData.tx_zygs,
        tx_zyjsxm: detailData.tx_zyjsxm,
        tx_ms: detailData.tx_ms,
        tx_ssmcgzs_mc: detailData.tx_ssmcgzs_mc,
      };
    }
  });
}
initData();
</script>

  <style lang="scss" scoped>
.main {
  // width: 820px;
  margin: 0 150px;

  font-size: 14px;
  padding-right: 58px;

  span {
    display: inline-block;
    width: 160px;
    text-align: right;
  }
}
:deep() .el-form-item__content {
  align-items: flex-start;
}
</style>