<script setup lang="ts">
import { type VxeGridInstance, type VxeGridProps } from 'vxe-table'
const dialogVisible = ref(false)

const openDialog = () => {
  dialogVisible.value = true
  tableData.value.data = [
    {
      referenceType: 'CIN',
      refNo: 'SECAN240528A00301'
    },
    {
      referenceType: 'IN',
      refNo: 'NUK20240596102'
    }
  ]
}

const tableRef = ref<VxeGridInstance | null>(null)
const tableData = ref<VxeGridProps<any>>({
  border: true,
  round: true,
  maxHeight: 440,
  minHeight: 100,
  columns: [
    {
      title: 'Reference Type',
      field: 'referenceType',
      width: 250,
      editRender: { enabled: true },
      slots: { edit: 'refType' }
    },
    {
      title: 'Ref No.',
      field: 'refNo',
      editRender: { enabled: true },
      slots: { edit: 'refNo' }
    },
    {
      title: 'Action',
      width: 90,
      fixed: 'right',
      slots: { default: 'action' }
    }
  ],
  data: [],
  scrollY: { enabled: true, oSize: 20, gt: 30 },
  stripe: true,
  emptyText: ' ',
  showHeaderOverflow: true,
  showOverflow: true,
  headerRowStyle: {
    backgroundColor: 'var(--color-table-header-bg)'
  },
  editConfig: {
    enabled: true,
    // trigger: 'dblclick',
    mode: 'row',
    showIcon: false,
    autoClear: false // 禁用点击表格外部自动清除编辑状态
  },
  columnConfig: { resizable: true, useKey: true },
  rowConfig: { isCurrent: true, isHover: true }
})

const addNewReference = () => {
  const tableHeaders = tableData.value.columns
  const newRow: any = {}
  if (!tableHeaders) {
    return
  }
  tableHeaders.forEach((item: any) => {
    newRow[item.field] = ''
  })
  tableData.value.data?.unshift(newRow)
  tableRef.value?.setEditRow(tableData.value.data?.[0])
}
const handleDelete = (row: any, index: number) => {
  tableData.value.data?.splice(index, 1)
}

const handleSave = (row: any) => {
  tableRef.value?.clearEdit()
}

const clearData = () => {
  tableData.value.data = []
}

defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :width="800" title="Ref No." @closed="clearData">
    <div>
      <el-button style="margin-bottom: 8px" class="el-button-text" @click="addNewReference">
        <span class="font_family icon-icon_add_b"></span>
        Add Reference
      </el-button>
      <vxe-grid ref="tableRef" v-bind="tableData">
        <!-- action操作栏的插槽 -->
        <template #action="{ row, rowIndex }">
          <el-button
            v-if="tableRef?.isEditByRow(row)"
            class="el-button--icon"
            @click="handleSave(row)"
            style="width: 24px; height: 24px"
            ><span class="font_family icon-icon_save_b"></span
          ></el-button>
          <el-button
            class="el-button--icon"
            @click="handleDelete(row, rowIndex)"
            style="width: 24px; height: 24px"
            ><span class="font_family icon-icon_delete_b"></span
          ></el-button>
        </template>
        <!-- Reference Type的编辑插槽 -->
        <template #refType="{ row, column }">
          <el-select v-model="row[column.field]" placeholder="Select Reference Type">
            <el-option
              v-for="num in 15"
              :key="num"
              :value="num"
              :label="`option${num}`"
            ></el-option>
          </el-select>
        </template>
        <!-- Ref No.的编辑插槽 -->
        <template #refNo="{ row, column }">
          <el-input v-model="row[column.field]" placeholder="Enter Ref No." />
        </template>
        <template #empty>
          <div class="empty">No data</div>
        </template>
      </vxe-grid>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
