<template>
  <div class="bg-white rounded-md pb-10 overflow-auto" style="height: calc(100% - 48px - 1rem)">
    <el-scrollbar view-class="h-full">
      <div class="flex w-1000px pl-40 py-4 justify-between">
        <h3 class="text-blue-500">详情</h3>
        <el-button type="primary" @click="backLink">返回</el-button>
      </div>
      <div class="main text-black-600">
        <div class="flex justify-between">
          <div class="w-1/2"><span>名称：</span>{{ detailData.tz_mc }}</div>
          <div class="w-1/2 flex"><span>年级：</span>
            <div class="flex">
              <div class="mr-1" v-for="n in tjzn">{{ n.tjzn_njmc }}</div>
            </div>
          </div>
        </div>
        <div class="flex justify-between">
          <div class="w-1/2"><span>册别：</span>{{ detailData.tz_cb }}</div>
          <div class="w-1/2"><span>学科：</span>{{ detailData.tjzx_name }}</div>
        </div>
        <div class="flex justify-between">
          <div class="w-1/2"><span>单元：</span>{{ detailData.tz_dy }}</div>
          <div class="w-1/2"><span>小节：</span>{{ detailData.tz_xj }}</div>
        </div>
        <div class="w-1/2"><span>主讲用户：</span>{{ detailData.tz_zjyhmc }}</div>
        <div class="flex"><span>封面图片：</span><img class="w-30vw" v-if="detailData.tz_img"
            :src="getFullUrl(detailData.tz_img.split('|')[0])" alt="" /></div>
        <div class="flex" v-if="detailData.tz_img"><span>封面图片地址：</span>
          <div class="w-520px">{{ detailData.tz_img.split('|')[0] }}</div>
        </div>
        <div><span>点播次数：</span>{{ detailData.tz_dbcs }}</div>
        <div class="flex"><span>简介：</span>
          <div v-html="detailData.tz_jj"></div>
        </div>
        <div class="flex items-center"><span>视频：</span>
          <span v-if="detailData.tz_video_file">{{ detailData.tz_video_file.split('|')[1] }}</span>
          <el-icon v-if="detailData.tz_video_file" size="40px" color="#00a3ff" @click="videoDown" class="cursor-pointer">
            <VideoCamera />
          </el-icon>
        </div>
        <div class="flex" v-if="detailData.tz_video_file"><span>视频地址：</span>
            <div class="w-520px">{{ detailData.tz_video_file.split('|')[0] }}</div>
          </div>
        <div><span>所属名师工作室：</span>{{ detailData.tz_ssmsgzs_mc }}</div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import { VideoCamera } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
let https = window.GLOBAL_CONFIG.api
const route = useRoute();
const router = useRouter();
let detailData = $ref({});
let tjzn = $ref([]);
request({
  url: '/txwx/zyfd/detail',
  data: {
    tz_id: route.params.id,
  }
}).then(res => {
  if (res.code == '1') {
    detailData = res.data.one_info;
    tjzn = JSON.parse(res.data.one_info.tjzn_json)
  }
})
function videoDown() {
  window.open(getFullUrl(detailData.tz_video_file.split('|')[0]), '_blank')
}
function backLink() {
  router.go(-1);
}
</script>
<style lang="scss" scoped>
.main {
  width: 820px;
  margin: 0 auto;
  font-size: 14px;
  padding-right: 120px;

  >div {
    // height: 30px;
    margin: 15px 0;
  }

  span {
    display: inline-block;
    width: 160px;
    text-align: right;
  }
}</style>