<template>
<div class="w_page">
<div  class="wrap" v-if="show" >

  <div  >
    <div  class="content" >
      <div  class="item" >
        <div  class="item-title" >姓名</div>
        <div  class="item-r" >
          <w-input  placeholder="请输入姓名" :value="param.truename" @input="getTruename" />
        </div>
      </div>
      <div  class="item" >
        <div  class="item-title" >身份证号</div>
        <div  class="item-r" >
          <w-input  placeholder="请输入身份证号" :value="param.idcard" @input="getIdcard" />
        </div>
      </div>
      <div  class="sign" >
        <div  class="signTitle" >手写签名</div>
          <div  class="paper" id="pager1">
              <canvas id="handWriting1" :width="x" :height="y"  v-on:touchstart.prevent="touchstart1" v-on:touchmove.prevent="touchmove1"></canvas>
          </div>
        <div  class="signBtn" >
          <button  class="signBtn-m signBtnfinish" @click="sign1ok" >完成签字</button>
          <button  class="signBtn-m signBtnreload" @click="reSign1" >重新签字</button>
        </div>
      </div>
      <div  class="image" v-show="!(src?false:true)" >
        <img  v-lazy="src" />
      </div>

    </div>
    <button  class="check-btn" @click="onApplyTap" >提交并签署协议</button>
  </div>
  <div  class="content" >
    <w-image  :src="img_root+set.img" mode="widthFix" class="con-img" ></w-image>
  </div>

</div>

<div  is="temloading" v-if="!show" ></div>
</div>
</template>
<script>
// apiStoreGetStoreRecharges(获取商户充值卡)
// apiStoreGetMyStore(获取我的商户)
// apiStoreRenewalfeeStore(商户续费)

