<script setup lang="ts" name="CustomUpload">
import { ref, getCurrentInstance, computed, onMounted, watch } from 'vue'
import { getToken } from '@/utils/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { parseTime } from '@/utils/ruoyi'
import axios from 'axios'
// import { filePreview } from '@/api/preview'
const { proxy } = getCurrentInstance() as any
// <CustomUpload v-model:file-list="fileList"/>
// const fileList = ref([
//   {
//     name: 'food.jpeg',
//     fileSize: '23423',
//     fileType: 'img',
//     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
//     createTime: '2024-01-24 16:31'
//   },
//   {
//     name: 'food.jpeg',
//     fileSize: '23423',
//     fileType: 'img',
//     url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
//     createTime: '2024-01-24 16:31'
//   }
// ])

type IFileList = Array<any> | null | undefined
const emit = defineEmits<{
  'update:fileList': [fileList: IFileList],
  'onSuccess'
}>()
const props = withDefaults(defineProps<{
  fileList: IFileList
  buttonPermission?: Array<string>
  needType?: boolean
  needSize?: boolean
  needTime?:boolean
  needStatus?:boolean,
  acceptTypeList?:Array<string>
  limit?:number,
  prompt?:string,
  uploadType?:number,
  listShow?: boolean
}>(), {
  buttonPermission: () => ['upload', 'delete'],
  needType: true,
  needSize: true,
  needTime: true,
  needStatus: true,
  limit: 100,
  prompt: '点击或将文件拖拽到此处上传',
  uploadType: 1,
  listShow: false,
  // acceptTypeList: () => ['png', 'jpg', 'doc', 'docx', 'pdf']
})

const uploadFileUrl = (props.uploadType === 1 ? ref(import.meta.env.VITE_APP_BASE_API + '/core/dictionaryexcel/importfile') : ref(import.meta.env.VITE_APP_BASE_API + '/eo/TTenantContractlabelTemplateController/uploadTemporary')) // 上传文件服务器地址
const headers = ref({
  Token: getToken(),
  'from-source': 'platformUi',
  'Content-Type': 'mulipart/form-data'
})


// const FileList = ref<Array<any>>([])
const FileList = computed({
  get() {
    return props.fileList
  },
  set(val: any) {
    // console.log('fileList computed', val)
    emit('update:fileList', val)
  }
})


const uploadLoading = computed(() => {
  if (FileList.value != null && FileList.value.some(item => item.status === 'uploading')) {
    return true
  }
  return false
})

// const fileListlengthCompute = computed(() => {
//   return props.fileList.length
// })


// watch(() => props.fileList, (val: IFileList) => {
//   console.log('props.fileList', val)
//   if (!val) {
//     FileList.value = []
//     return
//   }
//   FileList.value = JSON.parse(JSON.stringify(props.fileList))
// }, { deep: true, immediate: true })


// watch(fileListlengthCompute, (val) => {
//   console.log(val)
//   if (val === 0) {
//     emit('update:fileList', [])
//     FileList.value = []
//   }
// }, { deep: true, immediate: true })


function updateFileList() {
  emit('onSuccess')
  // emit('update:fileList', FileList.value.filter(item => item.status === 'success'))
}

function beforeUpload(file) {
  console.log('beforeUpload', file)
  let type = file.name.split('.')
  type = type[type.length - 1]
  if (props.acceptTypeList.indexOf(type) >= 0) {
    const list = {}
    for (const key in file) {
      list[key] = file[key]
    }
    // status:uploading、success、error 文件上传状态
    // progress 文件上传进度
    FileList.value.push({ ...list, progress: 0, status: 'uploading' })

    // updateFileList()
    httpRequest(file, parms => {
      showProgress(list, parms)
    })
    // 阻止 el-upload的默认上传
    return false
  }
  proxy.$modal.msgError(`文件格式不正确, 请上传${props.acceptTypeList.join('/')}格式文件!`)
  return false


}

async function httpRequest(file, callback) {
  let formData = new FormData()
  formData.append('fileUpload', file)
  let progress = 0
  axios({
    headers: headers.value,
    method: 'post',
    url: uploadFileUrl.value,
    data: formData,
    onUploadProgress: progressEvent => { // 获取文件上传进度 axios自带的
      progress = (progressEvent.loaded / progressEvent.total * 100) | 0
      callback({ progress, status: 'uploading' })
    }
  }).then((res) => { // 成功状态
    // console.log('res', res)
    let data = res.data.data
    proxy.$emit('uploadSuccessCallback', data)
    if (props.uploadType === 1) {
      callback({ progress, status: 'success', url: data.url, id: '' })
    } else {
      callback({ progress, status: 'success', url: data.url, id: data.id })
      updateFileList()
    }

  }).catch(() => { // 失败状态
    callback({ progress, status: 'error' })
  })
}


