<template>
  <a-layout>
    <a-layout-sider width="520" :style="{ overflow: 'hidden', height: '80vh' }">
      <ActionListLeft ref="refActionListLeft" @set-cur-act="setCurAct" :actIds="res.actIds" />
    </a-layout-sider>
    <a-layout-content>
      <a-card
        style="width: 100%; height: 100%; font-size: 14px; margin-left: 10px"
        :tab-list="tabDatas"
        :active-tab-key="activtyTabKey"
        :loading="loading"
        @tabChange="(key) => onTabChange(key)"
      >
        <div style="margin: 0px 0; height: 100%">
          <AuditCommonList
            ref="refAuditCommonList"
            :res="res"
            @callback="callboack"
            @call-back-act="callBackAct"
            @filter-change-event="filterChangeEvent"
          />
        </div>
        <template #tabBarExtraContent>
          <a-button type="link" @click="deleteRelations">删除关系</a-button>
        </template>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import ActionListLeft from './components/ActionListLeft.vue';
  import AuditCommonList from './components/AuditCommonList.vue';
  import { queryActRelates } from './index.api';
  import { srhCond } from './components/data/AuditCommon.data';
  const res = ref({ fileName: '', actIds: '' });
  const actIds = ref();
  const activtyTabKey = ref(1);
  const curAct = ref({});
  const loading = ref(false);
  const refAuditCommonList = ref();
  const refActionListLeft = ref();
  const srhContent = ref();
  const tableData = ref([]);
  const listData = ref([]);
  const tabDatas = [
    { tab: '合规库', key: 1 },
    { tab: '内控策略库', key: 2 },
    { tab: '内控制度库', key: 3 },
    { tab: '问题库', key: 4 },
    { tab: '检查方法库', key: 5 },
  ];

  const emit = defineEmits(['callback', 'callBackAct']);

  function setCurAct(act) {
    curAct.value = act;
    setDataList();
  }

  const onTabChange = (value) => {
    activtyTabKey.value = value;
    setDataList();
  };

  const handleSearch = (srhText) => {
    srhContent.value = srhText;
    if (!srhText) {
      tableData.value = listData.value;
      refAuditCommonList.value.setTableData(activtyTabKey.value, listData.value);
    } else {
      const filterContent = String(srhText).trim().toLowerCase();
      const filterRE = new RegExp(filterContent, 'gi');
      const searchProps = srhCond[activtyTabKey.value];
      let rest = listData.value.filter((item) => searchProps.some((key) => String(item[key]).toLowerCase().indexOf(filterContent) > -1));
      tableData.value = rest.map((row) => {
        const item = Object.assign({}, row);
        searchProps.forEach((key) => {
          item[key] = String(item[key]).replace(filterRE, (match) => `<span class="keyword-lighten" style="color:red">${match}</span>`);
        });
        return item;
      });
      refAuditCommonList.value.setTableData(activtyTabKey.value, tableData.value);
    }
  };
  // 根据文件变化筛选控制项
  async function filterChangeEvent(newRes) {
    res.value = newRes;
    res.value.actIds = newRes[0].actIds;
  }

  async function setDataList() {
    let actId = curAct.value?.id;
    loading.value = true;
    listData.value = tableData.value = await queryActRelates({
      tp: activtyTabKey.value,
      actId: actId,
    });
    loading.value = false;
    await nextTick();
    refAuditCommonList.value.setTableData(activtyTabKey.value, listData.value);
    loading.value = false;
  }

  function callboack(labelName) {
    srhContent.value = labelName || '';
    handleSearch(labelName);
    emit('callback', labelName);
  }

  const isFileList = ref(true);
  async function callBackAct(params, stp) {
    if (stp == 3) {
      let fileId = params?.fileId;
      activtyTabKey.value = 1;
      // await setDataList();
      nextTick(async () => {
        if (isFileList.value) {
          // fileDoc.value = fileData.value.find((item) => item.fileId * 1 == fileId * 1);
          // await showItem(fileDoc.value);
        }
      });
    } else {
      emit('callBackAct', params, stp);
    }
  }

  async function deleteRelations() {
    let tp = activtyTabKey.value;
    let actId = curAct.value?.id;
    await refAuditCommonList.value.delRels(tp, actId);
    await setDataList();
  }

  async function iniActList(param) {
    if (param) {
      await refActionListLeft.value.searchActByText(param);
    } else {
      await refActionListLeft.value.setAllActDatas();
    }
  }

  defineExpose({
    iniActList,
    handleSearch,
  });
</script>

<style scope>
  .underline-input {
    border-left: none;
    border-top: none;
    border-right: none;
    width: 100%;
  }
  .ant-tabs-large > .ant-tabs-nav .ant-tabs-tab {
    padding: 16px 0;
    font-size: 14px;
  }

  blockquote.info {
    border-left-color: rgb(91, 192, 222);
    color: rgb(91, 192, 222);
    background-color: rgb(244, 248, 250);
  }
  blockquote {
    display: block;
    unicode-bidi: isolate;
  }

  blockquote {
    padding: 0px 5px;
    color: rgb(119, 119, 119);
    border-left: 4px solid rgb(221, 221, 221);
  }

  .layout {
    background: #fff;
    height: calc(90vh - 120px);
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    min-height: 400px;
  }
</style>
