<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="400">
    <!-- 列表 -->
    <ContentWrap>
      <el-table
        ref="tableRef"
        row-key="id"
        height="500"
        :data="list"
        :stripe="true"
        :show-overflow-tooltip="true"
        @selection-change="handleRowCheckboxChange"
      >
        <el-table-column type="selection" width="55"  v-model="isCheckAll"/>
        <el-table-column label="薪资项" align="center" prop="name" />
      </el-table>
    </ContentWrap>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { SalaryMonthRecordApi, SalaryMonthRecord } from '@/api/hr/salarymonthrecord'
import {isEmpty} from "@/utils/is";

/** 每月薪资记录 表单 */
defineOptions({ name: 'SalaryMonthRecordForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  name: undefined,
})

const list = ref([]) // 列表的数据
const listData = ref([]) // 列表的数据
const checkedIds = ref<number[]>([])
const checkedRecords = ref<number[]>([])
const handleRowCheckboxChange = (records: []) => {
  checkedIds.value = records.map((item) => item.id);
  checkedRecords.value = records;
}

const formRef = ref() // 表单 Ref
// 是否全选
const isCheckAll = ref(false)
/** 打开弹窗 */
const open = async (fieldList: [], data: []) => {
  dialogVisible.value = true
  list.value = fieldList
  listData.value = data
  isCheckAll.value = true
  dialogTitle.value = '导出薪资项'
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 表格引用
const tableRef = ref()

// 监听对话框显示状态
watch(dialogVisible, (newVal) => {
  if (newVal) {
    // 对话框打开后，等待下一帧 DOM 更新后全选
    nextTick(() => {
      if (tableRef.value && list.value.length > 0) {
        tableRef.value.toggleAllSelection()
      }
    })
  }
})

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  console.log('checkedRecords', checkedRecords.value)

  try {
    // 导出的二次确认
    await message.exportConfirm()

    // 发起导出（前端实现）
    formLoading.value = true

    // 获取当前日期作为文件名的一部分
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    const fileName = `${year}${month}${day}_薪资表.csv`

    console.log(listData.value)
    // 处理导出数据
    const exportData = listData.value.map((row) => {
      const exportRow = {}
      checkedRecords.value.forEach((field) => {
        const value = fieldFormatter(row, { property: field.field })
        exportRow[field.name] = value
      })
      return exportRow
    })

    // 调用前端导出函数
    exportToCSV(exportData, fileName)

    message.success('导出成功')
    dialogVisible.value = false
  } catch (error) {
    message.error('导出失败')
    console.error('导出失败:', error)
  } finally {
    formLoading.value = false
  }

  //
  // // 校验表单
  // await formRef.value.validate()
  // // 提交请求
  // formLoading.value = true
  // try {
  //   // const data = formData.value as unknown as SalaryMonthRecord
  //   const { startTime } = formData.value as unknown as SalaryMonthRecord
  //   const { companyId } = formData.value as unknown as SalaryMonthRecord
  //
  //   // 将时间戳转为 YYYY-MM 格式
  //   const date = new Date(startTime)
  //   const year = date.getFullYear()
  //   const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  //   const formattedStartTime = `${year}-${month}`
  //   await SalaryMonthRecordApi.addNextMonthSalary(formattedStartTime,companyId)
  //   message.success(t('common.createSuccess'))
  //   dialogVisible.value = false
  //   // 发送操作成功的事件
  //   emit('success')
  // } finally {
  //   formLoading.value = false
  // }
}

const fieldFormatter = (row, column, item) => {
  const requiredFields = [
    '工资基数',
    '出勤基数',
    '基本工资',
    '加班工资',
    '计时工资',
    '计件工资',
    '绩效奖励',
    '高温津贴',
    '电脑补贴',
    '餐补',
    '房补',
    '岗位工资',
    '考勤扣款',
    '质量处罚',
    '公积金补贴',
    '春节往返交通补贴',
    '新员工介绍费',
    '应发工资',
    '社保扣款',
    '所得税',
    '实发工资',
    '保险补贴',
    '公司承担社保',
    '管理费',
    '开票7%',
    '公司成本合计'
  ]
  let value = row[column.property]
  if (item && requiredFields.includes(item.name) && !isEmpty(value)) {
    value = Number(value).toFixed(2)
  }
  return isEmpty(value) ? '--' : value
}
// 处理CSV字段的转义，确保包含逗号、引号或换行符的内容能被正确解析
const escapeCSVField = (field) => {
  if (field.includes(',') || field.includes('"') || field.includes('\n')) {
    // 如果字段包含逗号、引号或换行符，需要用双引号包围，并将内部的双引号转义为两个双引号
    return '"' + field.replace(/"/g, '""') + '"'
  }
  return field
}
// 前端导出CSV函数
const exportToCSV = (data, fileName) => {
  // 获取表头（所有字段的name）
  const headers = checkedRecords.value.map((field) => field.name)

  // 创建CSV内容
  let csvContent = ''

  // 添加表头行，需要用BOM头解决Excel打开时的中文乱码问题
  csvContent += '\uFEFF' + headers.map((h) => escapeCSVField(h)).join(',') + '\n'

  // 添加数据行
  data.forEach((row) => {
    const rowData = headers.map((header) => {
      // 找到对应的字段值
      const value = row[header] || ''
      return escapeCSVField(String(value))
    })
    csvContent += rowData.join(',') + '\n'
  })

  // 创建Blob对象，使用text/csv格式
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })

  // 创建下载链接并触发下载
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href)
}
</script>
