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

const props = defineProps({
  height: {
    type: Number,
    default: 440
  }
})

const tableOriginColumnsField = ref()
const handleColumns = (columns: any) => {
  const newColumns = columns.map((item: any) => {
    let curColumn: any = {
      title: item.title,
      field: item.field,
      sortable: true
    }
    // 设置插槽
    if (item.type === 'status') {
      curColumn = {
        ...curColumn,
        slots: { default: 'status' }
      }
    } else if (item.type === 'link') {
      curColumn = {
        ...curColumn,
        slots: { default: 'bookingNo' }
      }
    } else if (item.type === 'mode') {
      curColumn = {
        ...curColumn,
        slots: { default: 'mode' }
      }
    }
    // 格式化
    if (item.formatter === 'date') {
      curColumn = {
        ...curColumn,
        sortBy: ({ row, column }: any) => {
          return dayjs(row[column.field]).unix()
        },
        formatter: ({ cellValue }: any) => dayjs(cellValue).format('YYYY/MM/DD ') || '--'
      }
    } else if (item.formatter === 'dateTime') {
      curColumn = {
        ...curColumn,
        formatter: ({ cellValue }: any) => dayjs(cellValue).format('YYYY/MM/DD HH:mm:ss') || '--'
      }
    }
    return curColumn
  })
  return newColumns
}

// 获取表格列
const getTableColumns = async (isInit: boolean) => {
  tableLoading.value = true
  await $api.getOperationTableColumns().then((res: any) => {
    if (res.code === 200) {
      bookingTable.value.columns = [
        { type: 'checkbox', width: 50, fixed: 'left' },
        ...handleColumns(res.data.OperationTableColumns)
      ]
      tableOriginColumnsField.value = res.data.OperationTableColumns
    }
  })
  nextTick(() => {
    !isInit && (tableLoading.value = false)
  })
}

const pageInfo = ref({ pageNo: 1, pageSize: 20, total: 0 })

let searchdata: any = {}
// 获取表格数据
const getTableData = async (isInit: boolean, isPageChange?: boolean) => {
  const rc = isPageChange ? pageInfo.value.total : -1
  tableLoading.value = true
  await $api
    .SearchOperationLog({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc,
      ...searchdata
    })
    .then((res: any) => {
      if (res.code === 200) {
        console.log(res.data)
        bookingTable.value.data = res.data.searchData
        pageInfo.value.total = Number(res.data.rc)
      }
    })
  nextTick(() => {
    !isInit && (tableLoading.value = false)
  })
}
const SearchOperationLog = (val: any) => {
  console.log(val)
  searchdata = val
  tableLoading.value = true
  $api
    .SearchOperationLog({
      cp: pageInfo.value.pageNo,
      ps: pageInfo.value.pageSize,
      rc: -1,
      ...val
    })
    .then((res: any) => {
      if (res.code === 200) {
        console.log(res.data)
        bookingTable.value.data = res.data.searchData
        pageInfo.value.total = Number(res.data.rc)
        tableLoading.value = false
      }
    })
}
onMounted(() => {
  tableLoading.value = true
  Promise.all([getTableColumns(true), getTableData(true)]).finally(() => {
    tableLoading.value = false
    nextTick(() => {
      tableRef.value && autoWidth(bookingTable.value, tableRef.value)
    })
  })
})

