<template>
    <Skeleton
        active
        :loading="loading">
      <div v-if="!show" >
        <page-title :title="data?.alias"/>
        <a-page-header class="ns-page-header">
          <template #extra>
            <ns-button @click="navigateBack">返回</ns-button>
            <ns-button @click="onAdd" type="primary">创建</ns-button>
          </template>
        </a-page-header>
        <div class="content-wrapper">
          <NsMarkDown
              :value="data?.detail"
              :previewOnly="true"
              :htmlPreview="true"/>
        </div>
      </div>
      <div v-if="show" class="frame-wrapper" style="height: 100%">
        <iframe :src="src"  id="frame"    height="100%" width="100%" ></iframe>
      </div>
    </Skeleton>
</template>

<script lang="ts">
import {defineComponent, nextTick, onUnmounted, ref} from 'vue';
import NsMarkDown from '/@/component/markdown.vue';
import {http} from "/nerv-lib/util";
import {useRoute, useRouter} from "vue-router";
import {useNavigate} from "/nerv-lib/use/use-navigate";
import {NsMessage} from "/nerv-lib/component";
import {Skeleton} from "ant-design-vue";
import {APP} from "/@/router/index.ts";
import Cookie from "js-cookie";

export default defineComponent({
  name: 'ResourceTypeDetail',
  props: {},
  components: {NsMarkDown, Skeleton},
  setup(props, {attrs}) {
    let loading = ref(true);
    let data = ref({});
    const route = useRoute();
    const router = useRouter();
    const params = route.params;
    const code = params?.id;
    const { navigateBack } = useNavigate();
    let src = ref('');
    let show = ref(false);
    let frameRef = ref(null);
    let createPageAddr = '';
    http.get(`/api/${APP}/objs/ManageResourceTypes/` + params.id).then(res => {
      loading.value = false;
      data.value = res;
      createPageAddr = res['createPageAddr'];
      src.value = createPageAddr + '?nervsid=' + Cookie.get('nervsid');
      // src.value = 'http://100.68.2.97:4200/nervui-mock-ra/mr/instance/add?nervsid='+Cookie.get('nervsid');
      // src.value = 'http://localhost:4200/nervui-mock-ra/mr/instance/add?nervsid='+Cookie.get('nervsid');
    })
    function onAdd() {
      if (createPageAddr) {
        let flag = !/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/.test(createPageAddr);
        if (flag) {
          NsMessage.error('不合法地址');
        } else {
          show.value = true;
        }
      } else {
        NsMessage.error('无对应资源页面');
        return;
      }
      // loading.value = true;
      nextTick(() => {
        load();
      });
    }
    
    function handleMsg(e) {
      const frame = frameRef.value;
        const data  = e?.data;
        if(data) {
          if(data.type === 'back') {
            window.removeEventListener('message', handleMsg);
            show.value = false;
            // router.push({name:'resourceDetail', path: '/rm/resourceManage/list/'+params.id + '/detail'});
          }
          if(data.type === 'successBack') {
            window.removeEventListener('message', handleMsg);
            router.push({name:'resource', path: '/rm/resourceManage/list'});
          }
        }
    }

    function load() {
      frameRef.value = document.getElementById('frame');
      const frame = frameRef.value;
      const msg = {
        type: 'style',
        showLayout: false,
        data: {
          typeCode: params.id
        }
      }
      if(frame) {
        loading.value = false;
        frame.onload = function (e) {
          frame.contentWindow?.postMessage(msg, src.value );
        }
        window.addEventListener('message', handleMsg);
      }
    }
    onUnmounted(()=>{
      window.removeEventListener('message', handleMsg);
    })
    return {
      data,
      navigateBack,
      code,
      loading,
      onAdd,
      show,
      src
    };
  },
  methods: {
  }
})
</script>

<style lang="less" scoped>
.ant-page-header {
  padding: 0 24px;
  margin-bottom: 15px;
}
:deep(.ant-page-header-heading-extra) {
  margin-right: auto !important;
  margin-left: 0;
}
.content-wrapper {
  margin: 0 24px
}
#frame {
  border: 0;
}
</style>
