<template>
  <!-- 说明控件 -->
  <div
    v-if="permission != 'n'"
    class="ht-explain"
    :class="{ 'mobile-explain': isMobile }"
    :style="textStyle"
  >
    <!-- <div
      v-if="isLabelShow && !isMobile"
      class="ht-explain_label"
      :style="{ width: labelWidth }"
    >
      <slot name="tip"></slot>
      说明:
    </div> -->
    <div
      v-if="hasHyperlink()"
      class="ht-explain_content hyperlink_content"
      @click="openHyperlink"
      v-html="compiledTextValue"
    ></div>
    <div v-else class="ht-explain_content" v-html="compiledTextValue"></div>
    <!-- 超链接弹框 -->
    <ht-template-iframe-dialog ref="dialogIframe"></ht-template-iframe-dialog>
  </div>
</template>
<script>
  import Vue from 'vue'
  import utils from '@/utils.js'
  import { decode } from '@/util/base64'
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'
  import hyperlinkHandler from '@/mixins/hyperlinkHandler.js'

  export default {
    name: 'HtExplain',
    mixins: [permission, mobileMode, hyperlinkHandler],
    props: {
      textValue: String,
      marginTop: String,
      marginBottom: String,
      // isLabelShow: {
      //   type: Boolean,
      //   default: false,
      // },
      // labelWidth: {
      //   type: String,
      //   default: '120px',
      // },
      fontColor: {
        type: String,
        default: '#333333',
      },
    },
    data() {
      return {
        formInstance: null,
        compiledTextValue: null,
      }
    },
    computed: {
      textStyle() {
        return {
          marginTop: this.isMobile ? 0 : this.marginTop,
          marginBottom: this.isMobile ? 0 : this.marginBottom,
          color: this.fontColor,
        }
      },
    },
    watch: {
      textValue: {
        handler: function (newVal) {
          this.loadCompiledTextValue(newVal)
        },
        immediate: true,
      },
      formInstance: function (newVal, oldVal) {
        if (!oldVal && newVal && newVal.$on) {
          newVal.$off('updateData', this.loadCompiledTextValue)
          newVal.$on('updateData', this.loadCompiledTextValue)
        }
      },
    },
    beforeDestroy() {
      this.formInstance &&
        this.formInstance.$off &&
        this.formInstance.$off('updateData', this.loadCompiledTextValue)
    },
    methods: {
      loadCompiledTextValue() {
        if (!this.textValue) {
          return
        }
        this.$nextTick(() => {
          this.getTextValue(decode(this.textValue)).then((result) => {
            this.compiledTextValue = result
          })
        })
      },
      getTextValue(val) {
        if (this.formInstance == null) {
          this.formInstance = utils.getOnlineFormInstance(this)
        }
        const instance = this.formInstance || this
        return new Promise((resolve) => {
          const tempComponent = Vue.extend({
            data() {
              return {
                data: instance.data,
              }
            },
            template: `<div>${val}</div>`,
          })
          const component = new tempComponent().$mount()
          component.$nextTick(() => {
            resolve(component.$el.innerHTML)
          })
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-explain {
    display: flex;
    align-items: baseline;
    overflow: hidden;
    word-break: break-all;
    .ht-explain_label {
      text-align: right;
      font-size: 14px;
      padding-right: 12px;
      box-sizing: border-box;
    }
    .ht-explain_content {
      flex: 1;
      ::v-deep {
        p {
          margin: 0;
        }
        /* table 样式 */
        table {
          border-top: 1px solid #ebebeb;
          border-left: 1px solid #ebebeb;
        }
        table td,
        table th {
          border-bottom: 1px solid #ebebeb;
          border-right: 1px solid #ebebeb;
          padding: 17px 5px;
        }
        table th {
          border-bottom: 1px solid #ebebeb;
          text-align: center;
          background: #f4f4f4;
          padding: 14px 5px;
        }
      }
    }
    .hyperlink_content {
      color: blue;
      cursor: pointer;
    }
  }

  .mobile-explain {
    overflow: auto;
    .ht-explain_content {
      text-align: left;
      margin: 12px 0;
      padding-right: 0;
    }
  }
</style>
