<template>
  <div>
    <el-form class="mx-30px" ref="ruleFormRef" label-position="right" label-width="100px" :model="ruleForm">
      <div class="grid grid-cols-2 gap-x-10">
        <el-form-item label="课时名称:" prop="tzk_ksmc">
          <div>第{{ dealFigureToChinese(chapterIndex+1) }}课时：{{ ruleForm.tzk_ksmc }}</div>
        </el-form-item>
        <el-form-item label="姓名:" prop="tzk_xm">
          <div>{{ ruleForm.tzk_xm }}</div>
        </el-form-item>
        <el-form-item label="主讲人账号:" prop="tzk_zjr_user_name">
          <div>{{ ruleForm.tzk_zjr_user_name }}</div>
        </el-form-item>
        <el-form-item label="所属单位:" prop="tzk_ssdw_id">
          <div>{{ ruleForm.tzk_ssdw }}</div>
        </el-form-item>
      </div>
      <el-form-item label="课时封面图片:" prop="tzk_img">
        <img class="w-220px h-124px" :src="getFullUrl(ruleForm.tzk_img)" alt="" />
      </el-form-item>
      <div class="grid grid-cols-2 gap-x-10">
        <el-form-item label="直播开启时间:" prop="tzk_zbkqsj">
          <div>{{ ruleForm.tzk_zbkqsj }}</div>
        </el-form-item>
        <el-form-item label="直播结束时间:" prop="tzk_zbjssj">
          <div>{{ ruleForm.tzk_zbjssj }}</div>
        </el-form-item>
      </div>
      <div class="grid grid-cols-2 gap-x-10">
        <el-form-item label="课时导学案:">
          <div v-if="fileObj.ksdxaData.length==0" style="color: #aaa;">暂无课时导学案</div>
          <div v-else class="flex items-center space-x-2">
            <img class="w-16px" src="/images/file.png" alt="" />
            <div class="filename">{{ fileObj.ksdxaData[0]?.name }}</div>
            <el-button text type="primary" @click="linkTo(fileObj.ksdxaData[0]?.name, fileObj.ksdxaData[0].url)">查看</el-button>
          </div>
        </el-form-item>
        <el-form-item label="课时测试:">
          <div v-if="fileObj.kscsData.length==0" style="color: #aaa;">暂无课时测试</div>
          <div v-else class="flex items-center space-x-2">
            <img class="w-16px" src="/images/file.png" alt="" />
            <div class="filename">{{ fileObj.kscsData[0]?.name }}</div>
            <el-button text type="primary" @click="linkTo(fileObj.kscsData[0]?.name, fileObj.kscsData[0].url)">查看</el-button>
          </div>
        </el-form-item>
        <el-form-item label="其他附件:">
          <div v-if="fileObj.qtfjData.length==0" style="color: #aaa;">暂无其他附件</div>
          <div v-else class="flex items-center space-x-2">
            <img class="w-16px" src="/images/file.png" alt="" />
            <div class="filename">{{ fileObj.qtfjData[0]?.name }}</div>
            <el-button text type="primary" @click="linkTo(fileObj.qtfjData[0]?.name, fileObj.qtfjData[0].url)">查看</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="pt-20px pb-10px text-center">
      <el-button style="margin-left: 50px;" type="primary" @click="linkTo('查看回放', ruleForm.tzk_video_file)">查看回放</el-button>
    </div>

    <el-dialog width="80%" v-model="dialogVisible" :title="dialogTitle" destroy-on-close>
      <file-preview class="h-600px" :url="currentUrl"></file-preview>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Search, CircleCloseFilled } from "@element-plus/icons-vue"
import { dealFigureToChinese, getVideoDurationFormat2 } from "@/utils/common-util";
const props = defineProps({
  chapterIndex: Number,
  ruleForm: Object,
  fileObj: Object
})

const currentUrl = ref("");
const dialogTitle = ref("");
const dialogVisible = ref(false);
const linkTo = (name, url) => {
  dialogTitle.value = name;
  currentUrl.value = url;
  dialogVisible.value = true;
}
</script>

<style>
</style>