<template>
  <div style="height: 100%">
    <vxe-toolbar>
      <template #buttons>
        <vxe-form :data="formData">
          <vxe-form-item title="名称" field="fileName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.fileName" placeholder="请输入名称" clearable @keyup="handleSearch" />
            </template>
          </vxe-form-item>
        </vxe-form>
      </template>
      <template #tools>
        <vxe-button  mode="text" status="primary" @click="handleSubmit()">确定</vxe-button>
        <vxe-button mode="text" size="small" @click="innerCloseDrawer">取消</vxe-button>
      </template>
    </vxe-toolbar>
    
    <vxe-table
      ref="tableRef"
      show-overflow
      max-height="80%"
      :data="tableData"
      @current-change="currentChangeEvent"
      :row-config="{ isCurrent: true, isHover: true }"
      :columnConfig="{ resizable: true }"
      :scroll-y="{ enabled: true, gt: 50 }"
      :radio-config="{ labelField: 'name', highlight: true }"
    >
      <vxe-column type="radio" width="70" />
      <vxe-column field="fileName" type="html" title="文件名称" />
      <vxe-column field="fileTp" type="html" title="类型" />
      <vxe-column field="id" title="" :visible="false" />
    </vxe-table>
  </div>
</template>

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

  import { queryAllList } from '/@/views/doc/DocFiles.api';

  const emit = defineEmits(['selectFileDoc', 'closeDrawer']);
  const formData = reactive({
    fileName: '',
  });

  const tableData = ref([]);
  const listData = ref([]);

  const tableRef = ref();
  async function iniData() {
    listData.value = tableData.value = await queryAllList({});
  }

  const handleSearch = () => {
    const filterFileName = String(formData.fileName).trim().toLowerCase();
    if (filterFileName) {
      const filterRE = new RegExp(filterFileName, 'gi');
      const searchProps = ['fileName', 'fileTp'];
      const rest = listData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterFileName) > -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;
    }
  };

  async function handleSubmit() {
    const $table = tableRef.value;
    const selRecords = $table.getRadioRecord();
    emit('selectFileDoc', selRecords);
  }

  const curSelRowIndex = ref();

  const currentChangeEvent = ({ rowIndex }) => {
    const $table = tableRef.value;
    $table.setRadioRow(listData.value[rowIndex]);
    curSelRowIndex.value = rowIndex;
  };
  function innerCloseDrawer() {
    emit('closeDrawer');
  }
  defineExpose({
    iniData,
  });
</script>
