<template>
  <el-dialog
    :visible.sync="showDialog"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    class="comp-sign rnr-dialog"
    width="750px"
    top="10vh"
    title="签名"
    @close="closeDialog"
  >
    <div class="comp-sign-container">
      <el-row class="agreement-wrapper">
        <img :src="originUrl" crossorigin="anonymous" class="preview-img" @click="handleShowPreview" >
        <img :src="attachmentUrl" class="preview-img" @click="handleShowPreview">
        <el-button type="primary" icon="el-icon-refresh-left" @click="handleClearSign">重签</el-button>
      </el-row>
      <SignCanvas ref="signRef" v-model="sign" :options="options" class="sign-area" />
      <image-viewer v-if="showViewer" :z-index="2010" :on-close="handleCloseViewer" :url-list="urlList" />
      <div slot="footer" class="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button :loading="composeLoading" type="primary" @click="handleComposeSign">完成</el-button>
      </div>
      <div :id="paintAreaId" class="paint-wrapper">
        <img :src="originUrl" crossorigin="anonymous" class="paint-image">
        <img :src="sign" class="paint-sign-image">
        <img v-if="attachmentUrl" :src="attachmentUrl" class="paint-image">
      </div>
    </div>
  </el-dialog>
</template>

<script>
import SignCanvas from 'sign-canvas'
import ImageViewer from '@/components/Uploader/image-viewer'
import '@/styles/dialog.scss'
import html2canvas from 'html2canvas'

export default {
  name: 'CompSign',
  components: { SignCanvas, ImageViewer },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    originUrl: {
      type: String,
      default: ''
    },
    attachmentUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 签字内容
      sign: '',
      // 是否展示dialog
      showDialog: false,
      // 签名组件需要的属性
      options: {
        // 书写速度 [Number] 可选
        lastWriteSpeed: 1,
        // 下笔的宽度 [Number] 可选
        lastWriteWidth: 4,
        // 线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineCap: 'round',
        // 线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        lineJoin: 'round',
        // canvas宽高 [Number] 可选
        canvasWidth: 700,
        // 高度  [Number] 可选
        canvasHeight: 300,
        // 是否显示边框 [可选]
        isShowBorder: false,
        // 背景色 [String] 可选
        bgColor: '#FFFFFF',
        // 网格线宽度  [Number] 可选
        // borderWidth: 1,
        // 网格颜色  [String] 可选
        // borderColor: "#ff787f",
        // 基础轨迹宽度  [Number] 可选
        writeWidth: 5,
        // 写字模式最大线宽  [Number] 可选
        maxWriteWidth: 30,
        // 写字模式最小线宽  [Number] 可选
        minWriteWidth: 5,
        // 轨迹颜色  [String] 可选
        writeColor: '#101010',
        // 签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        isSign: true,
        // 下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
        imgType: 'png'
      },
      // 组合签名的loading
      composeLoading: false,
      // 预览组件的图片链接
      urlList: [],
      // 是否展示文件预览器
      showViewer: false,
      // 合成后的协议文件
      agreement: this.originUrl,
      // 绘图区域id
      paintAreaId: `paint-${Date.now()}${Math.floor(Math.random() * 1000)}`
    }
  },
  watch: {
    show(val) {
      // 将内外状态同步
      this.showDialog = val
    }
  },
  methods: {
    /**
     * 预览照片
     */
    handleShowPreview() {
      // 展示预览组件
      this.showViewer = true
      // 预览组件中url的列表
      this.urlList = this.agreement ? [this.agreement, this.attachmentUrl] : [this.originUrl, this.attachmentUrl]
    },

    /**
     * 关于预览功能
     */
    handleCloseViewer() {
      this.showViewer = false
    },

    /**
     * 重新签名
     */
    handleClearSign() {
      this.$refs.signRef.canvasClear()
    },

    /**
     * 将协议和签名组合在一起
     */
    async handleComposeSign() {
      // 展示loading框
      this.composeLoading = true
      try {
        const cvs = await html2canvas(
          document.querySelector(`#${this.paintAreaId}`),
          { useCORS: true }
        )
        // 将合并后的图片转换成文件
        return new Promise((resolve, reject) => {
          cvs.toBlob(blob => {
            // 关闭loading状态
            this.composeLoading = false
            // 将生成的图片传递给父组件
            this.$emit('change', new File([blob], `${Date.now()}.png`, { type: 'image/png' }))
            // 清空签名
            this.handleClearSign()
            // 返回处理结果
            resolve()
          })
        })
      } catch (error) {
        console.log('合成图片发生错误：', error)
      }
      // 关闭loading状态
      this.composeLoading = false
    },

    /**
     * 关闭弹框
     */
    closeDialog() {
      this.showDialog = false
      this.$emit('close', false)
    }
  }
}
</script>

<style lang="scss">
.comp-sign {
  .el-row {
    margin-top: 0;
  }
  .agreement-wrapper {
    overflow: hidden;
    .preview-img {
      width: auto;
      height: 68px;
    }
    .el-button {
      float: right;
      margin-top: 18px;
    }
  }
  .sign-area {
    border: 1px dashed;
    margin-top: 12px;
  }
  .footer {
    text-align: right;
    margin-top: 12px;
  }
  .paint-wrapper {
    background-color: #ffffff;
    width: 600px;
    position: fixed;
    left: 100vw;
    top: 100vh;

    .paint-image {
      width: 100%;
      height: auto;
    }
    .paint-sign-image {
      width: 160px;
      height: auto;
      margin: -300px 0 0 400px;
    }
  }
}
</style>