import upload from './../../../zhy/component/comUploadImg/comUploadImg';
import addressbtn from './../../../zhy/component/comAddressBtn/comAddressBtn';
import temloading from './../../../zhy/template/temloading/temloading';
var context1 = null;
export default {
components: {
'upload': upload,
'address-btn': addressbtn,
'temloading': temloading,
    },
    name: 'shrine_other_elesign_elesign',
    data: function () {
        return {
            showPage: 1,
            reChoose: 0,
            param: {},
            show: true,
            context1: null,
            hasDraw: false,
            src: null,
            imgArr: [],
            img_root: [],
            set: { 'img': [] },
            imglink: '',
            x:0,
            y:0,
            top:0,
        };
    },
    mixins: [require('./../../../common/publish').publish,require('./../../../mixins.js').basePage],
    watch: {},
    computed: {},
    methods: { 

        onLoad(o) {
            let width = window.screen.availWidth;
            console.log("width",width);
            let x = width /750 * 710;
            let y = 320 * (width /750);

            console.log(x,y,top);
            this.x = x;
            this.y = y;

            let _this = this;
            this.checkLogin(user => {
                this.setData({ user });
                this.onLoadData(user);
            }, '/shrine/other/elesign/elesign', true);
            var param = {};
            app.api.ApiElesignGetElesign(param).then(res => {
                _this.setData({
                    set: res.data,
                    img_root: res.other.img_root
                });
            }).catch(res => {
                app.tips(res);
                this.data.ajax = false;
            });
            var that = this;
            this.$nextTick(function () {
                context1 = wx.createCanvasContext('handWriting1', that);
                console.log("context1",context1);
                context1.setStrokeStyle('#000000');
                context1.lineWidth=3;
                let top = document.getElementById("pager1").offsetTop ;
                that.top = top;
            });

        },
        touchstart1: function (e) {
            console.log("touchstart1");
            context1.beginPath();
            var x = e.touches[0].clientX;
            var y = e.touches[0].clientY - this.data.top;
            context1.moveTo(x,y);
            this.setData({
                hasDraw: true
            });
        },
        touchmove1: function (e) {
            console.log("touchmove1");
            var x = e.touches[0].clientX;
            var y = e.touches[0].clientY- this.data.top;
            context1.lineWidth= 3 ;
            context1.lineTo(x, y);
            context1.stroke();
            context1.moveTo(x, y);
        },
        reSign1: function () {
            var that = this;
            context1.clearRect(0,0,this.data.x,this.data.y);
            that.setData({
                hasDraw: false,
                src: null
            });
        },
        sign1ok: function () {
            var _this = this;
            if (!this.data.hasDraw) {
                console.log('签字是空白的 没有签字');
            } else {
               // var context1 = _this.data.context1;
                context1.draw(true, wx.canvasToTempFilePath({
                    canvasId: 'handWriting1',
                    success(res) {
                        console.log(res.tempFilePath);
                        _this.setData({ src: res.tempFilePath });
                        let url = app.util.url('entry/wxapp/Api_common|uploadPic') + '&m=zhyshop_sun';
                        wx.showLoading({ title: '签名生成中...' });
                        wx.uploadFile({
                            url,
                            filePath: res.tempFilePath,
                            name: 'file',
                            formData: { 'path': res.tempFilePath },
                            success(res) {
                                wx.hideLoading();
                                let data = res.data;
                                if (typeof data == 'string')
                                    data = JSON.parse(data);
                                _this.setData({ imglink: data.other.img_root });
                                if (!data.code) {
                                    _this.setData({ imgArr: data.data });
                                } else {
                                    app.tips(res);
                                }
                            },
                            fail(res) {
                                app.tips(res);
                            }
                        });
                    }
                }));
            }
        },
        onLoadData(user) {
            this.data.param.user_id = user.id;
        },
        getTruename(e) {
            let truename = e.detail.value;
            this.setData({ ['param.truename']: truename });
        },
        getIdcard(e) {
            let idcard = e.detail.value;
            this.setData({ ['param.idcard']: idcard });
        },
        onApplyTap() {
            let _this = this;
            console.log(1, this.data.ajax);
            if (this.data.ajax)
                return;
            console.log(2, this.data.ajax);
            this.data.ajax = true;
            let param = this.data.param;
            let imgsrc = this.data.imgArr;
            if (!param.truename || param.truename == '') {
                app.tips('姓名不能为空');
                _this.setData({ ajax: false });
                return false;
            }
            if (!param.idcard || param.idcard == '') {
                app.tips('身份证号不能为空');
                _this.setData({ ajax: false });
                return false;
            }
            if (!imgsrc || imgsrc == '') {
                app.tips('手动签名不能为空');
                _this.setData({ ajax: false });
                return false;
            }
            param.imgsrc = imgsrc;
            param.user_id = this.data.user.id;
            wx.showLoading({ title: '协议生成中...' });
            app.api.ApiElesignSetEleSign(param).then(res => {
                wx.hideLoading();
                app.alert('协议签署成功\uFF01', () => {
                    app.navTo('/shrine/other/elesigninfo/elesigninfo');
                }, 0);
                _this.setData({ ajax: false });
            }).catch(res => {
                wx.hideLoading();
                app.tips(res);
                _this.setData({ ajax: false });
            });
        }
    },
    created :function() {
        current_this=this;

        this.onLoad(this.$route.query);
    },
    beforeMount: function () {
    },
    mounted :function() {
        this.bindEventBus();

        wx.showMenuItems(false);

    },
    beforeDestroy: function () {
    },
    destroyed: function () {
    }
};
</script>
<style scoped>
.title {
  height: 0.42rem;
  line-height: 0.42rem;
  padding: 0 0.15rem;
  color: #999;
}

.sec {
  padding-left: 0.15rem;
  background: #fff;
}

.item, .item-auto {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  font-size: 0.28rem;
}

.item {
  height: 0.88rem;
  line-height: 0.88rem;
  padding-right: 0.15rem;
  align-items: center;
}

.items {
  padding-bottom: 0.20rem;
  border-bottom: 1px solid #eee;
}

.items-title {
  height: 0.60rem;
  line-height: 0.60rem;
  font-size: 0.28rem;
}

.items-rich {
  width: 6.90rem;
  line-height: 0.36rem;
  height: 1.44rem;
  padding: 0.15rem;
  background: #eee;
}

.item-auto {
  justify-content: flex-start;
  padding: 0.10rem 0.15rem 0.10rem 0;
}

