<template>
  <BasicDrawer v-bind="$attrs" title="详情" @register="registerDrawer"  :width="pwidth" > 
      <a-card  :bordered="false" style="width: 98%">
      <template #title>
        <span v-html="pageTitle" style="font-weight: 700;font-size:17px;"> </span>
      </template>
      <template #extra>
        <a href="#" @click="handleShowFile">查看原文</a>
      </template>
      <div v-for="(content,ind) in allHilight" :key="ind" style="line-height:30px;font-size:15px;font-weight: 500;">
        <span v-html="content"> </span>
        <a-divider></a-divider>
      </div>
       <a-button type="link" @click="closeDrawer" style="text-align:center;float:right">关闭</a-button>
      </a-card>
  </BasicDrawer>
</template>
<script lang="ts" setup>

  import { ref,unref } from 'vue';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
  import { Base64 }  from 'js-base64';

    const pwidth = ref();
    const pageTitle = ref("详细信息");
    const fpath = ref("");
    const allHilight=ref([]);
    const { getIsMobile } = useAppInject();
    const [registerDrawer,{closeDrawer}] = useDrawerInner(async (param) => {
      pageTitle.value = param.data.name
      allHilight.value =  param.data.allHilight;
      fpath.value = param.data.fpath;
 
      if(unref(getIsMobile)) {
        pwidth.value = "100%"
      } else {
        pwidth.value = "50%"
      }
    });

    function handleShowFile() {
      let globOnlineViewUrl:string = import.meta.env.VITE_GLOB_ONLINE_VIEW_URL;
      let globOnlineViewServerUrl:string = import.meta.env.VITE_GLOB_ONLINE_VIEW_SERVER_URL;
      let urlpath = globOnlineViewUrl+ fpath.value
      urlpath =  encodeURIComponent(Base64.encode(urlpath))
      window.open(globOnlineViewServerUrl+'?url='+urlpath); 
    }

</script>
<style scoped>
em {
  color:red;
}

</style>

