<template>
  <template v-if="mode === 'DESIGN'">
    <el-icon ><EditPen/></el-icon>
    请签名
  </template>
  <template v-else>
    <template v-if="perm === 'E'">
      <div v-if="!_value">
        <el-button icon="EditPen" @click="doSign">请签字</el-button>
      </div>
      <div v-else>
        <div>
          <el-image fit="contain" class="sign-border-preview" style="width: 200px; height: 100px" @click="doSign"
                    :src="_value"/>
        </div>
        <div>
          点击签名重签
        </div>
      </div>
    </template>
    <template v-else-if="perm === 'R'">
      <div v-if="_value">
        <el-image fit="contain" style="width: 200px; height: 100px" :src="_value"/>
      </div>
      <div>
        请签名
      </div>
    </template>
  </template>
  <el-dialog title="请使用鼠标签字" width="800px" :visible.sync="sign.open" @close="signClose" append-to-body>
    <div class="sign-border">
<!--      <vue-esign v-if="sign.open" ref="sign" :width="800" :height="300" :isCrop="isCrop"-->
<!--                 :lineWidth="sign.lineWidth" :lineColor="sign.lineColor"-->
<!--                 :bgColor.sync="sign.bgColor"/>-->
    </div>
    <div slot="footer">
      <el-button size="mini" @click="signClose">取消</el-button>
      <el-button size="mini" type="primary" @click="handleGenerate">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
// import vueEsign from 'vue-esign'

import {computed, defineProps,ref} from "vue";
// import EditTable from "../../../rapid/gen/editTable";

const emit = defineEmits(["input"])
const props = defineProps({
  mode: {
    type: String,
    default: 'DESIGN'
  },
  required: {
    type: Boolean,
    default: false
  },
  value: {
    type: String,
    default: null
  },
  perm: {
    type: String,
    default: 'E'
  },
  isCrop: {
    type: Boolean,
    default: false
  },
  lineColor: {
    type: String,
    default: '#000000'
  }
})
const sign = ref({
  open: false,
  lineWidth: 6,
  bgColor: ''
})
const _value = computed({
  get() {
    return props.value;
  },
  set(val) {
    emit("input", val);
  }
})
const signClose = () => {
  sign.value.open = false
  sign.value.reset()
}
const doSign = () => {
  sign.value.open = true
}
const handleGenerate = () => {
  sign.value.generate().then(res => {
    _value.value = res
    sign.value.open = false
  }).catch(err => {
    alert(err) // 画布没有签字时会执行这里 'Not Signned'
  })
}
</script>

<style scoped>
.sign-border {
  border: 1px dashed #2b2b2b;
}

.sign-border-preview {
  border: 1px solid #ffffff;
}

.sign-border-preview:hover {
  border: 1px dashed #1989fa;
}
</style>
