<script setup lang="ts">
import type { IExecuteRawResponse } from '@/api'
import { computed } from 'vue'
import MarkdownIt from 'markdown-it'
import DOMPurify from 'dompurify'
import Iod from './Iod.vue'

const props = defineProps<{
  executePlans: IExecuteRawResponse[]
  nodeId?: string
  actionId?: string
}>()

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
})

const data = computed(() => {
  for (const result of props.executePlans) {
    if (result.NodeId === props.nodeId && result.ActionHistory) {
      for (const action of result.ActionHistory) {
        if (action.ID === props.actionId) {
          return action
        }
      }
    }
  }
  return null
})

const action_Result = computed(() => {
  const html = md.render(data.value?.Action_Result ?? '')
  return DOMPurify.sanitize(html)
})
</script>

<template>
  <div v-if="data" class="card-item w-full pl-[56px] pr-[41px]">
    <!-- 分割线 -->
    <div class="h-[1px] w-full bg-[#494B51] my-[8px]"></div>
    <div class="text-[16px] flex items-center gap-1 text-[var(--color-text-secondary)]">
      {{ data.Description }}
      <Iod />
    </div>
    <div class="rounded-[8px] p-[15px] text-[14px] bg-[var(--color-bg-quaternary)] mt-1">
      <div class="markdown-content max-h-[240px] overflow-y-auto" v-html="action_Result"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card-item + .card-item {
  margin-top: 10px;
}
</style>
