import * as rnr from '@/api/rnr'
import * as markup from '@/api/markup'
import Sign from '@/components/Sign'
import { queryPotocolManage, queryPotocolCustomerManage } from '@/api/rnr'

// 绘图的宽度
const CANVAS_WIDTH = 600

export default {
  data() {
    return {
      showSign: false,
      paper: {
        origin: '',
        src: '',
        width: CANVAS_WIDTH,
        height: 0
      },
      signUrl: '',
      contractPic: []
    }
  },
  components: { Sign },
  computed: {
    /**
     * 按钮是否禁用
     */
    btnDisable() {
      // 如果
      return !this.signUrl
    }
  },
  methods: {
    /**
     * 展示签名弹框
     */
    async openSign() {
      // 展示签名弹框
      this.showSign = true
    },

    /**
     * 初始化协议的图片路径
     * @param rnrType 实名类型 rnr: 实名 markup: 补录
     * @param protocalType 协议类型
     */
    async initPaperSrc(rnrType, protocalType) {
      // 记录当前输入的
      this.rnrType = rnrType
      this.protocalType = protocalType
      // 登录用户
      const { organId } = this.$store.getters.loginUser
      // 请求方法
      let request = queryPotocolManage
      // 请求参数
      let params = { orgId: organId }
      // 如果当前是补录
      if (rnrType === 'markup') {
        request = queryPotocolCustomerManage
        params = {}
      }
      // 查询当前登录人的组织下的协议
      const protocal = await request(params) || {}
      // 设置src的值
      try {
        // 协议对象
        const paperObj = protocal[`${protocalType}${window.os.isTablet ? 'Vertical' : 'Horizontal'}`]
        // 如果协议对象存在，则直接复制
        if (paperObj) {
          this.paper.origin = paperObj.fileUrl
          this.paper.src = paperObj.fileUrl
        }
      } catch (error) {
        console.error(error)
      }
    },

    /**
     * 上传协议
     */
    async handleUploadAgreement(customer = false) {
      // 呈现loading框
      this.loading = true
      try {
        const { blob } = this.paper
        // 文件可访问路径和文件的uuid
        const { uuid } = await (customer ? markup : rnr).fileUpload({ file: new File([blob], `${this.$route.meta ? this.$route.meta.title : '协议'}.png`) })
        // 保存数据
        this.contractPic = [uuid]
        // 展示发送短信验证码的弹框
        if (this.$route.name === 'MarkupPersonAgreement') {
          this.handleToNext()
          return
        }
        if (this.$route.name === 'MarkupEnterpriseAgreement') {
          this.handleToNext()
          return
        }
        this.showSms = true
      } catch (error) {
        console.error(error)
      }
      // 关闭loading框
      this.loading = false
    },

    /**
     * 接收签名
     * @param signUrl 当前签名
     */
    handleSignChange(signUrl) {
      // 记录当前签名
      this.signUrl = signUrl
    },

    /**
     * 创建一个图片
     * @param src 图片的url
     */
    createImage(src) {
      return new Promise((resolve, reject) => {
        const image = new Image()
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = () => {
          resolve(image)
        }
        image.src = src
      })
    },

    /**
     * 图片加载成功方法
     */
    async handleImageLoaded() {
      // 如果已经加载过图片了
      if (this.paper.image) {
        return
      }
      // 协议图片
      const image = document.querySelector('#page-rnr-main-canvas')
      // 解决跨域问题
      image.crossOrigin = ''
      // 当前协议宽度
      const paperWidth = image.naturalWidth || image.width * 2
      // 当前协议的真实高度
      const paperHeight = image.naturalHeight || image.height * 2
      // 设置当前绘制的canvas的高度
      this.paper.height = this.paper.width / paperWidth * paperHeight
      // 记录当前image对象
      this.paper.image = await this.createImage(this.paper.origin)
    }
  }
}