<template>

  <div class="backinfo-container">
    <div class="headClass" style="">
      <h3>群体信息</h3>
      <el-button type="primary" v-if="showBut" :disabled="disabled" @click="ClickSave">保存</el-button>
    </div>
    <el-input v-model="qtbjxx" :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="fileList.length === 0" class="empty-file-list">暂无附件</div>
        <div v-else class="file-list">
          <div v-for="(file, index) in 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="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>
  </div>
</template>

<script setup>
import { ref ,watch} from "vue";
import { ElMessage } from 'element-plus';
import { Delete, Download } from '@element-plus/icons';
import { uploadMultipleFiles } from './fileUp'
import {tbGsxtZdqtUpdate} from '@/api/qt.js'
const props = defineProps({
  dataList: {
    type: Object,
    default: () => { },
  }, disabled: {
    type: Boolean,
    default: false
  },
  showBut: {
    type: Boolean,
    default: false
  },
})
const qtbjxx = ref('')
// 文件列表数据
const fileList = ref([])
watch(()=>props.dataList,(val)=>{
  if (val) {
    qtbjxx.value=val.qtBjzl
    fileList.value=val.qtFjZl?JSON.parse(val.qtFjZl):[]
  }
},{deep:true})

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

// 上传相关方法
const handleUploadRequest = async (options) => {
  try {
    // 调用uploadMultipleFiles进行文件上传
    const result = await uploadMultipleFiles(options.file, {
      uploadedFiles: fileList.value,
      fjIds: [], // 如果需要保存文件ID列表，可以在这里传递
      compressImage: null // 可选的图片压缩函数
    });
    // 更新文件列表，添加上传时间信息
    const index = fileList.value.findIndex(f => f.originalName === options.file.name);
    if (index !== -1) {
      fileList.value[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 = fileList.value.findIndex(f => f.name === uploadFile.name);
  if (index !== -1) {
    fileList.value.splice(index, 1);
  }
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(`最多只能上传 3 个文件`);
}
// 修改数据
const ClickSave = () => {
  const promes = {
    id: props.dataList.id,
    qtBjzl: qtbjxx.value,
    qtFjZl:fileList.value.length>0?JSON.stringify(fileList.value):null
  }
  tbGsxtZdqtUpdate(promes).then((res) => {
    ElMessage.success('修改成功')
  }).catch((err) => {
    ElMessage.error('修改失败')
  });
}
const throwData = () => {
  return new Promise((resolve) => {
    // 基本验证：确保背景信息不为空
    if (!qtbjxx.value.trim()) {
      throw new Error('请输入群体背景信息');
    }
    
    resolve({
      qtbjxx: qtbjxx.value,
      fileList: fileList.value
    });
  });
}
defineExpose({
  throwData
})
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.backinfo-container {
  padding: 10px;
}

.background-info-input {
  width: 100%;
  margin-bottom: 15px;
}

.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;
}

.headClass {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headClass::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background-color: #409eff;
}

h3 {
  margin: 0;
}
</style>
