<template>
  <div class="uploadContainer">
    <CardOne title="材料信息">
      <template #content>
        <el-table v-loading="loading" :data="fileTableList" boder>
          <el-table-column label="序号" type="index" width="55" />
          <el-table-column label="资料人" align="center" prop="dataPerson" width="200">
            <template #default="scope">
              <dict-tag :options="fetchDictData('oss_data_person')" :value="scope.row.dataPerson" />
            </template>
          </el-table-column>

          <el-table-column label="资料类型" align="center" prop="dataType" width="200">
            <template #default="scope">
              <dict-tag :options="fetchDictData('oss_data_type')" :value="scope.row.dataType" />
            </template>
          </el-table-column>
          <el-table-column label="注意事项" align="center" prop="precautions" />
          <el-table-column
            label="上传状态"
            align="center"
            prop="status"
            v-if="fileTableList.length > 0 && fileTableList[0].relObjectMaterialBizId"
          >
            <template #default="scope">
              <span v-if="scope.row.status === 1">已上传</span>
              <span v-if="scope.row.status === 0" style="color: red">待上传</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="180"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template #default="scope">
              <!-- <el-button type="primary" link @click="downloadFile(scope.row)">下载</el-button> -->
              <el-button
                type="primary"
                link
                @click="handleUploadFile(scope.row)"
                v-if="scope.row.fileBizIdList.length == 0"
              >
                上传
              </el-button>
              <el-button
                v-if="props.pageSource !== 'policyList' && scope.row.fileBizIdList.length > 0"
                type="primary"
                link
                @click="handleUpdate(scope.row)"
                >查看</el-button
              >
              <el-button
                v-if="props.pageSource !== 'policyList'"
                type="danger"
                link
                @click="handleDetele(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </CardOne>

    <CommonDialog
      dialogTitle="上传附件"
      cancleText="取消"
      confirmText="确认"
      dialogWidth="70%"
      :openDialog="editVisible"
      @close="editVisible = false"
      @confirm="handleSubmitUpload"
      :showClose="true"
    >
      <div class="dialogBox">
        <div class="dialogLeft">
          <div class="fileUploadBox">
            <el-upload
              :action="uploadImgUrl"
              :headers="headers"
              multiple
              :limit="limit"
              :show-file-list="false"
              :on-exceed="handleExceed"
              :on-success="uploadSuccess"
              :before-upload="handleBeforeUpload"
            >
              <div class="uploadBox">
                <el-icon size="20"><DocumentAdd /></el-icon>
                <div class="file">选择文件</div>
              </div>
            </el-upload>
          </div>
          <div class="tip">(支持Word,Excel,PDF,图片格式)</div>
        </div>
        <div class="dialogRight">
          <div
            v-if="uploadedFiles.length === 0"
            style="color: #999; padding: 20px; text-align: center"
          >
            暂无上传文件
          </div>
          <el-scrollbar max-height="300px">
            <div
              v-for="(file, index) in uploadedFiles"
              :key="file.fileBizId"
              class="uploaded-file-item"
            >
              <div class="fileName">{{ file.originalName }}</div>
              <el-icon color="red" size="18" @click="removeUploadedFile(file, index)"
                ><Delete
              /></el-icon>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </CommonDialog>
    <el-dialog v-model="imageViewerVisible" title="图片预览" width="60%">
      <div style="text-align: center">
        <el-image :src="imageUrl" fit="contain" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="FileUpload">
import CommonDialog from '@/components/commonDialog'
import CardOne from '@/components/formCard/cardOne'
import { getToken } from '@/utils/auth'
import { addFile, getAppointmentFile, delFile, editAppointmentFile } from '@/api/sign/appointment'
import useDictStore from '@/store/modules/dict'
import {
  uploadMaterialList,
  delUploadFile,
  uploadRelObjectMaterialList,
  uploadOssFileList
} from '@/api/common'
const props = defineProps({
  activeName: { type: String, default: '' }, //tab名称
  idsObj: { type: Object, default: () => ({}) }, //父组件传递过来的id对象
  pageSource: { type: String, default: '' } //页面来源
})

const dictStore = useDictStore() //获取字典数据
const { proxy } = getCurrentInstance()
const editVisible = ref(false)
const loading = ref(true)
const total = ref(0)
const fileTableList = ref([])
const limit = ref(10)
const fileSize = ref(10)
const headers = ref({ Authorization: 'Bearer ' + getToken() })
const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + '/oss/api/oss/upload') // 上传的服务器地址
// 图片查看相关状态
const imageViewerVisible = ref(false)
const imageUrl = ref('')
const tempFileTableList = ref([])
const data = reactive({
  form: {},
  queryParams: {
    objectType: 'appointment'
  }
})

const { queryParams, form } = toRefs(data)
// 新增：用于存储已上传成功的文件列表
const uploadedFiles = ref([])
const currentUploadRow = ref([])
const handleSubmitUpload = () => {
  if (uploadedFiles.value.length > 0) {
    fileTableList.value.forEach(item => {
      if (item.materialBizId == currentUploadRow.value.materialBizId) {
        item.fileBizIdList = JSON.parse(JSON.stringify(uploadedFiles.value))
      }
    })
  }
  editVisible.value = false
}
// 获取字典数据
const fetchDictData = dictType => {
  let options = []
  try {
    dictStore.dictTypeLists.forEach(item => {
      if (item.dictType == 'sys_no_yes') {
        item.dictItemList.forEach(item2 => {
          item2.value = String(item2.itemValue)
        })
      }
      if (item.dictType == dictType) {
        options = item.dictItemList
      }
    })
    return options
  } catch (error) {
    console.error('获取字典数据失败:', error)
    return []
  }
}
// 重置上传列表（比如关闭弹窗时清空）
const resetUploadedList = () => {
  uploadedFiles.value = []
}
const handleUploadFile = row => {
  currentUploadRow.value = JSON.parse(JSON.stringify(row))
  editVisible.value = true
}

