<template>
  <a-card :bordered="false">
    <x-form-table
      title="示例表单"
      :queryParamsName="queryParamsName"
      :fixedAddForm="fixedAddForm"
      :externalSelectedRowKeys="selectedKeys"
      @action="action"
      @selectRow="selectRow"
      @columnClick="columnClick"
      @ceshi="ceshi"
      @rowDblClick="rowDblClick"
      serviceName="af-revenue"
      ref="xFormTable"
      :reserveSpaceForButtons="true"
      @tableBaseEnter="tableBaseEnter"
      @addFormSubmit="addFormSubmit"
    ></x-form-table>
  </a-card>
</template>

<script>
import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
import { microDispatch } from '@vue2-client/utils/microAppUtils'
export default {
  name: 'Demo',
  components: {
    XFormTable
  },
  data() {
    return {
      // 查询配置文件名
      queryParamsName: 'MachineHandCRUD_Simple',
      // 查询配置左侧tree
      xTreeConfigName: 'addressType',
      // 新增表单固定值
      fixedAddForm: {},
      // 是否显示详情抽屉
      detailVisible: false,
      // 当前记录
      record: {},
      // 选中的行keys
      selectedKeys: [],
      selected: {
        keys: [],
        rows: []
      }
    }
  },

  methods: {
    tableBaseEnter(...args) {
      const [attr, value, currentRecord, currentIndex, nextRecord, nextIndex] = args
      console.log('====>', attr, value, currentRecord, currentIndex, nextRecord, nextIndex)

      console.log('当前行:', currentIndex, '下一行:', nextIndex)
      if (!nextIndex) {
        this.$message.warning('没有下一行')
        return
      }
      // 跳转到下一行的同一列
      this.$refs.xFormTable.$refs.xTable.focusInput(nextIndex, attr.model)
      setTimeout(() => {
        this.$refs.xFormTable.$refs.xTable.focusInput(nextIndex, attr.model)
      }, 10)
    },
    handleCustomQuery() {
      this.$refs.xFormTable.queryTable({
        uf_f_alias: 'XianFeng',
        uf_f_card_id: '10500030'
      })
    },
    rowDblClick(record) {
      console.log('rowDblClick', record)
    },
    // input框 行編輯參數傳遞
    ceshi(...args) {
      // attr, value, currentRecord, currentIndex, nextRecord, nextIndex
      const [attr, value, currentRecord, currentIndex, nextRecord, nextIndex] = args
      console.log('ceshi', attr, value, currentRecord, currentIndex, nextRecord, nextIndex)
      // 示例：当按下 Enter 键且有下一行时，跳转到下一行的同一列
      // 可以在这里执行业务逻辑（例如：保存数据）
      console.log('当前行:', currentIndex, '下一行:', nextIndex)
      if (!nextIndex) {
        this.$message.warning('没有下一行')
        return
      }
      // 跳转到下一行的同一列
      this.$refs.xFormTable.$refs.xTable.focusInput(nextIndex, attr.model)
    },
    test() {
      this.$refs.xFormTable.setTableData([])
    },
    defaultF() {
      this.$refs.xFormTable.setTableSize('default')
    },
    middleF() {
      this.$refs.xFormTable.setTableSize('middle')
    },
    smallF() {
      this.$refs.xFormTable.setTableSize('small')
    },
    columnClick(key, value, record) {
      microDispatch({
        type: 'v3route',
        path: '/bingliguanli/dianzibingliluru',
        props: { selected: arguments[0].his_f_admission_id }
      })
    },
    action(record, id, actionType) {
      this.detailVisible = true
      console.log('触发了详情操作', record, id, actionType)
    },
    onClose() {
      this.detailVisible = false
      // 关闭详情之后重新查询表单
      this.$refs.xFormTable.refreshTable(true)
    },
    selectRow(selectedRowKeys, selectedRows) {
      this.selected = {
        keys: selectedRowKeys,
        rows: selectedRows
      }
    },
    addFormSubmit(params, callback){
      callback()
    }
  }
}
</script>

<style scoped></style>
