<template>
  <div class="app-container">
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" v-loading="formLoading" label-width="145px">
        <!-- 档案信息 -->
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>档案信息</span>
          </div>
          <!-- 卡片内容 -->
          <div>
            <el-row :gutter="2">
              <el-col :span="12">
                <el-form-item label="档案名称" prop="archivesName">
                  <el-input disabled v-model="formData.archivesName" placeholder="请输入档案名称"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="档案存放位置" prop="archivesPhysicsUrl">
                  <el-input disabled v-model="formData.archivesPhysicsUrl" placeholder="请输入档案存放位置"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2" v-if="activeTab === 'contract_type'">
              <el-col :span="12">
                <el-form-item label="签订日期" prop="signTime">
                  <el-date-picker disabled clearable v-model="formData.signTime" type="date" value-format="yyyy-MM-dd"
                                  placeholder="选择签订日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="到期日期" prop="expireTime">
                  <el-date-picker disabled clearable v-model="formData.expireTime" type="date" value-format="yyyy-MM-dd"
                                  placeholder="到期日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- 档案内容 -->
        <el-card class="box-card">
          <!-- 卡片头 -->
          <div slot="header" class="clearfix">
            <i class="el-icon-plus"/>
            <span>档案内容</span>
          </div>
          <!-- 卡片内容 -->
          <div class="card-content" style="display: flex; flex-direction: column; align-items: center;">
            <div v-for="(file, index) in formData.files" :key="index" class="file-item">
              <!-- 文件名 -->
              <div class="file-name" v-if="file.fileType !== 'file'">{{ file.fileName }}</div>

              <!-- 根据文件类型渲染不同的内容 -->
              <div v-if="file.fileType === 'image'" class="image-preview">
                <el-image
                  style="max-width: 100%; max-height: 100%"
                  :src="file.fileUrl"
                  :preview-src-list="file.fileUrl">
                </el-image>
              </div>
              <div v-else-if="file.fileType === 'video'" class="video-preview">
                <video :src="file.fileUrl" controls style="max-width: 100%; max-height: 100%;"></video>
              </div>
              <div v-else-if="file.fileType === 'audio'" class="audio-preview">
                <audio :src="file.fileUrl" controls style="max-width: 100%; max-height: 300px;"></audio>
              </div>
              <div v-else class="file-link">
                <a :href="file.fileUrl" target="_blank">{{ file.fileName }}</a>
              </div>
              <hr/>
            </div>
          </div>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ArchivesShow',
  data() {
    return {
      dialogTitle: null,
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        files: [
          {
            fileName: null,
            fileType: null,
            fileUrl: null
          }
        ]
      },
      activeTab: null,
      // 定义文件类型映射表
      fileTypeMap: {
        // 图片文件扩展名
        jpg: 'image',
        jpeg: 'image',
        png: 'image',
        gif: 'image',
        bmp: 'image',
        tif: 'image',
        tiff: 'image',
        svg: 'image',
        webp: 'image',

        // 视频文件扩展名
        mp4: 'video',
        avi: 'video',
        mkv: 'video',
        mov: 'video',
        flv: 'video',
        wmv: 'video',
        mpg: 'video',
        mpeg: 'video',
        m4v: 'video',

        // 音频文件扩展名
        mp3: 'audio',
        wav: 'audio',
        aac: 'audio',
        flac: 'audio',
        ogg: 'audio',
        m4a: 'audio',

        // 默认为普通文件
        default: 'file'
      }
    }
  },
  methods: {
    /** 打开弹窗 */
    async open(data) {
      this.formData = {
        ...data,
        files: this.buildFiles(data.archivesUrls)
      }
      this.activeTab = data.activeTab
      this.dialogTitle = '查看档案'
      this.dialogVisible = true
    },
    buildFiles(data) {
      return data.split(',').map(item => {
        return {
          fileName: item.split('|')[1],
          fileUrl: item.split('|')[0],
          fileType: this.fileTypeMap[item.split('|')[1].split('.').pop().toLowerCase()] || this.fileTypeMap.default
        }
      })

    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.file-item {
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}

.file-name {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.image-preview img,
.video-preview video,
.audio-preview audio {
  max-width: 100%;
  max-height: 300px;
}

.file-link {
  text-align: center;
}
</style>
