<template>
  <ContentWrap>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>物资说明详情</span>
          <el-button link @click="goBack">
            <Icon icon="ep:back" class="mr-5px" /> 返回
          </el-button>
        </div>
      </template>

      <el-form
        ref="formRef"
        v-loading="loading"
        :model="formData"
        label-width="100px"
      >
        <el-form-item label="标题">
          <span>{{ formData.instructionsTitle }}</span>
        </el-form-item>
        <el-form-item label="物资类型">
          <span>{{ formData.materialsTypeName }}</span>
        </el-form-item>
        <el-form-item label="类型">
          <dict-tag :type="DICT_TYPE.FILE_TYPE" :value="formData.fileType" />
        </el-form-item>
        <el-form-item label="文件">
          <div v-if="formData.fileUrl">
            <div v-if="isVideo(formData.fileUrl)" class="video-container">
              <video :src="formData.fileUrl" width="100%" height="400" controls ></video>
            </div>
            <div v-if="isPdf(formData.fileUrl)" class="pdf-container">
              <embed
                :src="formData.fileUrl"
                width="100%"
                height="600"
                type="application/pdf"
              />
            </div>
          </div>
          <span v-else>-</span>
        </el-form-item>
        <el-form-item label="添加时间">
          <span>{{ formData.createTime }}</span>
        </el-form-item>
      </el-form>
    </el-card>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import * as InstructionsApi from '@/api/material/instructions/index'

defineOptions({ name: 'InstructionsDetail' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const route = useRoute() // 路由
const router = useRouter() // 路由

const loading = ref(true) // 加载中
const formData = ref({
  instructionsId: undefined,
  instructionsTitle: '',
  materialsTypeId: undefined,
  materialsTypeName: '',
  fileType: undefined,
  fileUrl: '',
  createTime: ''
})

/** 获取详情数据 */
const getDetail = async () => {
  loading.value = true
  try {
    const id = route.query.instructionsId
    if (!id) {
      message.error('参数错误')
      return
    }
    const data = await InstructionsApi.getInstructionsInfo(Number(id))
    formData.value = data
  } catch (error) {
    console.error('获取详情失败:', error)
    message.error('获取详情失败')
  } finally {
    loading.value = false
  }
}

/** 判断是否为视频 */
const isVideo = (url: string) => {
  return url && (url.endsWith('.mp4') || url.includes('mp4'))
}

/** 判断是否为PDF */
const isPdf = (url: string) => {
  return url && (url.endsWith('.pdf') || url.includes('pdf'))
}

/** 返回上一页 */
const goBack = () => {
  router.back()
}

/** 初始化 **/
onMounted(async () => {
  await getDetail()
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-container {
  max-width: 800px;
  margin: 0 auto;
}

.pdf-container {
  max-width: 1000px;
  margin: 0 auto;
}
</style>
