<template>
  <img
    v-if="permission != 'n'"
    class="imgClass"
    :src="src"
    :style="imgStyle"
    @click="imgClick"
  />
</template>
<script>
  import { createObjectURL } from '@/util/brower.js'
  import permission from '@/mixins/permission.js'
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'HtImage',
    mixins: [permission, mobileMode],
    props: {
      isDisplay: {
        type: Boolean,
        default: true,
      },
      imgSrc: String,
      fileJson: String,
      imgHeight: Number,
      imgWidth: Number,
      openUrl: String,
      openType: String,
    },
    data() {
      return {
        src: '',
      }
    },
    computed: {
      imgStyle() {
        return {
          height: this.imgHeight > 0 ? `${this.imgHeight}px` : 'auto',
          width: this.imgWidth > 0 ? `${this.imgWidth}px` : 'auto',
          maxWidth: '100%',
          cursor: this.openUrl ? 'pointer' : '',
        }
      },
    },
    created() {
      if (this.isDisplay) {
        if (this.fileJson && this.$requestConfig.download) {
          var json = JSON.parse(this.fileJson)
          // 全局附件下载方法
          this.$requestConfig
            .download(json[0].id)
            .then((response) => {
              const data =
                response instanceof ArrayBuffer ? response : response.data
              this.src = createObjectURL(new Blob([data]))
            })
            .catch((err) => {
              //表单预览，下载图片等文件失败时，提示语
              this.$message.error(`文件下载失败，请重新上传`)
            })
        }
      } else {
        this.src = this.imgSrc
      }
    },
    mounted() {
      if (this.isMobile) {
        this.addMobileTopLabelClass()
      }
    },
    methods: {
      imgClick() {
        if (this.openUrl) {
          this.isMobile
            ? (window.location.href = this.openUrl)
            : window.open(this.openUrl, '_blank')
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .imgClass {
    border-radius: 5px;
    overflow: hidden;
  }
</style>
