<template>
  <div class="box-border bg-white m-4 py-4 rounded-6px overflow-auto" style="height: calc(100% - 48px - 10px - 1rem);">
    <el-scrollbar class="px-4" view-class="h-full">
      <div class="title ml-4 mb-4">{{ title }}</div>
      <div class="jtjyDetailContent">
        <el-form class="grid grid-cols-2" label-position="right" label-width="130px" :model="ruleForm">
          <el-form-item :class="item.class" v-for="(item, index) in formData" :key="index" :label="item.name+':'">
            <div v-if="!item.type">{{ ruleForm[item.key] }}</div>
            <img v-if="item.type=='img'" class="cover" :src="getFullUrl(ruleForm[item.key])" alt="" />
            <div v-if="item.type=='html'" v-html="ruleForm[item.key]"></div>
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { getFullUrl } from '~/utils/helper';
import { useRouter } from "vue-router";
const router = useRouter();
const parentId = router.currentRoute.value.params.id;
if (parentId) {
  initDetailInfo();
}

const title = ref("");
const formData = ref([
  {
    name: "课程名称",
    key: "tjk_mc",
    class: "col-span-full"
  },
  {
    name: "课程图片",
    key: "tjk_img",
    class: "col-span-full",
    type: "img"
  },
  {
    name: "课程标签",
    key: "tjk_tag"
  },
  {
    name: "课程关键字",
    key: "tjk_kcgjz"
  },
  {
    name: "责任教师",
    key: "tjk_zrjsmc"
  },
  {
    name: "教师机构名称",
    key: "tjk_zrjgmc"
  },
  {
    name: "课程简介",
    key: "tjk_brief",
    class: "col-span-full",
    type: "html"
  },
  {
    name: "年级",
    key: "tjzn_name"
  },
  {
    name: "学科分类",
    key: "tjzx_name"
  },
  {
    name: "课程排序",
    key: "tjk_sort"
  }
])

const ruleForm = ref({});
async function initDetailInfo() {
  let { code, data } = await request({ url: "/txwx/jtjy_kc/detail", data: { tjk_id: parentId } });
  if (code == 1) {
    title.value = data.one_info.tjk_mc + "详情";
    ruleForm.value = data.one_info;
  }
}
</script>

<style lang="scss" scoped>
@use "~/styles/scroll.scss";
.title {
  font-size: 16px;
  font-weight: 400;
  color: var(--el-color-primary);
  line-height: 22px;
}
.jtjyDetailContent {
  width: 80%;
  min-width: 700px;
  margin: auto;
  :deep() {
    .el-form-item__content {
      line-height: 24px;
    }
  }
}
.cover {
  width: 220px;
  height: 124px;
}
</style>