<template>
  <div class="home">
    <nav-bar :title="detail.title"></nav-bar>
    <div class="container">
      <div class="detail">
        <div class="bt">
          <h2>{{ detail.title }}</h2>
          <p>{{ detail.ctime }}</p>
        </div>
        <!--        <div class="ql-editor">-->
        <!--        <div class="ql-container ql-snow">-->
        <!--          <div class="ql-editor" v-html="detail.content"></div>-->
        <!--        </div>-->
        <!--        </div>-->

        <div class="ql-snow">
          <div class="ql-editor" v-html="detail.content"></div>
        </div>

        <!--        <div class="ql-container ql-snow">-->
        <!--          <div class="ql-editor" v-html="detail.content"></div>-->
        <!--        </div>-->
        <!-- <div class="nrbody" v-html="detail.content"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {apiGetHospitalDetail} from "@/request/api.js";
import {formatRichText} from "@/utils/utils.js";
import {Toast} from "vant";
// import "quill/dist/quill.core.css";
// import "quill/dist/quill.snow.css";
// import "quill/dist/quill.bubble.css";

export default {
  components: {},
  mounted() {
    // console.log(this.$route.meta.title);
  },
  data() {
    return {
      title: "",
      detail: {},
      weixinimgindex: 0
    };
  },
  mounted() {
    this.getData();
    // 初始化全局方法
    window.showweixinimg = this.showweixinimg;
  },
   beforeDestroy() {
    // 清理全局方法
    delete window.showweixinimg;
  },
  methods: {
     // 微信图片加载方法
    loadweixinimg(url) {
      this.weixinimgindex++;
      window['img'+this.weixinimgindex] = '<img id="img' + this.weixinimgindex + '" src=\'' + url + '?' + Math.random() + '\' onload=\'parent.showweixinimg(this,'+this.weixinimgindex+')\' style=\'width: 100%; height: 100%; padding: .5rem 0;\' />';
      return '<iframe id="frameimg' + this.weixinimgindex + '" src="javascript:parent.img'+this.weixinimgindex+';" style="display: none;"></iframe>';
    },
    
    // 显示微信图片
    showweixinimg(ele, key) {
      const frame = document.getElementById("frameimg"+key);
      if (frame) {
        frame.parentNode.replaceChild(ele, frame);
      }
    },
    // 获取详情
    getData() {
      apiGetHospitalDetail({
        id: this.$route.query.id,
      }).then((res) => {
        // 处理内容中的图片
        let content = res.data.content;
        content = this.processImages(content);
        res.data.content = content;
        this.detail = res.data;
        this.title = res.title;
      });
    },
    
    // 处理内容中的图片标签
    processImages(content) {
      const imgRegex = /<img[^>]*src=['"]([^'"]+)['"][^>]*>/gi;
      return content.replace(imgRegex, (match, src) => {
        return this.loadweixinimg(src);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.text-content {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  line-height: 1.7;
  max-width: 850px;
  margin: 25px auto;
  padding: 20px;
  color: #333;
  font-size: 0.35rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 段落样式（所有段落） */
.paragraph {
  margin: 18px 0;
  font-size: 0.35rem !important;
  text-align: justify;
}

/* 标题样式（带粗体） */
.paragraph strong {
  color: #0066cc;
  font-weight: bold;
  font-size: 0.4rem;
}

/* 温馨提示强调（带背景） */
.paragraph:has(strong:contains("温馨提示")) {
  background-color: #f0f7ff;
  border-left: 3px solid #0066cc;
  padding: 12px 15px;
  border-radius: 0 4px 4px 0;
}

/* 图片样式（居中、响应式） */
.text-content img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* 末尾信息（投稿/编辑） */
.paragraph:last-child {
  text-align: right;
  color: #666;
  font-size: 0.95rem;
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px dashed #eee;
}
.detail {
  padding: 30px 0px;

  .bt {
    font-size: 34px;

    p {
      font-size: 0.3rem;
      padding-top: 10px;
    }
  }

  .nrbody {
    white-space: pre-wrap;
    font-size: 30px;
    padding-top: 30px;

    p {
      display: block;
      font-size: 28px;
      line-height: 45px;
      padding-bottom: 20px;
    }

    img {
      width: 100%;
      height: auto;
    }
  }
  
  // 自定义Quill样式，替代导入的quill.snow.css
  .ql-snow .ql-editor {
    font-size: 16px;
    line-height: 1.6;
    padding: 12px 0;
  }
  
  .ql-snow .ql-editor p {
    margin: 0 0 12px 0;
  }
  
  .ql-snow .ql-editor img {
    max-width: 100%;
    height: auto;
  }
}
</style>
