<template>
  <div style="height: calc(80vh - 110px)">
    <vxe-grid
      size="small"
      ref="tableRef"
      auto-resize
      keep-source
      height="auto"
      v-bind="gridOptions"
      :loading="loading"
      :columnConfig="{ resizable: true }"
      :row-config="{ isCurrent: true, isHover: true }"
      @checkbox-change="handleCellClick"
      @checkbox-all="handleSelectAll"
      v-on="gridEvents"
    >
      <!-- :check-config="{ highlight: true }" -->
      <template #fileName_default="{ row }">
        <vxe-button mode="text" size="small" status="primary" @click="showFileContent(row)">
          <span v-html="row.fileName"></span>
        </vxe-button>
      </template>
      <!-- <template #pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        />
      </template> -->
    </vxe-grid>
    <FileViewerModal @register="regShowFileContentModal" :useStaticPrefixForDocx="true" />
    <a-drawer
      title="已选择"
      v-model:visible="isOpenDrawer"
      placement="right"
      position="relative"
      :closable="true"
      :mask="false"
      :get-container="false"
      :style="{ position: 'absolute' }"
      width="30%"
    >
      <template #extra>
        <a-button type="link" @click="goCheckList">创建检查列表</a-button>
        <a-button type="link" @click="isOpenDrawer = false">关闭</a-button>
      </template>
      <div style="height: 62vh; overflow: hidden">
        <vxe-grid
          v-bind="gridOptionsSekect"
          border
          stripe
          show-overflow
          auto-resize
          max-height="100%"
          keep-source
          :columnConfig="{ resizable: true }"
          :row-config="{ isCurrent: true, isHover: true }"
          ref="selectTableRef"
        />
        <!--  :check-config="{ highlight: true }" -->
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
  import { deleteActRel } from '../index.api';
  import { auditCols } from './ReportCommon.data';
  import { VXETable } from 'vxe-table';
  import { useModal } from '/@/components/Modal';
  import FileViewerModal from '/@/components/onlinePreview/FileViewerModal.vue';

  const [regShowFileContentModal, { openModal }] = useModal();

  const emit = defineEmits(['callback']);

  const tableRef = ref();
  const loading = ref(false);
  const tableData = ref([]);
  const curPageData = ref([]);

  const isOpenDrawer = ref(false);
  const curColumns = ref([]);
  const curDatas = ref([]);

  const curTp = ref();

  const gridOptionsSekect = reactive({
    border: true,
    showFooter: true,
    columns: curColumns,
    data: curDatas,
  });

  const gridOptions = reactive({
    border: false,
    showOverflow: true,
    loading: false,
    scrollY: {
      enabled: true,
      gt: 50,
    },
    checkboxConfig: {
      highlight: true,
      checkStrictly: false,
    },
    columnConfig: {
      useKey: false,
      resizable: true,
    },
    columns: [],
    data: tableData,
  });

  function getSelectIds() {
    let ids = [];
    const $table = tableRef.value;
    if ($table) {
      const selRecords = $table.getCheckboxRecords();
      selRecords.forEach(function (ele) {
        ids.push(ele.id);
      });
    }
    return ids;
  }

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  });

  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage || 1;
    tablePage.pageSize = pageSize || 10;
    tablePage.total = tableData.value.length;
    let st = (tablePage.currentPage - 1) * tablePage.pageSize;
    let end = st + tablePage.pageSize;
    curPageData.value = tableData.value.slice(st, end);
  };

  function setTableData(tp, list) {
    curTp.value = tp;
    tableData.value = list;
    let newwCols = structuredClone(auditCols[tp]);
    newwCols.unshift({ type: 'checkbox', visible: true, width: '40', showOverflow: false });
    gridOptions.columns = newwCols;
    //handlePageChange({ currentPage: 1, pageSize: 10 });

    curColumns.value = auditCols[tp];
    curDatas.value = [];
    isOpenDrawer.value = true;
  }

  async function delRels(tp, actId) {
    let ids = await getSelectIds();
    if (ids.length == 0) {
      VXETable.modal.message({ content: '请选择待删除的记录', status: 'warning' });
      return false;
    }
    await deleteActRel({ tp: tp, actId: actId, ids: ids.join(',') });
  }

  const gridEvents = {
    cellClick({ row, column, cell }) {
      const $table = tableRef.value;
      $table.toggleCheckboxRow(row);
      handleCellClick({ row, column, cell });
    },
  };

  const handleCellClick = ({ row, column, cell }) => {
    if (column.field == 'fileName') {
      cell.stopPropagation();
    }

    curDatas.value = getSelectDatas();
    //emit("callback",curTp.value,getSelectDatas())
  };

  function getSelectDatas() {
    let datas = [];
    const $table = tableRef.value;
    if ($table) {
      const selRecords = $table.getCheckboxRecords();
      selRecords.forEach(function (ele) {
        datas.push(ele);
      });
    }
    return datas;
  }

  function showFileContent(row) {
    if (row.filePath) {
      openModal(true, {
        record: row,
        isUpdate: false,
        showFooter: true,
      });
    }
  }

  function handleSelectAll() {
    curDatas.value = getSelectDatas();
    //emit("callback",curTp.value,getSelectDatas())
  }

  function showSelectList() {
    isOpenDrawer.value = true;
  }

  function goCheckList() {
    emit('callback', curTp.value);
  }

  defineExpose({
    getSelectIds,
    getSelectDatas,
    setTableData,
    delRels,
    showSelectList,
  });
</script>
