<script setup>
import request from '~/utils/request';
import { getFullUrl } from '~/utils/helper';
// import CommonHeader from "@/components/CommonHeader/index.vue";;
import { ElMessage } from 'element-plus';

const props = defineProps({
  id: String
})

let loading = $ref(true)
let detailInfo = $ref({})
request({
  url: '/kzkt/ssyskc/detail',
  data: {
    ks_id: props.id
  }
}).then(res => {
  console.log('res :>> ', res);
  if (res.code === '1') {
    detailInfo = res.data.one_info
    loading = false
  } else {
    ElMessage.error(res.msg)
  }
}).catch(err => {
  ElMessage.error(err)
})


function getFileType(str) {
  if (str) {
    str = str.toLocaleLowerCase()
    if (str.endsWith('.pdf')) {
      return 'pdf'
    } else if (str.endsWith('.mp4')) {
      return 'mp4'
    } else if (str.endsWith('.ppt') || str.endsWith('.pptx')) {
      return 'office'
    }
  }
  return null
}
</script>

<template>
  <common-header />
  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">内容</div>
      <el-divider direction="vertical" />
      <div class="text-sm">
        <span class="text-hex-949494">直播课堂</span>
        <span class="text-hex-949494"> - 双师一生</span>
        <span> - 内容</span>
      </div>
    </div>
  </div>

  <div class="w-full flex items-center justify-center shadow h-60px bg-hex-fefefe">
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">{{ detailInfo.ks_name }}</div>
    </div>
  </div>


  <div class="w-full flex items-center justify-center mt-4">
    <div class="w-1400px flex flex-col">

      <div class="w-full h-730px mb-4 bg-light-500" v-loading="loading">
        <template v-if="!loading">
          <file-preview :url="detailInfo.ks_kj"></file-preview>
          <!-- <template v-if="getFileType(detailInfo.ks_kj) === 'ppt'">
            <iframe :src="`https://view.officeapps.live.com/op/view.aspx?src=${getFullUrl(detailInfo.ks_kj)}`"
              width='100%' height='100%' frameborder='0'></iframe>
          </template>
          <template v-else-if="getFileType(detailInfo.ks_kj) === 'pdf'">
            <object type="application/pdf" :data="getFullUrl(detailInfo.ks_kj)" class="w-full h-full"></object>
          </template>
          <template v-else-if="getFileType(detailInfo.ks_kj) === 'mp4'">
            <video class="w-full h-full" :src="getFullUrl(detailInfo.ks_kj)" controls></video>
          </template>
          <el-result v-else icon="error" title="错误信息" sub-title="文件格式不支持">
          </el-result> -->
        </template>
      </div>

      <!-- <div class="w-full flex justify-between items-center">
        <el-button type="primary" :icon="ArrowLeft" circle size="large" />

        <div class="flex-auto flex justify-start items-center">
          <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
            <div class="w-full flex-none overflow-hidden  rounded-xl">
              <img :src="i.img" alt="" class="w-full h-full">
            </div>
            <div class="p-2">
              {{  i.title  }}
            </div>
          </div>
        </div>

        <el-button type="primary" :icon="ArrowRight" circle size="large" />
      </div> -->

    </div>
  </div>
</template>

