<script setup lang="ts">
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
import { autoWidth } from '@/utils/table'
import { useRowClickStyle } from '@/hooks/rowClickStyle'
import UploadFilesDialog from './UploadFilesDialog.vue'

const props = defineProps({
  data: Object
})
const tableData = ref<VxeGridProps<any>>({
  minHeight: 70,
  maxHeight: 440,
  border: true,
  round: true,
  columns: [],
  data: [],
  scrollY: { enabled: true, oSize: 20, gt: 30 },
  stripe: true,
  emptyText: ' ',
  showHeaderOverflow: true,
  showOverflow: true,
  headerRowStyle: {
    backgroundColor: 'var(--color-table-header-bg)'
  },
  columnConfig: { resizable: true, useKey: true },
  rowConfig: { isHover: true }
})
const tableRef = ref<VxeGridInstance | null>(null)

const handleColumns = (columns: any) => {
  const newColumns = columns.map((item: any) => {
    let curColumn: any = {
      title: item.title,
      field: item.field,
      minWidth: 30
    }

    if (item.field === 'file') {
      curColumn = {
        ...curColumn,
        slots: { default: 'file' }
      }
    }
    return curColumn
  })
  return newColumns
}
watch(
  () => props.data,
  (newVal) => {
    const attachment = newVal?.document_info
    if (attachment && attachment.document_column) {
      tableData.value.columns = [
        ...handleColumns(attachment.document_column),
        {
          title: 'Action',
          width: 90,
          slots: { default: 'action' }
        }
      ]
      tableData.value.data = attachment.document_data
      // nextTick(() => {
      //   tableRef.value && autoWidth(tableData.value, tableRef.value)
      // })
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 实现行点击样式
useRowClickStyle(tableRef)
onMounted(() => {
  tableRef.value && autoWidth(tableData.value, tableRef.value)
})
const handleDownload = (row: any) => {
  // 如果from_system的值是TOPOCEAN_KSMART，不需要拼接url
  const url =
    row.from_system === 'TOPOCEAN_KSMART'
      ? row.file?.url
      : import.meta.env.VITE_API_HOST + '/' + row.file?.url
  // const url = row.file?.url
  // 创建一个隐藏的 <a> 标签
  const link = document.createElement('a')
  link.href = url

  // 指定下载文件名（可选）
  link.download = row.file?.file_name || 'file'

  // 添加到 DOM 中，触发点击事件，然后移除
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
const handleDelete = (row: any) => {}
const uploadFilesRef = ref<InstanceType<typeof UploadFilesDialog> | null>(null)

const openUploadFilesDialog = () => {
  uploadFilesRef.value?.openDialog()
}
</script>

<template>
  <div class="attachment">
    <!-- <el-button @click="openUploadFilesDialog" class="el-button--text title">
      <span class="font_family icon-icon_upload_b"></span>
      Upload Files
    </el-button> -->
    <vxe-grid class="radius-bottom" ref="tableRef" v-bind="tableData">
      <template #action="{ row }">
        <el-button @click="handleDownload(row)" class="el-button--icon">
          <span class="font_family icon-icon_download_b"></span>
        </el-button>
        <!-- <el-button @click="handleDelete(row)" class="el-button--icon">
          <span class="font_family icon-icon_delete_b"></span>
        </el-button> -->
      </template>
      <template #file="{ row, column }">
        <div class="file" v-if="row[column.field]?.file_name">
          <span class="font_family icon-icon_edoc_b"></span>
          <span style="display: inline-block; margin-left: 2px; transform: translateY(-1px)">{{
            row[column.field]?.file_name
          }}</span>
        </div>
      </template>
      <template #empty>
        <div class="empty">No data</div>
      </template>
    </vxe-grid>
    <UploadFilesDialog ref="uploadFilesRef"></UploadFilesDialog>
  </div>
</template>

<style lang="scss" scoped>
.attachment {
  padding: 16px;
  & > .title {
    margin-bottom: 12px;
    color: var(--color-theme);
    span {
      color: var(--color-theme);
    }
  }
}
</style>
<style lang="scss"></style>
