<template>
  <div v-if="permission != 'n'" :style="showCode ? containerStyle : ''">
    <template v-if="usesType === 'content'">
      <canvas v-show="showCode" ref="htQrcode" class="qr-canvas"></canvas>
      <template v-if="!showCode">
        <div class="error-tooltip">
          <span>二维码生成失败</span>
        </div>
      </template>
    </template>
    <template v-else>
      <canvas v-show="showCode" ref="htQrcode" class="qr-canvas"></canvas>
      <template v-if="!showCode">
        <div v-if="!defId" class="error-tooltip">未绑定流程</div>
        <div v-else class="error-tooltip">
          <span v-if="instId && !isSupportMobile">未绑定手机表单</span>
          <span v-else>未产生二维码</span>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'HtQrcode',
    mixins: [permission, mobileMode],
    props: {
      value: [String, Number],
      width: {
        type: Number,
        default: 126,
      },
      height: {
        type: Number,
        default: 126,
      },
      url: String,
      instId: [String, Number],
      isSupportMobile: {
        type: Boolean,
        default: false,
      },
      defId: {
        type: [String, Number],
        default: '',
      },
      usesType: {
        type: String,
        default: 'flow',
      },
    },
    data() {
      return {
        showCode: false,
        curUrl: null,
      }
    },
    computed: {
      containerStyle() {
        return {
          width: `${this.width}px`,
          height: `${this.height}px`,
          display: 'inline-block',
        }
      },
      urlVal() {
        return this.curUrl ? this.curUrl : this.url
      },
    },
    watch: {
      urlVal: {
        handler: function (newVal) {
          if (newVal && this.usesType !== 'content') {
            this.$nextTick(() => this.initQrcode())
          }
        },
        immediate: true,
      },
      value: {
        handler: function (newVal) {
          if (newVal && this.usesType === 'content') {
            this.$nextTick(() => this.initQrcodeByContent())
          }
        },
        immediate: true,
      },
    },
    mounted() {
      if (this.isMobile) {
        this.addMobileTopLabelClass()
      }
      if (
        !this.url &&
        this.instId &&
        this.isSupportMobile &&
        this.usesType === 'flow'
      ) {
        this.getQrcodeUrl()
      }
    },
    methods: {
      getQrcodeUrl() {
        // 未传入url时，调用外部方法获取url
        if (this.$requestConfig.getQrcodeUrl) {
          const result = this.$requestConfig.getQrcodeUrl(this.instId)
          if (result) {
            if (result.constructor == Promise) {
              result.then((data) => {
                this.curUrl = data && data.value.shortUrl
              })
            } else if (result.constructor == String) {
              this.curUrl = result
            }
          }
        }
      },
      initQrcode() {
        let noErr = true
        this.$qrcode.toCanvas(
          this.$refs.htQrcode,
          `${this.$requestConfig.getBaseMobileUrl()}/${this.urlVal}`,
          function (error) {
            if (error) {
              noErr = false
              throw error
            }
          }
        )
        this.showCode = noErr
      },
      initQrcodeByContent() {
        let noErr = true
        this.$qrcode.toCanvas(
          this.$refs.htQrcode,
          `${this.value}`,
          function (error) {
            if (error) {
              noErr = false
              throw error
            }
          }
        )
        this.showCode = noErr
      },
    },
  }
</script>
<style lang="scss" scoped>
  .qr-canvas {
    height: 100% !important;
    width: 100% !important;
    border: 1px solid #e6e6e6;
    box-shadow: inset 0px 0px 0px 1px #e6e6e6;
  }
  .error-tooltip {
    color: #f56c6c;
    font-size: 12px;
    line-height: 10px;
    padding: 12px 0;
  }
</style>
