<!-- 画布弹窗 -->
<script lang="ts" setup name="canvasDialog">
import { defineExpose, onMounted, reactive, ref } from 'vue'
import { ElMessage, tagEmits } from 'element-plus'
import signCanvas from '@/components/canvas/signCanvas/index.vue'
const emits = defineEmits(['signPicture'])
const canvasRef = ref() as any
const dialogVisible = ref(false) // 对话框显隐字段
const data = reactive({
  imgSrc: '',
})

// const getImgSrc = () => {
//   data.imgSrc = '' // 清空
//   let src = canvasRef.value.getSignPNGImgSrc()
//   if (!src) return

//   // 校验签名是否太小
//   // validateImageSize(src).then(res => {
//   //     data.imgSrc = src
//   // }).catch(e => {
//   //     ElMessage({
//   //         showClose: true,
//   //         message: e.description,
//   //         type: 'warning',
//   //     })
//   // })
// }
/**
 * 初始化
 */
const initDialog = () => {
  dialogVisible.value = true // 显示对话框
}

// 点击确定
const confirm = () => {
  const src = canvasRef.value.getSignPNGImgSrc()
  emits('signPicture', src)
}

// 点击关闭
const close = () => {
  dialogVisible.value = false
}
// ----------------------------------------------钩子------------------------------------------------------
defineExpose({ initDialog, close })
</script>

<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" lock-scroll :close-on-click-modal="false" title="请在有效区域内签字" width="65%" append-to-body>
    <div class="wrap">
      <div>
        <el-button @click="canvasRef.clear()">
          清空
        </el-button>
        <el-button @click="canvasRef.undo()">
          撤销
        </el-button>
        <el-button @click="canvasRef.redo()">
          恢复
        </el-button>
        <!-- <el-button type="primary" @click="getImgSrc">获取签名图片</el-button> -->
        <el-button type="primary" @click="canvasRef.downLoadSignPNGImg()">
          下载签名图片
        </el-button>
      </div>
      <div class="canvasBox">
        <sign-canvas ref="canvasRef" />
      </div>
      <div v-show="data.imgSrc" class="imgBox">
        <img :src="data.imgSrc">
      </div>
      <div style="color: red;font-size: 13px;float: left;">
        **请自行检查签字板是否连接**
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer footer">
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
        <el-button @click="close">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
p {
  padding: 20px;
}

.wrap {
  width: 100%;
  text-align: center;
}

.canvasBox {
  // margin-top: 820px;
  margin: 20px auto;
  border: 3px dashed #6aadff;
  width: 100%;
  height: 300px;
  box-sizing: border-box;
}

.imgBox {
  padding: 0;
  text-align: center;

  img {
    border: 1px solid #ddd;
  }
}
</style>