<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-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"></FileViewer>
      </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-card>
  </a-drawer>
</template>

<script setup lang="ts">
  import { ref,nextTick } from 'vue';
  import { getAllCheckMethodByItem } from './api/AuditCheckMethodItem.api';
  import { queryAllChecks } from './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>


