<template>
  <div v-if="!disabled" :class="$style.wrapper">
    <a v-show="ofdok && !readOnly" icon="save" :class="$style.ofdbutton" @click="save">保存退出</a>
    <div v-show="!readOnly" :class="{ [$style.disabledseal]: !putSealOn && ofdok }"></div>
    <div :id="$style.ofd" :class="{ [$style.readonly]: readOnly }"></div>
  </div>
  <div v-else>
    <a-result status="warning" title="OFD阅读控件没有正确安装，请下载安装"> </a-result
  ></div>
</template>

<script>
import loginService from '@/login/login-service'
import { Message } from 'ant-design-vue'
import suwell from '../../../lib-external/suwell_ofdReader.js'
import components from './_import-components/sd-ofd-reader-import'
export default {
  name: 'SdSuwellReader',
  metaInfo: {},
  components: {
    ...components,
  },
  props: {
    /**
     * ofd附件下载接口地址
     */
    url: {
      type: String,
      default: '',
    },
    /**
     * @ignore
     */
    readOnly: {
      type: Boolean,
      default: true,
    },
    /**
     * @ignore
     */
    querystring: {
      type: String,
      default: '',
    },
    /**
     * @ignore
     */
    groupId: {
      type: String,
      default: '',
    },
    /**
     * @ignore
     */
    putSealOn: {
      type: Boolean,
      default: false,
    },
    /**
     * @ignore
     */
    code: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      disabled: false,
      ocx: undefined,
      ofdok: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      loginService.updateAccessToken().then(() => {
        const ocx = suwell.ofdReaderInit(this.$style.ofd)
        this.ocx = ocx
        this.disabled = !ocx.id
        ;[
          'save',
          'open',
          't_sealmark',
          't_pageseal',
          'ti_chapter',
          'ti_stamp',
          't_printmask',
        ].forEach((key) => {
          ocx.setCompositeVisible(key, false)
        })
        window.openPerformed = (param) => {
          this.ofdok = true
          /**
           * 文件加载时触发
           *
           */
          this.$emit('fileLoaded')
          ocx.setCompositeVisible('navigator', false)
          delete window.openPerformed
          ocx.unRegistListener(handleId)
        }
        const handleId = ocx.registListener('f_open', 'openPerformed', true)
        let url = this.url
        if (this.code) {
          url = `${location.origin}${location.pathname}api/framework/v1/task-form-process/download-attachments/${this.code}`
        }
        ocx.openFile(
          url + '?access_token=' + encodeURIComponent(loginService.getTokens().access_token),
          this.readOnly
        )
      })
    })
  },
  methods: {
    uploadurl() {
      return `${location.origin}${
        location.pathname
      }api/framework/v1/attachment-extend/attachments-upload/indi?access_token=${encodeURIComponent(
        loginService.getTokens().access_token
      )}&groupId=${encodeURIComponent(this.groupId)}&FileName=${encodeURIComponent(
        this.querystring.match(/<file_name>(.*)<\/file_name>/)[1]
      )}&querystring=${encodeURIComponent(this.querystring)}`
    },
    save() {
      window.savePerformed = function(param) {
        // eslint-disable-next-line no-console
        console.log(param)
        if (param.includes('true')) {
          // ocx.closeBrowser()
          Message.success('文件已保存').then(() => {
            // eslint-disable-next-line no-debugger
            debugger
            window.close()
          })
        }
      }
      this.ocx.registListener('f_saveurl', 'savePerformed', true)
      loginService.updateAccessToken().then(() => {
        this.ocx.saveFile(this.uploadurl())
      })
    },
    getControl() {
      return this.ocx
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  height: 100%;
}
#ofd {
  width: 100%;
  height: 100%;
  embed {
    height: 100%;
  }
}
#ofd.readonly {
  height: 100%;
  overflow: hidden;
  embed {
    position: relative;
    top: -40px;
    height: calc(100% + 40px);
  }
}
.ofdbutton {
  position: absolute;
  z-index: 1999;
  width: 100px;
  height: 38px;
  margin-left: 33px;
  line-height: 2.1;
  color: $white;
  text-align: center;
  background: rgb(0, 138, 217);
  &:hover {
    color: $white;
    background: rgb(20, 96, 171);
  }
}
.disabledseal {
  position: absolute;
  left: calc(50% + 32px);
  z-index: 1999;
  width: 80px;
  height: 38px;
  background: rgb(0, 138, 217);
}
:global(.ant-message) {
  top: 46px;
}
</style>
