<template>
  <view style="width: 100vw; height: 80vh; background-color: #8f939c">
    <l-signature
      ref="signatureRef"
      :openSmooth="openSmooth"
      :penColor="penColor"
      :penSize="penSize"
      disableScroll
      landscape
    ></l-signature>
  </view>
  <view class="btn-container">
    <view style="width: 150rpx; background-color: #ffffff; transform: rotate(90deg); gap: 20rpx">
      <button @click="onClick('clear')">清空</button>
      <button @click="onClick('undo')">撤消</button>
      <button @click="onClick('save')">提交</button>
    </view>
  </view>
</template>

<script>
import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'
import { postProtocolInstallation } from '../../api/protocol/protocol'

export default {
  onLoad(options) {
    this.userInfo = {
      name: decodeURIComponent(options.name || ''),
      code: decodeURIComponent(options.code || ''),
      phone: decodeURIComponent(options.phone || ''),
      location: decodeURIComponent(options.location || ''),
      businessLicenseUrl: decodeURIComponent(options.businessLicenseUrl || ''),
      signatureUrl: decodeURIComponent(options.signatureUrl || ''),
      // 其他字段...
    }
  },
  data() {
    return {
      title: 'Hello',
      penColor: 'black',
      penSize: 5,
      url: '',
      openSmooth: true,
      resProtocolPartnerUrl: '',
    }
  },
  methods: {
    async onClick(type) {
      if (type === 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type === 'save') {
        await this.$refs.signatureRef.canvasToTempFilePath({
          success: async res => {
            // 是否为空画板 无签名
            console.log('签名返回是否为空', res.isEmpty)
            if (res.isEmpty) {
              this.userInfo.signatureUrl = ''
              return
            }

            // 生成图片的临时路径
            // H5 生成的是base64
            this.tempUrl = res.tempFilePath
            console.log('临时路径', res.tempFilePath)
            uni.showLoading({
              title: '签名上传中',
              mask: 'true',
            })
            this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)

            console.log('签名路径', this.userInfo.signatureUrl)
            console.log('签名上传成功')
            //uni.showToast({ title: '签名上传成功', icon: 'success' })
            console.log('表单数据:', this.userInfo)
            uni.hideLoading()
            uni.showLoading({
              title: '正在生成协议',
              mask: 'true',
            })
            let resProtocolPartner = await postProtocolInstallation(this.userInfo)
            uni.hideLoading()
            this.resProtocolPartnerUrl = resProtocolPartner.msg

            uni.downloadFile({
              url: this.resProtocolPartnerUrl,
              success: function (res) {
                var filePath = res.tempFilePath
                uni.openDocument({
                  filePath: filePath,
                  showMenu: true,
                  success: function (res) {},
                })
              },
            })
          },
        })
        return
      }
      if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
    },
  },
}
</script>
<style lang="scss">
.btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
