<template>
  <section class="drawInPhone" @touchmove.prevent>
    <div class="endPage" v-if="finished">操作结束请关闭页面</div>
    <ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
      <template #tools>
        <div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
          <ai-icon icon="iconPublish"/>
          <span>提交</span>
        </div>
      </template>
    </ai-drawer>
  </section>
</template>

<script>
export default {
  name: "drawInPhone",
  inject: ['signature'],
  data() {
    return {
      sealData: null,
      device: {width: 0, height: 0},
      finished: false
    }
  },
  created() {
    this.device.width = document.body.clientWidth
    this.device.height = document.body.clientHeight
    window.onresize = () => {
      this.device.width = document.body.clientWidth
      this.device.height = document.body.clientHeight
    }
  },
  methods: {
    handleSubmit() {
      let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
          {userId} = this.$route.query
      if (!userId) return alert("缺少必要参数")
      sealData && this.signature.instance({
        url: '/app/syssignaccount/upload-sealdata',
        headers: {"Content-Type": "application/json"},
        method: 'post',
        params: {userId},
        data: sealData,
        withoutToken: true
      }).then(res => {
        if (res?.code == 0) {
          alert("添加成功!")
          this.finished = true
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.drawInPhone {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 20210205932;

  .endPage {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20210205933;
    background: rgba(#000, .8);
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
  }

  .AiDrawer {
    margin: 0;
  }

  .writeInPhone {
    position: absolute;
    width: 72px;
    height: 32px;
    background: rgba(#000, .5);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(#fff, .6);
    cursor: pointer;
    left: 16px;
    top: 16px;

    .AiIcon {
      width: auto;
      height: auto;
    }

    &:hover {
      color: #fff;
    }
  }
}
</style>
