<script setup lang="ts">
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
import dayjs from 'dayjs'

const drawer = ref(false)
const openDrawer = (data: any) => {
  getData(data)
  drawer.value = true
  canViewAMSLog.value = data.canViewISFLog
  canViewISFLog.value = data.canViewAMSLog
}

const canViewAMSLog = ref(false)
const canViewISFLog = ref(false)
const loading = ref(false)
const handleColumns = (columns: any) => {
  const newColumns = columns.map((item: any) => {
    let curColumn: any = {
      title: item.title,
      field: item.field
    }

    if (item.formatter === 'dateTime') {
      curColumn = {
        ...curColumn,
        formatter: ({ cellValue }: any) => dayjs(cellValue).format('DD-MMM-YYYY HH:mm:ss') || '--'
      }
    }
    return curColumn
  })
  return newColumns
}
const getData = (pageData: any) => {
  loading.value = true
  $api
    .getTrackingAmsIsf({
      ams_ss: pageData.ams_ss,
      isf_ss: pageData.isf_ss,
      _schemas: pageData._schemas
    })
    .then((res: any) => {
      if (res.code === 200) {
        // 获取数据
        const data = res.data
        const { amsLog, isfLog } = res.data
        AMSTableData.value.columns = handleColumns(amsLog.amsLog_column)
        AMSTableData.value.data = amsLog.data
        ISFTableData.value.columns = handleColumns(isfLog.isfLog_column)
        ISFTableData.value.data = data.isf
      }
    })
    .finally(() => {
      loading.value = false
    })
}
const drawerTitle = () => {
  if (canViewAMSLog.value && canViewISFLog.value) {
    return 'AMS/ISF'
  } else if (canViewAMSLog.value) {
    return 'AMS'
  } else if (canViewISFLog.value) {
    return 'ISF'
  }
}

const AMSTableRef = ref<VxeGridInstance | null>(null)
const AMSTableData = ref<VxeGridProps<any>>({
  border: true,
  round: true,
  minHeight: 70,
  maxHeight: 500,
  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 },
  exportConfig: {
    types: ['csv', 'html', 'txt', 'xlsx'],
    modes: ['current', 'selected', 'all']
  }
})

const exportAMSTable = () => {
  AMSTableRef.value?.exportData({
    type: 'xlsx',
    message: false,
    filename: `AMS Report_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`
  })
}

const ISFTableRef = ref<VxeGridInstance | null>(null)
const ISFTableData = ref<VxeGridProps<any>>({
  border: true,
  round: true,
  minHeight: 70,
  maxHeight: 500,
  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 },
  exportConfig: {
    types: ['csv', 'html', 'txt', 'xlsx'],
    modes: ['current', 'selected', 'all']
  }
})
const exportISFTable = () => {
  ISFTableRef.value?.exportData({
    type: 'xlsx',
    message: false,
    filename: `ISF Report_${dayjs().format('YYYYMMDDHH[h]mm[m]ss[s]')}`
  })
}

const clearData = () => {
  AMSTableData.value.data = []
  AMSTableData.value.columns = []
  ISFTableData.value.data = []
  ISFTableData.value.columns = []
  canViewAMSLog.value = false
  canViewISFLog.value = false
}

defineExpose({
  openDrawer
})
</script>

<template>
  <el-drawer
    :modal="false"
    @close="clearData"
    :size="1000"
    v-model="drawer"
    :title="drawerTitle()"
    direction="rtl"
  >
    <div class="ams-isf" v-vloading="loading">
      <div class="label" v-if="canViewAMSLog" style="margin-top: 8px">
        <span>AMS-M1 Log</span>
        <el-button class="el-button--icon" @click="exportAMSTable">
          <span class="font_family icon-icon_export_b"></span>
        </el-button>
      </div>
      <vxe-grid
        v-if="canViewAMSLog"
        ref="AMSTableRef"
        class="radius-bottom"
        :style="{ border: 'none' }"
        v-bind="AMSTableData"
      >
        <template #empty>
          <div class="empty">No data</div>
        </template>
      </vxe-grid>
      <div class="label" v-if="canViewISFLog">
        <span>ISF Log</span>
        <el-button class="el-button--icon" @click="exportISFTable">
          <span class="font_family icon-icon_export_b"></span>
        </el-button>
      </div>
      <vxe-grid
        v-if="canViewISFLog"
        class="radius-bottom"
        ref="ISFTableRef"
        :style="{ border: 'none' }"
        v-bind="ISFTableData"
      >
        <template #empty>
          <div class="empty">No data</div>
        </template>
      </vxe-grid>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.ams-isf {
  height: 500px;
  .label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 14px;

    .font_family {
      font-size: 14px;
    }

    .el-button {
      padding: 8px;
    }

    span {
      font-weight: 700;
    }
  }
}
</style>
