<template>
  <div :style="{width,height}">
    <div v-if="showBtns" :style="{left:`calc(`+width+` - 100px)`,'margin-top': topHeight}" class="operation">
      <i v-if="buttons.includes('print')"
         v-show="reportType!=='doc'"
         class="el-icon-printer"
         title="打印"
         @click="print"></i>

      <i v-if="buttons.includes('download')"
         v-show="reportType!=='html'"
         class="el-icon-download"
         title="下载"
         @click="download"></i>
    </div>

    <html-report
        v-if="reportType==='html'"
        ref="html"
        :autographSrc="autographSrc"
        :height='height'
        :reportHideList="reportHideList"
        :reviewedSignedSrc="reviewedSignedSrc"
        :uid='uid'
        :urlTransformation="urlTransformation"
        class="xy-report"
        @error="error"
        @refreshOperation="refreshOperation"
    />
    <doc-report
        v-if="reportType==='doc'"
        ref="doc"
        :height='height'
        :rid="rid"
        :template-data="templateData"
        @error="error"
        @refreshOperation="refreshOperation"
    />
  </div>
</template>
<script>
import { dev,pre, path, prod, local } from './config'
import DocReport from './doc-report'
import HtmlReport from './html-report'

export default {
  name: 'y-iframe-report',
  components: { HtmlReport, DocReport },
  provide () {
    return {
      getToken: () => this.token(),
      getSetting: () => this.setting,
      reject: (res) => this.reject(res),
    }
  },
  props: {
    token: [Function],
    // 异常 方法
    reject: [Function],
    // 模板数据
    templateData: [Object],
    // 模板显示高度
    height: {
      type: String,
      default: 'auto'
    },
    // 模板显示宽度
    width: {
      type: String,
      default: '850px'
    },
    // 打印快捷键
    printKeyword: {
      type: Boolean,
      default: true
    },
    // 显示报告边框
    showShadow: {
      type: Boolean,
      default: false
    },
    // 显示按钮
    buttons: {
      type: Array,
      default: () => ['print', 'download']
    },
    // 隐藏模块
    reportHideList: {
      type: Array,
      default: () => []
    },
    // html模板 报告签名
    autographSrc: [String],
    //  html模板 审核员签名
    reviewedSignedSrc: [String],
    // 组件核心初始化参数
    option: [Object],
    // 报告
    uid: [String, Array],
    // 模板id 目前团测使用
    rid: [String],
    /**
     * 只引用源码转换，不显示报告
     * */
    // 报告类型
    reportType: {
      type: String,
      default: 'html'
    },

    // 地址转换 todo 禁止出现此属性方法
    urlTransformation: [String, Array],
  },
  watch: {
    option: {
      handler (opt) {
        this.init(opt)
      },
      deep: true,
      immediate: true
    },
  },
  data () {
    return {
      // 配置
      setting: {},
      topHeight: '100px',
      showBtns: false, // 显示按钮操作
    }
  },
  created () {
    // todo 移除快捷键
    // if (this.printKeyword) {
    //   document.addEventListener('keydown', function (e) {
    //     onKeydownPrint(e, document.getElementById('footer-html').innerHTML)
    //   })
    // }
  },
  methods: {
    refreshOperation (isShow, top) {
      this.showBtns = isShow
      if (!!top) {
        this.topHeight = top
      }
    },
    // 初始化配置
    init (opt) {
      // 初始化参数
      let { set } = new this.$tool.dataSetting.Config(this, 'setting')
      set('action', opt['action'], [
        [/dev/, 'dev'],
        [/pre/, 'pre'],
        [/prod/, 'prod'],
        [/local/, 'local'],
        [/stage/, 'stage']
      ], 'dev')

      set('host', this.setting['action'], [
        [/dev|stage/, dev()],
        [/prod/, prod()],
        [/pre/, pre()],
        [/local/, opt.host || local()]
      ])

      set('method', opt, [
        [/get/, 'get'],
        [/post/, 'post']
      ], 'get')

      set('hostSuffix', opt['action'], [
        [/prod/, '/prod-api'],
        [/stage/, '/stage-api'],
        [/dev/, '/dev-api'],
        [/pre/, '/pre-api'],
        [/local/, opt.hostSuffix || '']
      ], '/dev-api')

      set('path', opt, null, path())
      // 合并多余数据
      this.setting = Object.assign(this.option, this.setting)

      // console.log('init-end', this.setting)
    },
    // 打印事件
    print () {
      if (this.reportType === 'html') {
        this.$refs.html.print()
      } else if (this.reportType === 'doc') {
        this.$refs.doc.print()
      }
    },
    // 下载事件
    download () {
      if (this.reportType === 'html') {
        this.$refs.html.download()
      } else if (this.reportType === 'doc') {
        this.$refs.doc.download()
      }
    },
    error (response) {
      // console.log('响应：', response)
    }
  },
}
</script>
<style scoped>
.xy-report {
  overflow-y: auto
}

::v-deep .xy-report {
  background-color: white;
  margin: auto;
  position: relative;
}

::v-deep iframe {
  overflow: hidden;
  border: none;
  page-break-after: always
}

::v-deep .buttons {
  position: absolute;
  top: 0;
  right: 0;
}

.operation {
  position: absolute;
  z-index: 99;
  color: #000000;
}

.operation i {
  cursor: pointer;
  border: 1px solid #efefef;
  padding: 5px;
  margin: 5px;
}
</style>
