<script lang="ts" setup>
import AppTable from '@/components/app-table/index.vue'
import AutoTooltip from '@/components/auto-tooltip/index.vue'
import { cloneDeep, isEmpty, divide } from 'lodash-es'
import { ref } from 'vue'
import DialogBox from '@/components/dialog-box/index.vue'

const props = withDefaults(
  defineProps<{
    isSuccessNumber: number
    isFailNumber: number
    isLoadingNumber: number
    allDocNumber: number
    documentData: any
  }>(),
  {
    documentData: []
  }
)

// 定义组件事件，允许触发 submitHandle 事件
const emit = defineEmits(['onReUpload', 'onDelete'])

const dialogVisible = ref<boolean>(false)

// 关闭对话框的方法
const close = () => {
  dialogVisible.value = false
}
// 关闭对话框的方法
const open = () => {
  dialogVisible.value = true
}

const handleReUpload = (row: any) => {
  emit('onReUpload', row)
}
const handleDelete = (row: any) => {
  emit('onDelete', row)
}
// 暴露 open 和 closeDialog 方法给外部使用
defineExpose({ open, close })
</script>

<template>
  <dialog-box :dialogVisible="dialogVisible" title="所包含的文档" width="900" @close="close">
    <p>共包含{{ props.allDocNumber }}篇文档，
      <span v-if="props.isSuccessNumber !== 0">{{ props.isSuccessNumber }}篇文档上传完成，</span>
      <span v-if="props.isLoadingNumber !== 0">{{ props.isLoadingNumber }}篇正在上传中，</span>
      <span v-if="props.isFailNumber !== 0">{{ props.isFailNumber }}篇上传失败</span>
    </p>
    <app-table
      :data="props.documentData"
      :tableDefaultHeight="320"
      class="mt-16"
      style="width: 100%; margin-bottom: 30px"
    >
      <el-table-column label="文件名称" min-width="220" prop="name">
        <template #default="{ row }">
          <AutoTooltip style="color: #3067ef; cursor: pointer">
            {{ row.name }}
          </AutoTooltip>
        </template>
      </el-table-column>
      <el-table-column label="文件格式" min-width="100" prop="create_id">
        <template #default="{ row }">
          <AutoTooltip>
            {{ row.name.split('.').pop() }}
          </AutoTooltip>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" min-width="100" prop="modify_time">
        <template #default="{ row }">
          <AutoTooltip>
            {{ divide(row.size, 1024).toFixed(2) }} kb
          </AutoTooltip>
        </template>
      </el-table-column>
      <el-table-column label="导入状态" min-width="100" prop="modify_time">
        <template #default="{ row }">
          <span :style="{ color: ['上传失败', '名称已存在'].includes(row.msg) ? 'red' : ''}">{{ row.msg }}</span>
        </template>
      </el-table-column>

      <el-table-column align="left" fixed="right" label="操作" min-width="100">
        <template #default="{ row }">
          <div>
            <span class="mr-10 primary-text" v-if="['上传失败'].includes(row.msg)" style="cursor: pointer" @click="handleReUpload(row)">
              重新上传
            </span>
            <span class="mr-10 primary-text" style="cursor: pointer" @click="handleDelete(row)">
              删除
            </span>
          </div>
        </template>
      </el-table-column>
    </app-table>
  </dialog-box>
</template>

<style lang="scss" scoped></style>
