<!--
 * @Author: Jason Liu
 * @Date: 2025-03-03 15:13:43
 * @Desc: 
-->
<!--
 * @Author: Jason Liu
 * @Date: 2023-11-20 16:36:47
 * @Desc: 
-->
<template>
  <div class="gpt_mark_content">
    <drag-zone class="model_zone" :options="{ direction: 'vertical' }">
      <template v-if="report.think">
        <drag-content class="model_content think_content">
          <win-title><win-icon type="icon_deepseek" /> 深度思考</win-title>
          <markdown-it-vue
            :class="['intelligent_think_content', 'md-body']"
            :options="{
              linkAttributes: {
                attrs: {
                  target: '_blank',
                  rel: 'noopener',
                },
              },
              katex: {
                throwOnError: false,
                errorColor: '#cc0000',
              },
              icons: 'font-awesome',
              githubToc: {
                anchor: false,
                tocFirstLevel: 2,
                tocLastLevel: 3,
                tocClassName: 'toc',
                anchorLinkSymbol: '',
                anchorLinkSpace: false,
                anchorClassName: 'anchor',
                anchorLinkSymbolClassName: 'octicon octicon-link',
              },
              mermaid: {
                theme: 'default',
              },
              image: {
                hAlign: 'left',
                viewer: true,
              },
            }"
            :content="getMarkDownHtml(report.think)"
            ref="gpt_think_content"
          />
        </drag-content>
        <drag-handle class="model_handle">
          <div class="slider_body">
            <svg-icon type="icon_slider_updow" />
            <svg-icon type="icon_slider_updow" />
            <svg-icon type="icon_slider_updow" />
          </div>
        </drag-handle>
      </template>
      <drag-content
        :class="['model_content html_content', !report.think ? 'full_content' : '']"
      >
        <markdown-it-vue
          :class="['intelligent_report_content', 'md-body']"
          ref="gpt_content"
          :options="markdownOptions"
          :content="getMarkDownHtml(report.html)"
        />
      </drag-content>
    </drag-zone>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
@import "/src/themes/config.less";

.gpt_mark_content {
  height: 100%;
  width: 100%;
  .model_zone {
    &.drag-zone {
      height: 100%;
      .model_content {
        padding-bottom: 2px;

        &.think_content {
          height: 220px;
          .intelligent_think_content {
            margin-top: 6px;
            background: rgba(0, 0, 0, 0.1);
            height: calc(100% - 28px);
            border-radius: 6px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 8px;

            /deep/.markdown-body {
              h1 {
                position: relative;
                padding-left: 0.4em;
                color: @primaryText;
                &::before {
                  content: "";
                  position: absolute;
                  width: 4px;
                  background: linear-gradient(90deg, @main, @secondarycolor);
                  border-radius: 2px;
                  left: 0;
                  bottom: 12px;
                  top: 4px;
                }
              }
              h2 {
                color: @primaryText;
                margin-left: 0.8em;
              }

              p {
                font-weight: 400;
              }

              p,
              li {
                color: @primaryText;
                width: 100%;
                white-space: initial;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;

                &:hover {
                  background: rgba(0, 0, 0, 0.1);
                }
              }
              .anchor {
                display: none;
              }
            }
          }
        }
        &.html_content {
          height: calc(100% - 224px);
          &.full_content {
            height: 100%;
          }
          .intelligent_report_content {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            border-radius: 6px;
            /deep/.markdown-body {
              h1 {
                position: relative;
                padding-left: 0.4em;
                color: @primaryText;
                &::before {
                  content: "";
                  position: absolute;
                  width: 4px;
                  background: linear-gradient(90deg, @main, @secondarycolor);
                  border-radius: 2px;
                  left: 0;
                  bottom: 12px;
                  top: 4px;
                }
              }
              h2 {
                color: @primaryText;
                margin-left: 0.8em;
              }

              p {
                font-weight: 400;
              }

              p,
              li {
                color: @primaryText;
                width: 100%;
                white-space: initial;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                padding-bottom: 6px;
              }
              li+li{
                margin-top: 0
              }
              .anchor {
                display: none;
              }
            }
          }
        }
      }
      .model_handle {
        border-bottom: 1px solid @borderColor;
        height: 4px;
        text-align: center;
        position: relative;
        .slider_body {
          position: absolute;
          top: -7px;
          text-align: center;
          left: 0;
          right: 0;
          color: @borderColor;
        }
      }
    }
  }
}
</style>
