<template>
  <a-drawer
      title="文件修改记录"
      placement="right"
      :closable="true"
      width="60%"
      :open="showDrawer"
      :loading="loading"
      @close="closeDrawer"
    >

    <template #extra>
      <a-button style="margin-right: 8px" @click="closeDrawer">关闭</a-button>
    </template>

    <div class="gutter-box">
      <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" style="width: 300px;"/>
              </template>
            </vxe-form-item>
          </vxe-form>
          <vxe-button  mode="text" status="primary" @click="handleSearch()">搜索</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-table
          ref="tableRef"
          show-overflow
          :loading="loading"
          height="auto"
          :data="tableData"
          @checkbox-change="checkBoxChangeEvent" 
          @current-change="currentChangeEvent" 
          :row-config="{ isCurrent: true, isHover: true }"
          :columnConfig="{ resizable: true }"
          :scroll-y="{ enabled: true, gt: 50 }"
          :checkbox-config="{ labelField: 'name', highlight: true }"
        >
          <vxe-column type="checkbox" width="70"/>
          <vxe-column field="fileName" type="html" title="文件名称" />
          <vxe-column field="issued" type="html" title="发布单位" />
          <vxe-column field="issuedDate" type="html" title="发布日期" />
          <vxe-column field="docNo" type="html" title="发文号" />
          <vxe-column field="applyRangeCodes" type="html" title="适用范围" />
          <vxe-column field="labelNames" type="html" title="标签" :visible="false"/>
          <vxe-column field="fileTp" type="html" title="类型" />
          <vxe-column field="id" title="" :visible="false" />
          
      </vxe-table>
    </div> 
  </a-drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
 
  import { queryAllList,saveFileLink,findLinkFile,findHistoryByHisid } from '../DocFiles.api';

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

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

  const tableRef = ref();
  const showDrawer = ref(false)
  const curSelectFile = ref<Recordable>({})

  const selectDatas = ref([]);

  async function iniData(file) {
    selectDatas.value = []
    curSelectFile.value = file
    showDrawer.value = true

    nextTick(async ()=>{
      
      tableData.value =listData.value = await findHistoryByHisid({hisid:file.id});
     
    })
  
  }

  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;
    }
  };

  const checkBoxChangeEvent = () => {
    const $table = tableRef.value;
    selectDatas.value = $table?.getCheckboxRecords();
  }

  const currentChangeEvent = ({ row }) => {
    const $table = tableRef.value;
    $table.toggleCheckboxRow(row)
    checkBoxChangeEvent();
  };


  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 save2Submit = async () => {
  //   const params = {}
  //   const ids = getSelectIds();
  //   params["tids"] = ids;
  //   params["sid"] = curSelectFile.value.id;
  //   await saveFileLink(params);
  // }

  const closeDrawer = async() => {
    showDrawer.value = false
  }

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

<style lang="less" scoped>
.gutter-box {
  padding: 4px 2px;
  height: 100%;
}
</style>

