<template>
  <div class="specialdetail">
    <div class="sd-container">
      <h2>{{ dataInfo.title }}</h2>
      <div class="msgWrap quill-editor ql-editor" v-html="dataInfo.content"></div>
    </div>

    <van-image-preview v-model="show" :startPosition="startPosition" :images="images">
    </van-image-preview>
  </div>
</template>
<script>
// import MHeader from '@/components/MHeader'
import { newsQuery } from "@/api/teacher";
export default {
  // components: { MHeader },
  data() {
    return {
      dataInfo: {},
      images: [],
      show: false,
      startPosition: 0
    };
  },
  mounted() {
    let params = this.$route.query
    if (params.Authorization) {
        localStorage.setItem('Authorization', decodeURI(params.Authorization))
        localStorage.setItem('userInfo', decodeURI(params.Authorization))
    } else {
        localStorage.removeItem('Authorization')
        localStorage.removeItem('userInfo')
    }
    document.title = '公告详情';
    this.__init();

    // 图片预览
    window.onLook = (target) => {
      const domList = document.querySelectorAll(".msgWrap img")
      let imgList = []
      domList.forEach((item, index) => {
        imgList.push(item.src)
        if(target == item) {
          this.startPosition = index
        }
      })
      this.show = true
      this.images = imgList
    }
  },
  methods: {
    __init() {
      this.$toast.loading({
        message: "加载中...",
        duration: 100000,
        forbidClick: true,
        loadingType: "spinner"
      });
      newsQuery({
        id: this.$route.query.id
      }).then(res => {
        let result = res.data;
        let content = result.data ? result.data.content : null
        if(content) {
          content = content.replace(/<img/ig, '<img onClick="onLook(this)" style="width: 100% !important;"')
          content = content.replace(/<video/ig, '<video style="width: 100% !important;height: 1.95rem;"')
          result.data.content = content
        }
        this.$toast.clear();
        if (result.code == 200 && result.data) {
          this.dataInfo = result.data;
          let metaList = document.querySelectorAll("meta");
          metaList.forEach(item => {
            if (item.name == "description") {
              item.content = this.dataInfo.title;
            }
          });
        }
      });
    },

  }
};
</script>
<style lang="less" scoped>
@import "../../assets/commonLess/Quill.less";
.specialdetail {
  background: #fff;
  position: relative;
}
.noscroll {
  overflow: hidden;
}
.sd-container {
  padding: 0.15rem;
  h2 {
    font-weight: 500;
    color: rgba(68, 68, 68, 1);
    line-height: 0.37rem;
    font-size: 0.22rem;
    margin-bottom: 0.1rem;
  }
  p {
    font-size: .14rem;
    color: #333;
  }
}

.titleInfo {
  height: 0.15rem;
  line-height: 0.15rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #999;
  margin-bottom: 0.15rem;
  font-size: .14rem;
}
.imgWrap {
  /* width: 100;
  height: 1.45rem; */
  margin-bottom: 0.15rem;
  p {
    font-size: 0.16rem;
    font-family: PingFangSC;
    font-weight: 400;
    color: rgba(68, 68, 68, 1);
    line-height: 0.28rem;
    text-indent: 0.32rem;
  }
  img {
    width: 100%;
  }
}

</style>
