<template>
  <div class="richTextParsing">
    <div v-html="richText" class="rich_text" :class="aboutUs === 'true'? 'aboutUs': ''" @click='previewImg($event)'></div>
  </div>
</template>

<script>

import { ImagePreview } from 'vant'

export default {
  computed: {},
  components: {},
  props: ['richText', 'aboutUs'],
  data() {
    return {
      id: ''
    }
  },
  watch: {},
  methods: {
    previewImg(e) {
      if (e.target.nodeName === 'IMG') {
        ImagePreview({
          images: [e.target.currentSrc],
          showIndex: false,
          loop: false
        })
      }
    }
  },
  created() {},
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
  .rich_text {
    max-width: 100vw !important;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    ::v-deep img {
      max-width: 100% !important;
      max-height: 100% !important;
      border-radius: 8px !important;
    }
    ::v-deep video {
      max-width: 100% !important;
    }
    ::v-deep div,
    ::v-deep article,
    ::v-deep p {
      max-width: 100% !important;
      word-wrap: break-word !important;
      float: none !important;
      position: static !important;
    }
  }
  .aboutUs{
    padding: 0 15px 15px 15px;
    /*margin-bottom: calc(15px + constant(safe-area-inset-bottom));*/
    /*margin-bottom: calc(15px + env(safe-area-inset-bottom));*/
  }
</style>
<style lang='scss'>
  .van-image-preview{
    z-index: 99999999999999!important;
    background: rgba(0, 0, 0, 0.9);
  }
</style>
