<template>
   <div style="height: calc(80vh - 100px)">
    <vxe-table
      ref="tableRef"
      size="small"
      auto-resize
      height="90%"
      :data="tableData"
      @cell-click="clickRowEvent"
      :row-config="{ isCurrent: true, isHover: true }"
      :columnConfig="{ resizable: true }"
      :scroll-y="{ enabled: true, gt: 40 }"
      :radio-config="{ labelField: 'name', highlight: true }"
    >
      <vxe-column type="seq" width="60" />
      <vxe-column field="fileName" type="html" title="文件名称" min-width="15%">
      </vxe-column>
      <!-- <vxe-column field="fileName" type="html" title="文件名称" min-width="15%" /> -->
      <vxe-column field="issued" type="html" title="发布单位" width="30%" />
      <vxe-column field="docNo" type="html" title="发布文号"  width="20%" />/>
      <vxe-column field="id" title="" :visible="false" />
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { VxeColumnPropTypes } from 'vxe-table';
  interface RowVO {
    fileName: string;
    issued: string;
    docNo: string;
    issuedSta: number;
    id: number;
    issuedDate: string;
  }
  const emit = defineEmits(['showItem']);
  const tableData = ref([]);
  const listData = ref([]);
  const tableRef = ref();

  const staList = [
    { label: '生效中', value: 1 },
    { label: '即将实施', value: 2 },
    { label: '废止', value: 3 },
  ];
  const formatterSta: VxeColumnPropTypes.Formatter<RowVO> = ({ cellValue }) => {
    const item = staList.find((item) => item.value === cellValue);
    return item ? item.label : cellValue;
  };

  async function iniData(allData) {
    tableData.value = listData.value = allData;
  }

  const handleSearch = (srhTxt) => {
    const filterSrhTxt = String(srhTxt).trim().toLowerCase();
    if (filterSrhTxt) {
      const filterRE = new RegExp(filterSrhTxt, 'gi');
      const searchProps = ['fileName', 'issued','docNo'];
      let rest = listData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterSrhTxt) > -1));
      tableData.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
        });
        return item;
      });
    } else {
      tableData.value = listData.value;
    }
  };

  const curSelRowIndex = ref();
  const clickRowEvent = ({ rowIndex }) => {
    const $table = tableRef.value;
    $table.setRadioRow(listData.value[rowIndex]);
    curSelRowIndex.value = rowIndex;
    showFileItems(listData.value[rowIndex], null);
  };

  function showFileItems(row, e) {
    e?.stopPropagation();
    emit('showItem', row);
  }


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