function showProgress(file, parms) {

  const { progress, status, url } = parms
  const arr = [...FileList.value].map(items => {
    if (items.uid === file.uid) {
      items.progress = progress
      items.status = status
      items.url = url
      items.fileType = file.type
      items.fileSize = file.size
      items.createTime = parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
      items.id = parms.id
    }
    return items
  })
  FileList.value = [...arr]
  // updateFileList()
}


function handleAvatarSuccess(response, uploadFile) {
  console.log(response)
  console.log(uploadFile)
}
function handlePreviewFile(file) {
  console.log(file)
  filePreview(file.url)
}

function handleDownFile(file) {
  const fileUrl = file.url // 文件的URL地址
  fetch(fileUrl)
    .then(response => response.blob())
    .then(blob => {
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', file.name)
      document.body.appendChild(link)
      link.click()
    })
    .catch(error => {
      console.error(error)
    })
}
function handleDeleteFile(index) {
  FileList.value.splice(index, 1)
  // updateFileList()
}

const cancelEvent = () => {
  console.log('cancel!')
}


</script>

<template>
  <div class="custom-upload-container" v-loading="uploadLoading" element-loading-text="文件上传中，请耐心等待，期间切勿进行任何操作，避免文件上传失败导致丢失。">
    <el-upload
      v-if="buttonPermission.indexOf('upload') >= 0"
      :file-list="FileList"
      :show-file-list="false"
      class="upload-demo"
      action="/"
      drag
      multiple
      :before-upload="beforeUpload"
      :on-success="handleAvatarSuccess"
      :limit="limit"
      :prompt="prompt"
    >
      <!-- <el-button
        icon="Upload"
        type="primary"
        :loading="uploadLoading">上传文件</el-button> -->

      <div class="upload-back">
        <div class="flex-container">
          <!-- <img class="logo-upload" :src="logoUpload" alt=""> -->
          <div>
            <el-icon :size="52" color="rgb(51, 153, 255)">
              <upload-filled />
            </el-icon>
          </div>
          <div class="text-container">
            <div class="accept-type-container">{{ props.prompt }}</div>
          </div>
        </div>
      </div>

    </el-upload>
    <el-row style="padding-top: 8px;" v-if="FileList&&FileList.length>0 && listShow">
      <el-table :data="FileList">
        <el-table-column
          type="index"
          width="65"
          align="center"
          fixed="left"
          label="序号"/>
        <el-table-column
          prop="name"
          align="left"
          min-width="160"
          :show-overflow-tooltip="true"
          label="名称">
          <template v-slot="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="needType"
          prop="fileType"
          align="left"
          :show-overflow-tooltip="true"
          label="类型">
          <template v-slot="scope">
            {{ scope.row.fileType }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="needSize"
          align="left"
          width="140"
          prop="fileSize"
          label="大小(KB)">
          <template v-slot="scope">
            {{ Number(scope.row.fileSize)/1000 }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="needStatus"
          align="center"
          prop="name"
          label="上传状态"
          min-width="140">
          <template v-slot="scope">
            <template v-if="scope.row.status === 'success' || scope.row.name || scope.row.url"><el-tag class="ml-2" type="success">上传成功</el-tag></template>
            <template v-else-if="scope.row.status === 'error'"><el-tag class="ml-2" type="danger">上传失败</el-tag></template>
            <el-progress v-else :percentage="scope.row.progress"/>
          </template>
        </el-table-column>
        <el-table-column
          v-if="needTime"
          align="left"
          min-width="200"
          prop="createTime"
          label="上传时间" />
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="200">
          <template #default="scope">
            <el-button
              link
              icon="View"
              type="primary"
              size="small"
              :disabled="scope.row.status === 'error' || scope.row.status === 'uploading'"
              @click="handlePreviewFile(scope.row)"
            >预览</el-button>
            <el-button
              link
              icon="Download"
              type="primary"
              size="small"
              :disabled="scope.row.status === 'error' || scope.row.status === 'uploading'"
              @click="handleDownFile(scope.row)">下载</el-button>

            <el-popconfirm
              v-if="buttonPermission.indexOf('delete') >= 0"
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon-color="#626AEF"
              title="确认删除?"
              @confirm="handleDeleteFile(scope.$index)"
              @cancel="cancelEvent"
            >
              <template #reference>
                <el-button
                  link
                  icon="Delete"
                  type="primary"
                  size="small"
                  :disabled="scope.row.status === 'uploading'"
                >删除</el-button>
              </template>
            </el-popconfirm>


          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
  .custom-upload-container {
    width: 100%;
    border-radius: 8px;

  }
  :deep(.el-upload){
    width: 100%;
    .flex-container {
      display: flex;
      align-items: center;
      flex-direction: column;
      .text-container{
        font-size: 14px;
        color: rgb(188, 195, 203);
      }
    }
  }
  .upload-demo {
    // padding-top: 24px;
    // padding-bottom: 16px;

  }
  .upload-item {
    margin-left: 5px;
  }
</style>
