<template>
  <a-drawer title="" :mask="true" maskClosable="true" placement="bottom" height="100%" :visible="showDrawer" @close="closeUserDrawer">
    <template #extra>
      <a-button style="margin-right: 8px" @click="closeUserDrawer">取消</a-button>
    </template>
    <a-breadcrumb>
      <a-breadcrumb-item><a-button type="link" @click="setCurActiveKey(1)">文件</a-button></a-breadcrumb-item>
      <a-breadcrumb-item><a-button type="link" @click="setCurActiveKey(2)">合规条目</a-button></a-breadcrumb-item>
      <a-breadcrumb-item><a-button type="link" @click="setCurActiveKey(3)">检查点</a-button></a-breadcrumb-item>
      <a-breadcrumb-item />
    </a-breadcrumb>
    <a-card v-show="curActiveKey == 1" bordered="false" style="width: 100%">
      <div style="margin: 10px; height: 70vh; width: 100%;">
        <FileViewer ref="refShowFile" />
      </div>
    </a-card>
    <a-card title="" v-show="curActiveKey == 2" :bordered="false" style="width: 100%">
      <!-- <a-collapse v-model:activeKey="curActiveKey" accordion style="width:100%;margin:0px;padding:0px;" expand-icon-position="right">
        <a-collapse-panel  header="合规条目"  style="width:100%; overflow-y: hidden;max-height:40vh;"> -->
      <a-descriptions title="" bordered :column="1" style="width: 100%; overflow-y: auto; max-height: 70vh; margin: 7px">
        <a-descriptions-item label="合规条目">{{ complianeItemData?.item }}</a-descriptions-item>
        <a-descriptions-item label="合规内容">{{ complianeItemData?.complineContent }}</a-descriptions-item>
        <a-descriptions-item label="控制项">{{ complianeItemData?.caNames }}</a-descriptions-item>
        <a-descriptions-item label="参考文件">
          {{ complianeItemData?.fileName }}
        </a-descriptions-item>
      </a-descriptions>
      <!-- </a-collapse-panel>
      </a-collapse>   -->

      <a-card v-show="curActiveKey == 3" :bordered="false" style="width: 100%" />
    </a-card>
  </a-drawer>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { getAllCheckMethodByItem } from '/@/views/newlib/components/api/AuditCheckMethodItem.api';
  import { queryAllChecks } from '/@/views/newlib/components/api/AuditCheckMethod.api';
  import FileViewer from '/@/components/onlinePreview/FileViewer.vue';

  const emit = defineEmits(['callback']);
  const showDrawer = ref(false);
  const curActiveKey = ref(1);
  const complianeItemData = ref();

  const refShowFile = ref();

  function closeUserDrawer() {
    showDrawer.value = false;
  }

  async function iniData(checkItem) {
    const retData = await getAllCheckMethodByItem(checkItem);
    console.log(retData, 'retData');
    complianeItemData.value = retData[0];
    showDrawer.value = true;
    let fileTp = retData[0].fileTp;
    let fileName = retData[0].fileName;
    if (!fileTp) {
      let pos = fileName.lastIndexOf('.');
      if (pos > -1) {
        fileTp = fileName.substring(pos + 1);
      }
    }
    let fileObj = {
      fileName: fileName,
      fileId: retData[0].fileId,
      fileTp: fileTp,
      filePath: retData[0].filePath,
    };
    nextTick(async () => {
      await refShowFile.value.setDocFile(fileObj);
    });
  }

  async function setAllCheckMethod(checkItem) {
    const retData = await queryAllChecks(checkItem);
    complianeItemData.value = retData[0];
    showDrawer.value = true;
  }

  function setCurActiveKey(key) {
    curActiveKey.value = key;
  }

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

<style scope>
  .layout {
    background: #fff;
    height: calc(90vh - 120px);
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    min-height: 400px;
  }
  .ant-descriptions-item-label {
    width: 150px;
  }

  .cell-content {
    text-align: left;
    white-space: normal; /* 允许文本换行 */
    word-wrap: break-word; /* 按单词折行 */
    overflow-wrap: break-word; /* 按单词折行 */
    max-width: 100%; /* 根据需要设置最大宽度 */
  }
</style>
