<template>
  <div style="max-height: calc(80vh - 45px); min-height: calc(80vh - 200px); margin: 0px 0px; background-color: #fff">
    <vxe-toolbar>
      <template #buttons>
        <vxe-input v-model="srhText" type="search" clearable placeholder="请输入" size="small" style="width: 70%; margin-left: 2px" />
        <a-button type="link" @click="handleSearch()">搜索</a-button>
        <a-button type="link" @click="refresh()">刷新</a-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      keep-source
      ref="tableRef"
      size="small"
      show-overflow
      height="auto"
      :data="list"
      :show-radio="true"
      :row-config="{ isCurrent: true, isHover: true }"
      @current-change="currentChangeEvent"
      :columnConfig="{ resizable: true }"
      :scroll-y="{ enabled: true, gt: 50 }"
      :radio-config="{ labelField: 'name', highlight: true }"
    >
      <vxe-column type="seq" width="10%" />
      <vxe-column field="caName" width="30%" sortable type="html" title="控制项名称" />
      <vxe-column field="domainName" sortable width="30%" type="html" title="所属领域" />
      <vxe-column field="labels" sortable width="30%" type="html" title="标签" />
      <vxe-column field="id" title="" :visible="false" />
    </vxe-table>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps, watch } from 'vue';
  import { getAllActDatas } from './api/AuditAct.api';

  interface Props {
    actIds: {
      type: String;
      default: '';
    };
  }

  const props = defineProps<Props>();
  const emit = defineEmits(['setCurAct']);

  const tableData = ref([]);
  const list = ref([]);
  const tableRef = ref();
  const loading = ref(false);
  const srhText = ref();

  const selAct = ref();

  // 根据文件变化筛选控制项
  watch(
    () => props.actIds,
    (newVal) => {
      if (!newVal) {
        list.value = tableData.value;
      } else {
        list.value = tableData.value.filter((item) => newVal.includes(item.id));
      }
    }
  );
  async function setAllActDatas() {
    loading.value = true;
    list.value = tableData.value = await getAllActDatas({});
    loading.value = false;
    selAct.value = list.value;
    const $table = tableRef.value;
    $table.setCurrentRow(selAct.value);
    emit('setCurAct', selAct.value);
  }

  const curSelRowIndex = ref();

  const currentChangeEvent = ({ rowIndex }) => {
    curSelRowIndex.value = rowIndex;
    emit('setCurAct', list.value[rowIndex]);
  };

  const handleSearch = () => {
    const filterVal = String(srhText.value).trim().toLowerCase();
    if (filterVal) {
      const filterRE = new RegExp(filterVal, 'gi');
      const searchProps = ['caName', 'domainName', 'labels'];
      let rest =  tableData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1));

      list.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          if(item[key]){
            item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
          }
        });
        return item;
      });
    } else {
      list.value = tableData.value;
    }

    selAct.value = list.value;
    const $table = tableRef.value;
    $table.setCurrentRow(selAct.value);
    emit('setCurAct', selAct.value);
  };

  async function searchActByText(text) {
    srhText.value = text;
    await setAllActDatas();
    await handleSearch();
  }

  async function refresh() {
    srhText.value = '';
    await handleSearch();
  }

  defineExpose({
    setAllActDatas,
    searchActByText,
  });
</script>
