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

const drawer = ref(false)
const openDrawer = () => {
  drawer.value = true
}

const AMSTableRef = ref<VxeGridInstance | null>(null)
const AMSTableData = ref<VxeGridProps<any>>({
  border: true,
  round: true,
  minHeight: 70,
  maxHeight: 500,
  columns: [
    {
      field: 'dateTime',
      title: 'Date Time',
      width: 217
    },
    {
      field: 'code',
      title: 'Code',
      width: 185
    },
    {
      field: 'name',
      title: 'Name',
      width: 230
    },
    {
      field: 'description',
      title: 'Description',
      minWidth: 330
    }
  ],
  data: [
    {
      dateTime: 'Jun-08-2024 12:00 AM',
      code: 'Code 1',
      name: 'Name 1',
      description:
        "A term commonly used in business transactions, particularly in the realm of recurring payments. It essentially means that a customer's payment information, such as a credit card number, expiration date, and CVV,"
    },
    {
      dateTime: 'Jun-10-2024 12:00 AM',
      code: 'Code 2',
      name: 'Name 2',
      description: 'Description 2'
    }
  ],
  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: [
    {
      field: 'dateTime',
      title: 'Date Time',
      width: 217
    },
    {
      field: 'code',
      title: 'Code',
      width: 185
    },
    {
      field: 'name',
      title: 'Name',
      width: 230
    },
    {
      field: 'description',
      title: 'Description',
      minWidth: 330
    }
  ],
  data: [
    {
      milestones: 'Milestone 1',
      dateTime: 'Jun-08-2024 12:00 AM',
      locations: 'Shenzhen',
      remarks: 'Remarks 1'
    },
    {
      milestones: 'Milestone 2',
      dateTime: 'Jun-10-2024 12:00 AM',
      locations: 'Valencia',
      remarks: 'Remarks 2'
    }
  ],
  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]')}`
  })
}

defineExpose({
  openDrawer
})
</script>

<template>
  <el-drawer :modal="false" :size="1000" v-model="drawer" title="AMS/ISF" direction="rtl">
    <div class="ams-isf">
      <div class="label" 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 ref="AMSTableRef" class="radius-bottom" :style="{ border: 'none' }" v-bind="AMSTableData">
      </vxe-grid>
      <div class="label">
        <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 class="radius-bottom" ref="ISFTableRef" :style="{ border: 'none' }" v-bind="ISFTableData">
      </vxe-grid>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>
.ams-isf {
  .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>
