<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">{{detailForm.tz_kcbt}}详情</h3>
    </div>
    <div class="zbkcDetailContent">
      <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-item :class="item.class" v-for="(item, index) in formData" :key="index" :label="item.name + ':'" :prop="item.key">
          <img v-if="item.type=='img'" class="cover" :src="getFullUrl(detailForm[item.key])" alt="" />
          <div v-else>{{ detailForm[item.key] }}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { getFullUrl } from '~/utils/helper';
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const parentId = router.currentRoute.value.params.id;
if (parentId) {
  initDetailInfo();
}
let formData = ref([
  {
    name: "课程标题",
    key: "tz_kcbt",
  },
  {
    name: "所属单位",
    key: "tz_ssdw_mc",
  },
  {
    name: "责任教师姓名",
    key: "tz_zjrxm",
  },
  {
    name: "账号",
    key: "tz_zjr_user_name",
  },
  {
    name: "课程封面图",
    key: "tz_img",
    class: "col-span-full",
    type: "img"
  },
  {
    name: "年级",
    key: "tjzn_name",
  },
  {
    name: "学科",
    key: "tjzx_name",
  },
  {
    name: "册别",
    key: "tjzx_cb",
  },
  {
    name: "单元",
    key: "tjzx_dy",
  },
  {
    name: "直播课程开启时间",
    key: "tjzx_zbkqsj",
  },
  {
    name: "权限设置",
    key: "tjzx_qxsz",
  },
  {
    name: "课程简介",
    key: "tjzx_kcjj"
  }
]);
let detailForm = ref({});

async function initDetailInfo() {
  let { code, data } = await request({ url: "/txwx/zbkc/detail", data: { tz_id: parentId } });
  if (code == 1) {
    detailForm.value = data.one_info;
    detailForm.value.zbkckqsj = data.one_info.tjzx_zbkqsj + "~" + data.one_info.tjzx_zbjssj;
  }
}
</script>

<style lang="scss" scoped>
.zbkcDetailContent {
  width: 80%;
  min-width: 700px;
  margin: auto;
  :deep() {
    .el-form-item__content {
      line-height: 24px;
    }
  }
}
.cover {
  width: 220px;
  height: 124px;
}
</style>