<template>
  <el-dialog :title="titleValue" width="800px" :model-value="modelValue" append-to-body @close="closed">
    <el-input v-model="sqnrData.ypnr" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入研判记录"
      class="background-info-input" :disabled="disabled"/>

    <!-- 文件列表区域 -->
    <div class="file-attachment-section">
      <div class="section-title">相关附件</div>
      <div class="file-list-container">
        <div v-if="sqnrData.fileList.length === 0" class="empty-file-list">暂无附件</div>
        <div v-else class="file-list">
          <div v-for="(file, index) in sqnrData.fileList" :key="index" class="file-item">
            <div class="file-info">
              <span class="file-name">{{ file.originalName }}</span>
              <span class="file-time">{{ file.uploadTime }}</span>
            </div>
            <div class="file-actions">
              <el-button type="text" size="small" @click="downloadFile(file)" title="下载文件" :disabled="disabled">
                <el-icon>
                  <Download />
                </el-icon>
              </el-button>
              <el-button type="text" size="small" @click="deleteFile(index)" title="删除文件" class="delete-btn" :disabled="disabled">
                <el-icon>
                  <Delete />
                </el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 上传按钮区域 -->
      <div class="upload-btn-container">
        <el-upload v-model:file-list="sqnrData.fileList" class="upload-demo" :show-file-list="false" multiple
          :http-request="handleUploadRequest" :on-remove="handleRemove" :limit="3" :on-exceed="handleExceed">
          <el-button type="primary" :disabled="disabled">上传文件</el-button >
        </el-upload>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive, watch, getCurrentInstance } from "vue";
import { generateRandom10Digits } from '@/utils/tools'
import { uploadMultipleFiles } from '../model/fileUp'
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  titleValue: {
    type: String,
    default: "研判记录"
  },
  data: {
    type: Object,
    default: () => { }
  }
});
const emits = defineEmits(["update:modelValue", "comfirm"]);
// 文件列表数据
const sqnrData = reactive({
  ypnr: "",
  id: "",
  fileList:[]
})
const closed = () => {
  sqnrData.ypnr = ''
  sqnrData.id = ''
  emits("update:modelValue", false);

};
const onComfirm = () => {
  if (!sqnrData.ypnr) {
    proxy.$message.error('请输入研判内容')
    return
  }
  emits("comfirm", {  id: sqnrData.id ? sqnrData.id : generateRandom10Digits(),...sqnrData });
  emits("update:modelValue", false);
}
watch(() => props.data, (val) => {
  if (val) {
    sqnrData.ypnr = val.ypnr
    sqnrData.id = val.id
    sqnrData.fileList = val.fj
  }
})


// 下载文件
const downloadFile = (file) => {
  // 实际项目中，这里应该调用下载API
  console.log('下载文件:', file.name)
  // 示例：window.open(file.url)
}
// 删除文件
const deleteFile = (index) => {
  // 实际项目中，这里应该先调用删除API，成功后再从列表中移除
  sqnrData.fileList.splice(index, 1)
  ElMessage.success('文件已删除')
}

// 上传相关方法
const handleUploadRequest = async (options) => {
  try {
    // 调用uploadMultipleFiles进行文件上传
    const result = await uploadMultipleFiles(options.file, {
      uploadedFiles: sqnrData.fileList,
      fjIds: [], // 如果需要保存文件ID列表，可以在这里传递
      compressImage: null // 可选的图片压缩函数
    });
    // 更新文件列表，添加上传时间信息
    const index = sqnrData.fileList.findIndex(f => f.originalName === options.file.name);
    if (index !== -1) {
      sqnrData.fileList[index].uploadTime = new Date().toLocaleString('zh-CN');
    }
    // 调用成功回调
    if (options.onSuccess) {
      options.onSuccess(result);
    }
  } catch (error) {
    console.error('文件上传失败:', error);
    // 调用失败回调
    if (options.onError) {
      options.onError(error);
    }
  }
}

const handleRemove = (uploadFile, uploadFiles) => {
  // 实际项目中，这里应该先调用删除API，成功后再从列表中移除
  const index = sqnrData.fileList.findIndex(f => f.name === uploadFile.name);
  if (index !== -1) {
    sqnrData.fileList.splice(index, 1);
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}

.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}

.file-attachment-section {
  margin-top: 15px;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}

.file-list-container {
  max-height: 100px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #ffffff;
  margin-bottom: 10px;
}

/* 自定义滚动条样式 */
.file-list-container::-webkit-scrollbar {
  width: 6px;
}

.file-list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.file-list-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.file-list-container::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

.empty-file-list {
  padding: 20px;
  text-align: center;
  color: #909399;
  font-size: 12px;
}

.file-list {
  padding: 5px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 2px;
  background-color: #f8f9fa;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.file-item:hover {
  background-color: #e6f7ff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.file-name {
  flex: 1;
  font-size: 12px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 11px;
  color: #909399;
  min-width: 60px;
}

.file-time {
  font-size: 11px;
  color: #909399;
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
}

.file-actions .el-button {
  padding: 0 5px;
  margin: 0;
  color: #606266;
  transition: color 0.3s ease;
}

.file-actions .el-button:hover {
  color: #409eff;
}

.delete-btn:hover {
  color: #f56c6c !important;
}

.upload-btn-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>