.item-auto-title {
  padding: 0.10rem 0;
}
.item-rf {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 0.88rem;
  line-height: 0.88rem;
  font-size: 0.28rem;
  text-align: right;
  color: #999;
  background: #fff;
}
.item-r {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.item-r input {
  flex: 1;
  text-align: right;
  margin-right: 0.10rem;
}

.picker-in {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  color: #999;
}

.item-r-checkbox {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.checkbox-item {
  display: flex;
  flex-direction: row;
  padding: 0.10rem;
  margin: 0 0.10rem;
}

.checkbox-item-fixed {
  width: 5.80rem;
  padding: 0.10rem 0;
  margin: 0.10rem 0;
  justify-content: center;
}

.item-auto-title-fixed {
  width: 1.20rem;
  margin: 0.10rem 0.20rem 0 0;
}

checkbox .wx-checkbox-input {
  width: 0.30rem;
  height: 0.30rem;
  border-radius: 50%;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #4bb7d3;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 0.28rem;
  height: 0.28rem;
  line-height: 0.28rem;
  text-align: center;
  font-size: 0.22rem;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

.item-r-switch {
  margin-top: 0.10rem;
}

.checkbox-item-input {
  width: 2.00rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.checkbox-item-input input {
  flex: 1;
  text-align: right;
}

.check-btn {
  width: 7.10rem;
  height: 0.90rem;
  line-height: 0.90rem;
  background: var(--maincolor,--skin);
  color: var(--mainbtnfontcolor,#fff);
  border-radius: 0.10rem;
  margin: 0.40rem auto 0.30rem;
  font-size: 0.34rem;
}

.secs {
  margin-bottom: 0.08rem;
}

.btn-save, .btn-add {
  background: #feaf64;
  color: #fff;
  height: 0.60rem;
  line-height: 0.60rem;
  padding: 0 0.20rem;
  border-radius: 0.10rem;
  font-size: 0.30rem;
}

.label-flex {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.explain {
  color: #999;
  line-height: 0.40rem;
  border-bottom: 1px solid #eee;
}
.height88 {
  height: 0.88rem;
  line-height: 0.88rem;
}
.w_page {
  background: var(--white);
}
.banner {
  width: 100%;
  height: 2.40rem;
}
.apply-title {
  font-size: 0.28rem;
  text-align: center;
  padding: 0.50rem 0;
  background: var(--white);
}
.content {
  padding-left: 0.20rem;
  background: #fff;
}
.wrap {
  padding-bottom: 0.40rem;
}
.enter-title {
  height: 0.80rem;
  line-height: 0.80rem;
  text-align: center;
  font-size: 0.30rem;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.rich {
  padding: 0.15rem;
  background: #fff;
}
.fail-reason {
  padding: 0.15rem;
  background: #fff;
}
.btn-a {
  width: 4.00rem;
  height: 0.70rem;
  line-height: 0.70rem;
  margin: 0.20rem auto;
  text-align: center;
  background: var(--skin);
  color: #fff;
  border-radius: 0.10rem;
  font-size: 0.30rem;
}

.container {
  margin: 1px 0 0;
  padding-left: 0.15rem;
  background: #fff;
}

.item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 0.88rem;
  line-height: 0.88rem;
  border-bottom: 1px solid #eee;
  font-size: 0.30rem;
}

.item-r {
  flex: 1;
  padding: 0 0.15rem;
  text-align: right;
  color: #999;
  background: #fff;
}
.btn {
  flex: 1;
}
.item-rf {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.15rem;
  text-align: right;
  color: #999;
  background: #fff;
}
.height88 {
  height: 0.88rem;
  line-height: 0.88rem;
}
.border1 {
  border-bottom: 1px solid #eee;
}
.item button {
  font-size: 0.30rem;
}
.unit {
  margin-right: 0.15rem;
}
.btn-b {
  width: 4.00rem;
  height: 0.90rem;
  line-height: 0.90rem;
  border-radius: 0.10rem;
  background: #4BB7D3;
  color: #fff;
  margin: 0.40rem auto 0.20rem;
}

.items {
  padding-bottom: 0.20rem;
  border-bottom: 1px solid #eee;
}

.items-title {
  height: 0.60rem;
  line-height: 0.60rem;
  font-size: 0.30rem;
}

.items-rich {
  width: 6.90rem;
  line-height: 0.36rem;
  height: 1.44rem;
  padding: 0.15rem;
  background: #eee;
}

.paper{border:1px solid #dedede; margin: 0.20rem 0;width: 7.10rem; height:3.20rem }
.image{border:1px solid #dedede; margin: 0.20rem 0;width: 7.10rem; height:3.20rem }
.signBtn{display: flex; margin-top:0.40rem;}
.signBtn-m{padding: 0.00rem 0.15rem; border-radius: 0.10rem;height: 0.80rem;}
.signBtnfinish{ background-color: var(--maincolor); color: var(--mainfontcolor);}
.signBtnreload{ background-color: var(--helpcolor); color: var(--helperbtnfontcolor);}
.signTitle{ text-align: center; font-size:1.2em;margin:0.20rem auto;}
.handWriting{width:100%}
.image img{width:100%; height:3.20rem }
.con-img{width: 7.10rem;}
</style>