<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-show="!collapsed" v-model="srhText" type="search" clearable placeholder="请输入" size="small" style="width: 70%; margin-left: 2px" />
        <a-button  v-show="!collapsed" type="link" @click="handleSearch()">搜索</a-button>
        <a-button  v-show="!collapsed" type="link" @click="refresh()">刷新</a-button>
        <menuUnfoldOutlined v-if="collapsed" class="trigger"  @click="closeActArea" />
        <MenuFoldOutlined v-else class="trigger" @click="closeActArea" />
      </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="40" />
      <vxe-column :visible="isShowColumn" field="caName" width="30%" sortable type="html" title="控制项名称" />
      <vxe-column :visible="isShowColumn"   field="domainName" sortable width="30%" type="html" title="所属领域" />
      <vxe-column :visible="isShowColumn" 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, reactive } from 'vue';
  import { getAllActDatas } from '../components/api/AuditAct.api';
  import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';

  const emit = defineEmits(['setCurAct','setCollapsed']);
  const collapsed = ref(false)
  const tableData = ref([]);
  const list = ref([]);
  const tableRef = ref();
  const loading = ref(false);
  const srhText = ref();
  const isShowColumn = ref(true)
  const selAct = ref();

  async function setAllActDatas() {
    loading.value = true;
    list.value = tableData.value = await getAllActDatas({});
    loading.value = false;
    selAct.value = list.value[0];
    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 searchProps = ['caName', 'domainName', 'labels'];
      list.value = tableData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterVal) > -1));
    } else {
      list.value = tableData.value;
    }

    selAct.value = list.value[0];
    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();
  }

  function closeActArea() {
    collapsed.value = !collapsed.value
    isShowColumn.value = !isShowColumn.value 
    emit('setCollapsed');
  }



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


<style scope>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>