const tableRef = ref<VxeGridInstance>()
const bookingTable = ref<VxeGridProps<any>>({
  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)'
  },
  sortConfig: {
    sortMethod: (params) => {
      const { data, sortList } = params

      // 如果没有排序条件，直接返回原数据
      if (sortList.length === 0) return data

      // 对数据进行多重排序
      const sortedData = [...data].sort((a, b) => {
        for (const { field, order } of sortList) {
          const curColumn = tableOriginColumnsField.value.find((item: any) => item.field === field)
          if (!curColumn) continue

          const typeName = curColumn.type
          const aValue = a[field]
          const bValue = b[field]

          const compareResult = (aValue: any, bValue: any) => {
            // 如果 aValue 或 bValue 是 null 或 undefined，优先处理这些值
            if (aValue == null && bValue == null) {
              return 0 // 如果两个值都为 null 或 undefined，视为相等
            } else if (aValue == null) {
              return -1 // 如果 aValue 是 null，bValue 不是，则将 aValue 视为较小值
            } else if (bValue == null) {
              return 1 // 如果 bValue 是 null，aValue 不是，则将 bValue 视为较小值
            }

            if (typeName === 'datetime' || typeName === 'date' || typeName === 'time') {
              return dayjs(aValue).unix() - dayjs(bValue).unix()
            } else if (isNaN(Number(aValue)) || isNaN(Number(bValue))) {
              return aValue.localeCompare(bValue)
            } else {
              return Number(aValue) - Number(bValue)
            }
          }

          const result = compareResult(aValue, bValue)
          if (result !== 0) {
            return order === 'asc' ? result : -result
          }
        }

        return 0 // 如果所有字段都相等
      })

      return sortedData
    }
  },
  columnConfig: { resizable: true, useKey: true },
  rowConfig: { isHover: true },
  exportConfig: {
    types: ['csv', 'html', 'txt', 'xlsx'],
    modes: ['current', 'selected', 'all']
  }
})

// 实现行点击样式
useRowClickStyle(tableRef)

const downloadDialogRef = ref()
const handleDownload = () => {
  downloadDialogRef.value.openDialog()
}

// 导出表格
const exportTable = () => {
  tableRef.value?.exportData({
    type: 'xlsx',
    message: false,
    filename: `Booking List_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`,
    columnFilterMethod: ({ column }: any) => {
      // 筛选选中导出的列
      return column.field
    }
  })
}

const tableLoading = ref(false)

const selectedNumber = ref(0)
// 复选框选中事件
const handleCheckboxChange = ({ records }: any) => {
  selectedNumber.value = records.length
}
const handleCheckAllChange = ({ records }: any) => {
  selectedNumber.value = records.length
}
defineExpose({
  SearchOperationLog
})
</script>

<template>
  <div style="padding: 0px 20px">
    <div class="table-tools">
      <div class="left-total-records">{{ selectedNumber }} Selected</div>
      <div class="right-tools-btn">
        <el-button class="el-button--main" @click="handleDownload">
          <span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
          Download
        </el-button>
      </div>
    </div>
    <vxe-grid
      ref="tableRef"
      v-vloading="tableLoading"
      :height="props.height"
      :style="{ border: 'none' }"
      v-bind="bookingTable"
      @checkbox-change="handleCheckboxChange"
      @checkbox-all="handleCheckAllChange"
    >
      <!-- 空数据时的插槽 -->
      <template #empty>
        <VEmpty>
          <template #default>
            <p style="color: var(--color-neutral-3)">
              We support the following references number to find booking:
            </p>
            <p style="color: var(--color-neutral-3)">
              · Booking No./HAWB No./MAWB No./PO No./Carrier Booking No./Contract No./File No./Quote
              No.
            </p>
          </template>
        </VEmpty>
      </template>
      <!-- Transportation Mode字段的插槽 -->
      <template #mode>
        <div>
          <span class="font_family icon-icon_ocean_b" style="font-size: 24px"></span>
        </div>
      </template>
      <!-- Status字段的插槽 -->
      <template #status="{ row, column }">
        <VTag :type="row[column.field]">{{ row[column.field] }}</VTag>
      </template>
    </vxe-grid>
    <div class="bottom-pagination">
      <div class="left-total-records">Total {{ pageInfo.total }}</div>
      <div class="right-pagination">
        <el-pagination
          v-model:current-page="pageInfo.pageNo"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="[20, 50, 100, 150]"
          :pager-count="3"
          background
          layout="sizes, prev, pager, next"
          :total="pageInfo.total"
          @size-change="getTableData(false, true)"
          @current-change="getTableData(false, true)"
        />
      </div>
    </div>
    <DownloadDialog @export="exportTable" ref="downloadDialogRef" />
  </div>
</template>

<style lang="scss" scoped>
.table-tools {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 48px;
  padding: 8px 0;

  .left-total-records {
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
  }
}

.bottom-pagination {
  display: flex;
  justify-content: space-between;
  height: 40px;
  margin-top: -1px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 0 0 12px 12px;

  .left-total-records {
    line-height: 32px;
  }

  .right-pagination {
    display: flex;
    align-items: center;
  }
}
</style>
