<template>
  <div style="max-height: calc(80vh - 60px); min-height: calc(50vh - 100px); margin: 0px 0px; background-color: #fff">
    <a-card
      style="width: 100%; font-size: 14px"
      :bordered="false"
      contentFullHeight="true"
      :tab-list="tabDatas"
      :active-tab-key="activeKey"
      :loading="loading"
      @tabChange="(key) => onTabChange(key)"
      :bodyStyle="{ height: '99%' }"
    >
      <div v-if="activeKey==1" style="height:75vh;padding:10px">
        <vxe-table
          border
          keep-source
          ref="refFileTable"
          size="small"
          show-overflow
          height="auto"
          :data="fileList"
          :row-config="{ isCurrent: true, isHover: true }"
          @current-change="fileRowChangeEvent"
          :columnConfig="{ resizable: true }"
          :scroll-y="{ enabled: true, gt: 50 }"
          :radio-config="{ labelField: 'name', highlight: true }"
        >
          <vxe-column type="seq" width="50" />
          <vxe-column field="fileName" width="30%" sortable  type="html" title="文件名称"></vxe-column>
          
          <vxe-column field="docNo" sortable type="html" title="发文号"></vxe-column>
         
          <vxe-column field="id" title="" :visible="false" />
        </vxe-table>
      </div>
      <div v-else-if="activeKey==2" style="height:75vh;padding:10px">
        <vxe-table
            keep-source
            ref="refActTable"
            size="small"
            show-overflow
            height="auto"
            :data="actList"
            :show-radio="true"
            :row-config="{ isCurrent: true, isHover: true }"
            @current-change="actRowChangeEvent"
            :columnConfig="{ resizable: true }"
            :scroll-y="{ enabled: true, gt: 50 }"
            :radio-config="{ labelField: 'name', highlight: true }"
          >
            <vxe-column type="seq" width="50" />
            <vxe-column field="caName" sortable type="html" title="控制项名称"/>
            <vxe-column field="domainName" sortable width="30%" type="html" title="所属领域" />
            <vxe-column field="id" title="" :visible="false" />
          </vxe-table>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { VxeSelectEvents, VxeTablePropTypes, VxeColumnPropTypes, VxeTableInstance, VxeTableEvents } from 'vxe-table';

  import { defHttp } from '/@/utils/http/axios';

  const allActUrl = '/audit/auditAct/allActs';
  const allFileUrl = '/doc/docFiles/queryAllList';
  const getAllCheckMethodFiles = '/audit/auditCheckMethodItem/getAllCheckMethodFiles';

  const refFileTable = ref()

  const refActTable = ref()

  const actList = ref([]);
  const fileList = ref([]);
  const emit = defineEmits(['fileCallback','actCallback']);

  const textFilterRender: VxeColumnPropTypes.FilterRender = {
    name: 'VxeInput',
  };

  function textFilterMethod({ option, row, column }) {
  if (option.data) {
    return `${row[column]}`.indexOf(option.data) > -1;
  }
  return true;
}

  const loading = ref(false);
  const tabDatas = [
    { tab: '文件列表', key: 1 },
    { tab: '控制项', key: 2 }
  ];

  const activeKey = ref(1)
  const onTabChange = (value) => {
    activeKey.value = value;
  };

  
  async function iniData() {
    fileList.value = []
    actList.value = await defHttp.get({url: allActUrl, params:{}})
    const  retFileList = await defHttp.get({url: allFileUrl, params:{}})
    const checkMethodFiles = await defHttp.get({url: getAllCheckMethodFiles, params:{}})
    checkMethodFiles.forEach(element => {
      const result = retFileList.find(item => item.id === element.value);  
      fileList.value.push(result)
    });

  }

  function fileRowChangeEvent({row}) {;
    emit("fileCallback",row)
  }

  function actRowChangeEvent({row}) {
    emit("actCallback",row)
  }

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

