<script lang="ts">
  import { onMount } from 'svelte'
  import { renderSvelteFromPSUIP } from '@dingdao/psuip-render/svelte'

  const psuip = `
  # 优雅青蓝卡片系列展示
  
  ## 设计特点
  [icon:Abstract/ad-product]优雅青蓝卡片系列采用渐变背景、[icon:Base/home]精致装饰和层次化设计，[icon:Base/aiming]提供三种专业的内容展示方式。
  
  
  [event:download][下载](https://github.com/example/edit)
  
  <card:headerPrecentCard>
   ## 二、市场概述
   AI-PC 概念自 2023 年由英特尔提出后，迅速引发行业关注
  
   ### 中国市场
   <percentValue color={color.success.green6}>#### 15%</percentValue>
   AI-PC 出货量
  
   ### 全球市场  
   #### 25%
   AI-PC 渗透率
  
   ### 未来预测
   #### 40%
   预计增长率
  </card:headerPrecentCard>
  
  <card:headerCard background={color.success.green0}>
  ## 三、头部品牌分析
  联想、苹果和荣耀作为 AI-PC 市场的头部品牌，各自凭借独特的产品功能和市场策略在竞争中占据一席之地。以下是联想、苹果和荣耀的销售份额占比。
  
  [chart:barh|AI-PC 市场份额]
  | 品牌 | 市场份额 | 增长率 |
  |------|----------|--------|
  | 联想 | 35% | +12% |
  | 苹果 | 28% | +8% |
  | 荣耀 | 18% | +15% |
  
  [chart:grouped_line|心流指标趋势]
  | 日期 | 心流满意度FSV | 心流专注值FFV | 心流效能值FEV |
  | --- | --- | --- | --- |
  | 2025-03-10 | 0.0 | 0.36 | 2.55 |
  | 2025-03-11 | 0.0 | 0.41 | 2.22 |
  | 2025-03-12 | 0.0 | 0.36 | 2.64 |
  | 2025-03-13 | 0.0 | 0.32 | 2.94 |
  
  [chart:pie|笔记本市场占比]
  | 类型 | 占比 |
  |------|------|
  | 游戏本 | 40% |
  | 轻薄本 | 35% |
  | 工作站 | 25% |
  
  </card:headerCard>
  `
  // 渲染数据
  let state = {
    inputLayout: 1,
    placeholder: ''
  }

  let comp: any = null
  let compProps: any = null

  async function render() {
    const result = await renderSvelteFromPSUIP(psuip, {
      onHandleEvent,
      state
    })

    comp = result.component
    compProps = result.props
  }

  //事件回调
  const onHandleEvent = (payload: any) => {
    console.log('触发了回调')
    if (payload.propetry === 'datakey') {
    }
  }

  onMount(() => {
    render()
  })
</script>

<main>
  {#if comp}
    <svelte:component this={comp} {...compProps} />
  {/if}
</main>