<template>

    <a-card
      style="width: 100%; font-size: 14px; height:100%;"
      :bordered="false"
      size="small"
      contentFullHeight="true"
      :tab-list="tabDatas"
      :active-tab-key="activeKey"
      :loading="loading"
      @tabChange="(key) => onTabChange(key)"
      :bodyStyle="{ height: '90%' }"
    >
      <div v-if="activeKey == '1'" style="height:100%; padding: 0px">
        <vxe-table
          border
          keep-source
          show-overflow
          ref="refFileTable"
          size="small"
          height="auto"
          :data="fileList"
          :row-config="{ isCurrent: true, isHover: true,useKey:true }"
          @current-change="fileRowChangeEvent"
          :column-config="{ resizable: true,useKey:true }"
          :scroll-y="{ enabled: true, gt: 50 }"
          :radio-config="{ labelField: 'label', highlight: true }"
        >
          <vxe-column type="seq" width="50" />
          <vxe-column
            field="label"
            sortable
            type="html"
            title="文件名称"
            :filters="textFilters" 
            :filter-method="textFilterMethod" 
            :filter-render="textFilterRender"
            />
          <vxe-column field="value" title="" :visible="false" />
        </vxe-table>
      </div>
      <div v-else-if="activeKey == '2'" style="height:100%; padding: 0px">
        <vxe-table
          border
          keep-source
          ref="refActTable"
          size="small"
          show-overflow
          height="auto"
          :data="actList"
          :show-radio="true"
          :row-config="{ isCurrent: true, isHover: true,useKey:true }"
          @current-change="actRowChangeEvent"
          :column-config="{ resizable: true,useKey:true}"
          :scroll-y="{ enabled: true, gt: 50 }"
          :radio-config="{ labelField: 'name', highlight: true }"
        >
          <vxe-column type="seq" width="55" />
          <vxe-column 
          field="name" 
          sortable 
          type="html"

          :filters="textFilters" 
          :filter-method="textFilterMethod" 
          :filter-render="textFilterRender"
          
          title="控制项名称" />
          <vxe-column field="id" title="" :visible="false" />
        </vxe-table>
      </div>
      <template #tabBarExtraContent>
          <a-button type="link" @click="clearFilter()">清空选择</a-button>
      </template>
    </a-card>

</template>

<script setup lang="ts">
  import { ref} from 'vue';
  import { VxeColumnPropTypes } from 'vxe-table';

  const refFileTable = ref();
  const refActTable = ref();
  const actList = ref([]);
  const fileList = ref([]);
  const curProject = ref([])


  const emit = defineEmits(['fileCallback', 'actCallback', 'setLeftWidth',"showProject","clearFilter"]);

  const loading = ref(false);

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

  const activeKey = ref('1');
  const onTabChange = (value) => {
    activeKey.value = value;
    emit("clearFilter")
  };

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

  const textFilters = ref([
    { data: '' }
  ])

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



  async function iniData(project,pFiles,pActs) {
    curProject.value = project
    const $table = refFileTable.value;
    if ($table) {
      fileList.value = pFiles;
      actList.value = pActs;
    }

  }

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

  function actRowChangeEvent({ row }) {
    emit('actCallback', row);
  }

  function clearFilter() {
    const $fileTable = refFileTable.value 
    const $actTable = refActTable.value 
    if ($fileTable) {
      $fileTable.clearCurrentRow()
    }
    if ($actTable) {
      $actTable.clearCurrentRow()
    }

     emit('clearFilter');

  }

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