<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <div style="border: 2px solid #E6E6E6 ;background-color: white">
            <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth"  :lineColor="lineColor" :bgColor.sync="bgColor" />
        </div>
        <div class="page-footer">
            <p>请在上方空白处书写您的签字</p>
            <van-button round type="primary" size="large" @click="handleReset">清空画板</van-button> 
            <van-button round type="info" size="large" @click="handleGenerate">生成图片</van-button>
        </div>
        
    </div>
</template>

<script>
import LHeader from '@/components/header.vue'
export default {
    name: 'sign',
    components: {
        "LHeader":LHeader
    },
    data() {
        return {
            text:'电子签名',
            lineWidth: 6,
            lineColor: 'red',
            bgColor: '',
            resultImg: '',
            isCrop: false
        };
    },
    methods: {
    handleReset () {

      this.$refs.esign.reset()

    },
    // 生成base64格式
    handleGenerate () {
        this.$refs.esign.generate().then(res => {
            this.resultImg = res //把base64赋给img
            //生成图片后存储到session中并跳转把图片是否显示的boolean带过去
            this.$router.push({name:'noticeList',query:{isImg:true}})
            sessionStorage.setItem('resultImg',this.resultImg)
        }).catch(err => {
            // 画布没有签字时会执行这里
            this.$dialog.alert({
                title: '提示',
                message: '不签名就想提交？做梦！',
                theme: 'round-button',
            })
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .van-button{
        width: 90%;
        margin-top: 0.3rem;
    }
    .page-footer{
        text-align: center;
    }
    .page-footer p{
        font-size: 0.3rem;
        font-weight: bolder;
    }
</style>