<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%" class="shopsettlement-dialog">
    <el-upload
      ref="uploadRef"
      class="upload-demo"
      drag
      :action="api"
      multiple
      :headers="uploadHeaders"
      :data="data"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :accept="acceptType"
      :on-success="handleFileSuccess"
      :on-remove="handleRemove"
      :limit="1"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text"> 拖拽文件至此或者点击上传 </div>
      <!-- <template #tip>
      <div class="el-upload__tip">
        
      </div>
    </template> -->
    </el-upload>
    <!-- {{ errorList.length }} -->
    <div v-if="errorList.list.length" class="error-list">
      <el-alert title="导入失败" type="error" description="以下数据导入失败" show-icon />
    </div>
    <el-table v-if="errorList.list.length" :data="errorList.list" style="width: 100%">
      <el-table-column prop="accountName" label="账户名称"  />
      <el-table-column prop="accountNumber" label="银行账号" />
      <el-table-column prop="money" label="金额" >
        <template #default="scope">
          ￥{{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column prop="orderNO" label="回执单流水号" />
    
    </el-table>
  </Dialog>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import { UploadFilled } from '@element-plus/icons-vue'
import { getAccessToken, getTenantId } from '@/utils/auth'

import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
defineOptions({ name: 'ImportPayMent' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const uploadRef = ref<UploadInstance>()
const uploadList = ref<UploadUserFile[]>([])
const fileList = ref<UploadUserFile[]>([])
const uploadNumber = ref<number>(0)
const acceptType = '.pdf, .Pdf, .PDf' // 支持小写、大写或首字母大写的 PDF 文件
const api = ref(import.meta.env.VITE_BASE_URL + '/admin-api/distri/pt-settlement/import');
const errorList = reactive({
  list:[]
})
const data = reactive({
  id: undefined
})
const uploadHeaders = ref({
  Authorization: 'Bearer ' + getAccessToken(),
  'tenant-id': getTenantId()
})
// console.log(api.value)
function handleChange(file, fileList) {
  // 可以在这里处理文件变更的逻辑
}
function beforeUpload(file) {
  // 在文件上传前进行校验
  const isPDF =
    file.type === 'application/pdf' || acceptType.includes(file.name.slice(-4).toLowerCase())
  if (!isPDF) {
    message.error('只能上传 PDF 文件!')
  }
  return isPDF
}
function handleFileSuccess(res, file, fileList) {
  console.log(res)
  // 上传直接成功的情况
  if (res.code === 0 && res.data.length === 0) {
    message.success('上传成功')
    emit('success')
    const index = fileList.value.findIndex((item) => item.response?.data === res.data)
    fileList.value.splice(index, 1)
    uploadList.value.push({ name: res.data, url: res.data })
    if (uploadList.value.length == uploadNumber.value) {
      fileList.value.push(...uploadList.value)
      uploadList.value = []
      uploadNumber.value = 0
    }
    
    dialogVisible.value = false;
  }else if(res.code === 0 && res.data.length !== 0){
    // 上传部分成功
    message.error('部分转账失败，详情看列表')
    const index = fileList.indexOf(file);
    if (index !== -1) {
      fileList.splice(index, 1);
    }
    errorList.list = res.data;
    emit('success')
  }
  else {
    // 上传日期对不上等情况，直接删除重做
    message.error(res.msg);
    const index = fileList.indexOf(file);
    if (index !== -1) {
      fileList.splice(index, 1);
    }
    errorList.list = [];
    emit('success')
  }
}

// 删除上传文件
const handleRemove = (file) => {
  const findex = fileList.value.map((f) => f.name).indexOf(file.name)
  if (findex > -1) {
    fileList.value.splice(findex, 1)
    // emitUpdateModelValue()
  }
}
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const row = ref()
const merchantId = ref(0)
/** 打开弹窗 */
const open = (event, id, row) => {
  // console.log(id)
  dialogVisible.value = true
  dialogTitle.value = `导入${formatDate(row.createTime, 'YYYY年MM月DD日')}凭证`
  // row.value = event;
  data.id = row.id
  errorList.list  = []
  // console.log(data)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
</script>
