<template>
  <div style="margin: 0px 0px; background-color: #fff">
    <a-card
      style="width: 100%; font-size: 14px; background: "
      :bordered="false"
      size="small"
      contentFullHeight="true"
      :tab-list="tabDatas"
      :active-tab-key="activeKey"
      :loading="loading"
      @tabChange="(key) => onTabChange(key)"
      :bodyStyle="{ height: '77vh' }"
    >
      <div v-if="activeKey == '1'" style="height:100%; padding: 0px">
        <vxe-table
          border
          keep-source
          ref="refFileTable"
          size="small"
          height="auto"
          :data="fileList"
          :row-config="{ isCurrent: true, isHover: true,useKey:true }"
          @cell-click = "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="50"/>
          <vxe-column field="name" 
            :filters="textFilters" 
            :filter-method="textFilterMethod" 
            :filter-render="textFilterRender"
            sortable 
            type="html" 
            title="控制项名称"/>
          <vxe-column field="id" title="" :visible="false" />
        </vxe-table>
      </div>
      <div v-else-if="activeKey == '3'" style="height:100%; padding: 0px">
          <ProjectRuleList ref="refProjectRuleList" @rowChangeEvent="searchByItemName"></ProjectRuleList>
        </div>
      <template #tabBarExtraContent>
          <a-button type="link" @click="clearFilter()">清空选择</a-button>
      </template>
    </a-card>
  </div>
</template>

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

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


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

  const loading = ref(false);

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

  const activeKey = ref("1");
  const onTabChange = async (value) => {
    activeKey.value = value;
    if(value=="3") {
      nextTick(async()=>{
        await refProjectRuleList.value.iniData(curProject.value)
      })
    }
    emit("reloadData")
  };

  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) {
    fileList.value = [];
    actList.value = [];
    actList.value.splice(0, actList.value.length, ...pActs);
    fileList.value.splice(0, fileList.value.length, ...pFiles);
    curProject.value = project
  }

  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()
    }
    if ($actTable) {
      $actTable.clearCurrentRow()
    }
    if(activeKey.value=="3") {
      emit('reloadData');
    } else {
      emit('clearFilter');
    }
    
  }

  function searchByItemName(row) {
    emit('searchByItemName', row);
  }

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