<template>
  <view>
    <Parse 
      :content="content" 
      :tagStyle="tagStyle"
      :classStyle="classStyle"
      :contentStyle="contentStyle"
      @linkTap="linkTap"
      @viewTap="viewTap"
    />
  </view>
</template>

<script setup lang="ts">
import Parse from '@/components/display/parse/Parse.vue';
import { onMounted, ref } from 'vue';
import { doLoadDynamicDetailData, type IHomeCommonCategoryDynamicData } from '../article/data/CommonCategoryDynamicData';
import { getDynamicScript } from '../article/data/CommonCategoryScript';

const props = defineProps({
  content: {
    type: null,
    default: ''
  },
  linkTapScript: {
    type: String,
    default: '',
  },
  viewTapScript: {
    type: String,
    default: '',
  },
  tagStyle: {
    type: Object,
    default: () => ({}),
  },
  classStyle: {
    type: Object,
    default: () => ({}),
  },
  contentStyle: {
    type: Object,
    default: () => ({}),
  },
});

const finalContent = ref('');

async function loadContent() {
  if (typeof props.content === 'string') {
    finalContent.value = props.content;
  } else if (typeof props.content === 'object' && props.content.content) {
    finalContent.value = await doLoadDynamicDetailData(props.content.content as IHomeCommonCategoryDynamicData);
  }
}

function linkTap(href: string) {
  if (props.linkTapScript) {
    getDynamicScript().execute(props.linkTapScript, {
      main: { href },
    }) as any;
  }
}
function viewTap(id: string) {
  if (props.viewTapScript) {
    getDynamicScript().execute(props.viewTapScript, {
      main: { id },
    }) as any;
  }
}

onMounted(() => {
  loadContent();
});
</script>