const handleDetele = row => {
  proxy.$modal
    .confirm('是否确认删除此行数据？')
    .then(function () {
      if (row.relObjectMaterialBizId) {
        return delMaterial(row.relObjectMaterialBizId)
      } else {
        fileTableList.value.splice(row.index, 1)
      }
    })
    .then(res => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess('删除成功')
        getFileList()
      }
    })
    .catch(() => {})
}
const isImageFile = fileName => {
  return /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName || '')
}
const handleUpdate = row => {
  currentUploadRow.value = JSON.parse(JSON.stringify(row))

  if (row.relObjectMaterialBizId) {
    try {
      uploadOssFileList({ objectBizId: row.relObjectMaterialBizId }).then(response => {
        uploadedFiles.value = response.data
        editVisible.value = true
      })
    } catch (error) {
      uploadedFiles.value = []
      proxy.$message.error('文件获取失败')
    }
  } else {
    editVisible.value = true
    uploadedFiles.value = JSON.parse(JSON.stringify(row.fileBizIdList))
  }
}
const handleView = row => {
  imageUrl.value = row.fileUrl
  imageViewerVisible.value = true
}
const downloadFile = row => {
  // 创建隐藏的下载链接
  const link = document.createElement('a')
  link.href = row.fileUrl
  link.target = '_blank' // 新窗口打开

  // 设置下载文件名（重要）
  // 从URL中提取文件名，或者使用返回的文件名
  const fileName = row.fileName
  link.download = fileName

  // 触发下载
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 上传前loading加载
function handleBeforeUpload(file) {
  // if (file.name.includes(',')) {
  //   proxy.$modal.msgError('文件名不正确，不能包含英文逗号!')
  //   return false
  // }
  const isLt = file.size / 1024 / 1024 < fileSize.value
  if (!isLt) {
    proxy.$modal.msgError(`上传文件大小不能超过 ${fileSize.value} MB!`)
    return false
  }
  // proxy.$modal.loading('正在上传文件，请稍候...')
}
// 文件个数超出
function handleExceed() {
  proxy.$modal.msgError(`一次只能上传${limit.value}个文件!`)
}
// 文件上传成功回调
const uploadSuccess = (res, file, fileList) => {
  console.log('上传成功', res, file)
  if (res.code === 200) {
    // 构造前端使用的文件对象（保留原始 file 信息 + 后端返回的 url 等）
    const uploadedFile = {
      fileBizId: res.data.fileBizId, // 用于唯一标识
      originalName: res.data.originalName || file.name,
      url: res.data.url,
      size: file.size,
      raw: file.raw // 原始 File 对象（如需后续操作）
    }
    uploadedFiles.value.push(uploadedFile)
    proxy.$message.success('文件上传成功')
  } else {
    proxy.$message.error(res.msg || '上传失败')
  }
}

// 删除已上传的文件（仅从列表移除，不调用后端删除）
const removeUploadedFile = (file, index) => {
  try {
    delUploadFile(file.fileBizId).then(response => {
      uploadedFiles.value.splice(index, 1)
    })
  } catch (error) {
    proxy.$message.error('文件删除失败')
  }
}
const getFileList = () => {
  loading.value = true
  try {
    if (!props.idsObj.appointmentBizId) {
      uploadMaterialList(queryParams.value).then(response => {
        fileTableList.value = response.data
        if (fileTableList.value.length > 0) {
          fileTableList.value.forEach(item => {
            item.fileBizIdList = []
          })
        }
        loading.value = false
      })
    } else {
      let obj = {
        objectType: 'appointment',
        objectBizId: props.idsObj.appointmentBizId
      }
      uploadRelObjectMaterialList(obj).then(response => {
        fileTableList.value = response.data
        loading.value = false
      })
    }
    if (tempFileTableList.value.length > 0) {
      fileTableList.value = JSON.parse(JSON.stringify(tempFileTableList.value))
    }
  } catch (error) {
    fileTableList.value = []
  } finally {
    loading.value = false
  }
}
const handleFormValues = () => {
  let submitData = []
  fileTableList.value.forEach(item => {
    if (item.fileBizIdList.length > 0) {
      submitData.push({
        materialBizId: item.materialBizId,
        fileBizIdList: item.fileBizIdList.map(item => item.fileBizId)
      })
    }
  })
  return submitData
}
// 关闭弹窗时清空已上传列表
watch(editVisible, newVal => {
  if (!newVal) {
    resetUploadedList()
  }
})
watch(
  () => props.activeName,
  newVal => {
    tempFileTableList.value = JSON.parse(JSON.stringify(fileTableList.value))
    if (newVal === 'accessories') {
      getFileList()
    }
  }
)
// 暴露给父组件
defineExpose({
  handleFormValues
})
</script>
<style lang="scss" scoped>
.uploadContainer {
  padding-left: 10px;
  padding-top: 10px;
}
.fileUploadBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  border: 1px dashed #dcdfe6;
  height: 200px;
}
.uploadBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  .file {
    font-size: 14px;
    margin-top: 10px;
    color: #409eff;
  }
}
.tip {
  font-size: 14px;
  color: #909399;
  margin: 10px 0 20px 0;
}
.dialogBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.dialogLeft {
  width: 40%;
}
.dialogRight {
  width: 55%;
}
.uploaded-file-item {
  width: 100%;
  background: rgba(247, 248, 250, 1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
}
</style>
