<template>
    <!-- 预览文件 -->
    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
               :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
      <div style="text-align:center">
        <!-- 图片预览 -->
        <template v-if="isImage">
          <el-image
            :src="fileUrl"
            :preview-src-list="previewList"
            fit="contain"
            style="max-width:100%;max-height:70vh"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
  
        <!-- PDF 预览 -->
        <template v-else>
          <pdf :src="fileUrl" style="width:100%;height:70vh" />
        </template>
      </div>
    </el-dialog>
  </template>
<script>
import pdf from 'vue-pdf'

export default {
  name: 'ViewFile',
  props: ['width','hight','dataForm','title','disabled','isAdd','rowData','projectId'],
  data() {
    return {
      dialogVisible: true,
      lDialog: this.width > 500 ? "w700" : "w500",
      fileUrl: '',           // 实际文件地址
      fileName: '',          // 用于从文件名判断类型
      previewList: []        // 预览组（可只放当前图片）
    }
  },
  computed: {
    isImage() {
      // 允许的图片类型
      const exts = ['.jpg','.jpeg','.png','.gif','.bmp','.webp']
      const url = (this.fileUrl || '').toLowerCase()
      const name = (this.fileName || '').toLowerCase()
      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
    }
  },
  created() {
    // 从 rowData 或 dataForm 里取文件信息（根据你现有数据结构调整）
    // 例如：
    this.fileUrl = this.rowData?.fileUrl || this.dataForm?.fileUrl || ''
    this.fileName = this.rowData?.fileName || this.dataForm?.fileName || ''
    // 预览组（如果你有多张，可放数组；没有就放当前一张）
    if (this.isImage && this.fileUrl) {
      this.previewList = [this.fileUrl]
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    }
  },
  components: { pdf }
}
</script>
<style lang="scss">
.w700 .el-dialog {
    width: 700px;
    height: 800px;
}

.w500 .el-dialog {
    width: 500px;
    height: 800px;
}

.w500 .el-dialog__header,
.w700 .el-dialog__header {
    // background: #eeeeee;

    .el-dialog__title {
        font-size: 16px;
    }
}

.yxq .el-range-separator {
    margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
    width: 260px;
}

.form-item {
    width: 100%;
}

.select-style {
    display: flex;
    justify-content: space-between;
}
.image-slot {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 24px;
}
</style>