<template>  
  <vxe-table  
      :border="false"  
      :show-header="false"  
      ref="tableRef"  
      :edit-config="{ trigger: 'click', mode: 'cell', showStatus: false }"  
      :max-height="150"  
      size="small"  
      keep-source  
      :min-height="40"  
      :data="tableData"  
  >  
      <template v-slot:empty>  
          <div>  
              <vxe-button mode="text" icon="vxe-icon-add" :disabled="disabled" @click="insertEvent()"></vxe-button>  
          </div>  
      </template>  

      <vxe-column   
          field="name"   
          title="Name"   
          sortable   
          :edit-render="{ autofocus: '.vxe-input--inner', placeholder: '请输入名称' }"  
      >  
          <template #edit="{ row }">  
              <vxe-textarea   
                  v-model="row.name"   
                  placeholder="请输入名称"   
                  size="medium"   
                  clearable   
                  :disabled="disabled"   
                  :rows="3"  
              />  
          </template>  
      </vxe-column>  

      <vxe-column   
          field="des"   
          title="Des"   
          sortable   
          :edit-render="{ autofocus: '.vxe-input--inner', placeholder: '请输入内容' }"  
      >  
          <template #edit="{ row }">  
              <vxe-textarea   
                  v-model="row.des"   
                  placeholder="请输入内容"   
                  size="medium"   
                  clearable   
                  :disabled="disabled"   
                  :rows="3"  
              />  
          </template>  
      </vxe-column>  

      <vxe-column title="操作" width="60">  
          <template #default="{ row }">  
              <vxe-button mode="text" icon="vxe-icon-add" :disabled="disabled" @click="insertEvent(row)"></vxe-button>  
              <vxe-button mode="text" icon="vxe-icon-delete" :disabled="disabled" @click="removeEvent(row)"></vxe-button>  
          </template>  
      </vxe-column>  

      <vxe-column field="tp" title="tp" :visible="false"></vxe-column>  
      <vxe-column field="checkid" title="checkid" :visible="false"></vxe-column>  
      <vxe-column field="id" title="id" :visible="false"></vxe-column>  
  </vxe-table>  
</template>

<script lang="ts" setup>  
import { ref } from 'vue';  
import { VXETable, VxeTableInstance } from 'vxe-table';  

const emit = defineEmits(['register', 'success']);  
const tableData = ref<RowVO[]>([]);  
const itemtp = ref<number>();  
const itemcheckid = ref<number>();  
const disabled = ref(false);  
const tableRef = ref<VxeTableInstance<RowVO>>();  

interface RowVO {  
    id: number;  
    tp: number;  
    checkid: number;  
    name: string;  
    des: string;  
}  

const removeEvent = async (row: RowVO) => {  
    const $table = tableRef.value;  
    if (!$table) return;  

    const type = await VXETable.modal.confirm('您确定要删除该数据?');  
    if (type === 'confirm') {  
        $table.remove(row);  
    }  
};  

const insertEvent = async (row?: RowVO) => {  
    const $table = tableRef.value;  
    if ($table) {  
        const record: RowVO = {  
            id: null,  
            tp: itemtp.value,  
            checkid: itemcheckid.value,  
            name: '',  
            des: ''  
        };  
        const { row: newRow } = await $table.insertAt(record, row);  
        await $table.setEditCell(newRow, 'name');  
    }  
};  

const setData = (datas: RowVO[], tp: number, checkid: number) => {  
    itemtp.value = tp;  
    itemcheckid.value = checkid;  
    tableData.value = datas.length > 0 ? datas : [createEmptyRow()];  
};  

const createEmptyRow = (): RowVO => ({  
    id: null,  
    tp: itemtp.value,  
    checkid: itemcheckid.value,  
    name: '',  
    des: ''  
});  

const getData = () => {  
    const $table = tableRef.value;  
    const fullData = $table?.getTableData().fullData || [];  
    return {  
        newRow: $table?.getInsertRecords(),  
        updateRow: $table?.getUpdateRecords(),  
        delRow: $table?.getRemoveRecords(),  
        fullData  
    };  
};  

const clearForm = () => {  
    const $table = tableRef.value;  
    if (!$table) return;  

    $table.clearAll();  
    const fullData = $table.getTableData().fullData;  
    fullData.forEach(item => $table.remove(item));  
};  

const setReadonly = (isReadOnly: boolean) => {  
    disabled.value = isReadOnly;  
};  

defineExpose({  
    setData,  
    getData,  
    clearForm,  
    setReadonly  
});  
</script>


<style lang="less" scoped>  
  :deep(.ant-input-number) {  
      width: 100%;  
  }  

  :deep(.ant-calendar-picker) {  
      width: 100%;  
  }  
</style>