<template>
  <vxe-table
    keep-source
    ref="tableRef"
    size="small"
    height="auto"
    :data="dataList"
    :show-radio="true"
    :row-config="{ isCurrent: true, isHover: true,useKey:true }"
    @current-change="rowChangeEvent"
    :column-config="{ resizable: true,useKey:true }"
    :scroll-y="{ enabled: true, gt: 50 }"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
    :radio-config="{ labelField: 'name', highlight: true }"
  >

  <template #empty>
    <vxe-button mode="text" icon="vxe-icon-add" @click="insertEvent(null)">
      <div style="font-size: 20px;"> 添加</div>
    </vxe-button> 
  </template>

    <vxe-column type="seq" width="50" />
    <vxe-column field="checkid" type="html" title="" :visible="false" />
    <vxe-column field="pid" sortable type="html" title="" :visible="false" />
    <vxe-column field="tp" title="类别" width="20%" :edit-render="{ autofocus: '.my-input', autoselect: true }">
      <template #default="{ row }">
        <vxe-radio-group v-model="row.tp" style="min-height:70px;overflow-y:hidden;">
          <vxe-radio style="margin:5px;" v-for="item in tpOptions" :key="item.value" :label="item.value*1" :content="item.label"></vxe-radio>
        </vxe-radio-group>
      </template>
      <template #edit="{ row }">
        <vxe-radio-group v-model="row.tp" style="min-height:70px;overflow-y:hidden;">
          <vxe-radio style="margin:5px;" v-for="item in tpOptions" :key="item.value" :label="item.value*1" :content="item.label"></vxe-radio>
        </vxe-radio-group>
      </template>
    </vxe-column>
    <vxe-column field="name" title="检查方法" :edit-render="{ autofocus: '.my-input', autoselect: true }" width="35%">
      <template #default="{ row }">
        <vxe-textarea v-model="row.name" type="text" placeholder="请输入检查方法" size="small" clearable :rows="4" />
      </template>
      <template #edit="{ row }">
        <vxe-textarea v-model="row.name" type="text" placeholder="请输入检查方法" size="small" clearable :rows="4" />
      </template>
    </vxe-column>
    <vxe-column field="des" sortable :edit-render="{ autofocus: '.my-input', autoselect: true }" title="备注">
      <template #default="{ row }">
        <vxe-textarea v-model="row.des" type="text" placeholder="请输入备注" size="small" clearable :rows="4" />
      </template>
      <template #edit="{ row }">
        <vxe-textarea v-model="row.des" type="text" placeholder="请输入备注" size="small" clearable :rows="4" />
      </template>
    </vxe-column>
    <vxe-column field="id" title="" :visible="false" />
    <vxe-column title="操作" width="100">
      <template #default="{ row }">
        <vxe-button mode="text" icon="vxe-icon-add" @click="insertEvent(row)" />
        <vxe-button mode="text" icon="vxe-icon-delete" @click="removeEvent(row)" />
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup lang="ts">
  import { ref, reactive, nextTick } from 'vue';
  import { VXETable, VxeTableInstance } from 'vxe-table';
  import { defHttp } from '/@/utils/http/axios';

  const deleteOne = '/audit/auditProjectItem/delete';
  const emit = defineEmits(['callback']);
  const checkItems = '/audit/auditProjectItem/listAll';

  const dataList = ref();
  const tableRef = ref();

  const curCheck = ref();
  const curProject = ref();

  const tpOptions = ref([]);

  const iniData = async (check, project, tpOps) => {
    tpOptions.value = tpOps;
    curCheck.value = check;
    curProject.value = project;
    let checkid = check.checkid;
    let pid = project.id;
    dataList.value = await defHttp.get({
      url: checkItems,
      params: {
        checkid: checkid,
        pid: pid,
      },
    });
  };

  const rowChangeEvent = async ({ row }) => {
    emit('callback', row);
  };

  const removeEvent = async (row) => {
    const $table = tableRef.value;
    if (!$table) return;
    const type = await VXETable.modal.confirm('您确定要删除该数据?');
    if (type === 'confirm') {
      $table.remove(row);
      if (row.id) {
        const params = { id: row.id };
        defHttp.delete({ url: deleteOne, params }, { joinParamsToUrl: true });
      }
    }
  };

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

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

  const setRowTpName = (row) => {
    const foundOption = tpOptions.value.find((option) => option.value * 1 === row.tp * 1);
    return foundOption?.label;
  };

  defineExpose({
    iniData,
    getData,
  });
</script>
