<style>
    .MobileContract{
        width:100%;
        height:auto!important;
        margin:0 auto;
        color:black;
        background: #fff;
        position: relative;
        overflow: auto;
        font-size: 62.5%;
    }
    .MobileContract{
        -webkit-text-size-adjust : 100% ;
        -moz-text-size-adjust : 100% ;
        -ms-text-size-adjust : 100% ;
        text-size-adjust : 100%;
    }
    .MobileContract .MbMagiTitle{
        width:100%;
        text-align: center;
        font-size:5rem;
        margin:15rem 0;
    }
    .MobileContract .mbiSignContent{
        height:300px;    
        margin:0 auto;
        font-size:3rem;
    }
    .MobileContract .mbgiSignPlace{
        display: flex;
        flex-direction: row;
    }
    .MobileContract .mbgibtnLine{
        border-bottom:1px solid #666666 !important;
        color:black;
    }
    .MobileContract .mbgiSignPlace input{
        border:none!important;
        background-color:transparent;
        padding:0 2px !important;
        font-size:3rem;
        height:3rem;
        color:black;
    }
    .MobileContract .mbgiSignPlace .el-input{
        border-radius: 0;
        height:3rem;
        border: none !important;
        background-color: transparent !important;
        padding: 0 2px !important;
        text-align: center!important;
    }
    .MobileContract .w465{
        width:465px!important;
    }
    .MobileContract .w133{
        width:8rem!important;
        display:inline-block;
        text-align: center;
    }
    .MobileContract .mbgiNYR{
        display: flex;
        justify-content: space-between;
    }
    .MobileContract .mbgiBtmContent{
        width:800px;
        margin:0 auto;
        font-size:3rem;
    }
    .MobileContract .mbjiayisf{
        width:100%;
        display: flex;
        justify-content: space-between;
    }
    .MobileContract .mbgiRule{
        margin-top:5rem;
        text-indent: 40px;
        line-height: 6rem;
    }
    .MobileContract .mbgiComTitle{
        font-size:3.2rem;
        margin:4rem 0;
    }
    .MobileContract .mbgiComSecond{
        font-size:3rem;
        margin:3rem 0;
    }
    .MobileContract .mbgiDingyi{
        line-height: 6rem;
    }
    .MobileContract .mbgiDingyi input {
        border: none!important;
        background-color: transparent;
        padding: 0 2px !important;
    }
    .MobileContract .mbgiLastNYR{
        display: flex;
        flex-direction: row;
    }
    .MobileContract .mbgiLastNYR input{
        border: none!important;
        background-color: transparent;
        padding: 0 2px !important;
        text-align: center;
        font-size:3rem;
    }
    .MobileContract .zindex{
        z-index: 9999!important;
        opacity: 1!important;
    }

    .MobileContract .signature{
        width:600px;
        background: #fff;
        padding:15px;
        border-radius: 20px;
        cursor: pointer;
    }
    .MobileContract .Sign{
        position: fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background: rgba(0,0,0,.4);
        z-index: -500;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
    }
    .MobileContract .Sign .signatureBox {
        width: 100%;
        height: 300px;
        box-sizing: border-box;
        overflow: hidden;
        background: #fff;
        z-index: 100;
        display: flex;
        flex-direction: column;
        margin-top:20px;
        padding:0 20px;
        box-sizing: border-box;
    }
    .MobileContract .Sign .canvasBox {
        box-sizing: border-box;
        flex: 1;
    }
    .MobileContract .Sign canvas {
        border: 1px solid #7d7d7d;
    }
    .MobileContract .MagiSign{
        height:9rem;
        position: relative;
        top:-2rem;
    }
    .MobileContract .w10{
        width:8rem!important;
        display:inline-block;
    }
    .MobileContract .w8{
        width:4rem!important;
        display:inline-block;
    }
    .MobileContract .w51r{
        width:34rem!important;
        display:inline-block;
    }
    .MobileContract .MbSignDiv{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background: #fff;
        border-top: 1px solid #ccc;
        z-index: 1000;
    }
    .MobileContract .MbSignDiv .mbsign{
        width: 75%;
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
    }
   .MobileContract .MbSignDiv .mbsign p{
        margin: 0 auto;
        padding: 0 10px;
    }
   .MobileContract .mbConSpan{
        display:inline-block;
        width:12rem;
        text-align-last: justify;   
    }
    .MobileContract #canvas {
        width: 100%;
        height: 100%;
    }
    .MobileContract #canvas canvas {
        display: block;
        height:100%;
    }
    .MobileContract .CliSignDiv{
        position: fixed;
        border:1px solid #d1d1d1;
        width:100%;
        background-color: #fff;
        z-index: 999;
        margin:auto;
        display: block;
        z-index: -999;
    }
    .MobileContract .CanvasDiv{
        width: 100%;
        height: calc(100% - 8rem);
        padding-top: 5%;
    }
    .MobileContract .CanvasDiv #canvas{
        width: 100%;
        height: 100%;
    }
    .MobileContract .Mbdash{
        padding: 10px;
        box-sizing: border-box;
        border: 1px dashed #ccc;
        width: 95%;
        height: 98%;
        margin:0 auto;
        overflow: hidden;
    }
    .MobileContract .isShowSign{
        z-index: 999!important;
    }
    .MobileContract .CisHideen{
        display: none;
        overflow: hidden;
    }
    .MobileContract .w6{
        width:6rem!important;
        display: inline-block;
        text-align: center;
    }
</style>
<template>
    <div class="MobileContract">
        <div class="MbMagiTitle">麦子ERP使用协议书</div>
        <div class="mbgiBtmContent" :class="dialogVisible?'CisHideen':''">
            <div>
                <div>
                    <span class="mbConSpan">甲 方</span>：成都微途科技有限公司
                </div>
                <div style="margin-top:4rem;">
                    营业执照：915101060776915321
                </div> 
            </div>
            <div style="margin-top:4rem;">
                <div class="mbgiSignPlace">
                    <div><span class="mbConSpan">乙 方</span>：</div>
                    <div class="mbgibtnLine">
                        <span class="w51r">{{msg.CustomerName}}</span>
                    </div>
                </div>
                <div class="mbgiSignPlace" style="margin-top:4rem;">
                    <div>营业执照：</div>
                    <div class="mbgibtnLine">
                        <span class="w51r">{{msg.BusinessLicense}}</span>
                    </div>
                </div>
                <div class="mbgiSignPlace" style="margin:4rem 0 15rem 0;">
                    <div>签订日期：</div>
                    <div class="mbgiNYR">
                        <div class="mbgibtnLine">
                            <span class="w10">{{SignYear}}</span>
                        </div>
                        年
                        <div class="mbgibtnLine">
                            <span class="w6">{{SignMonth}}</span>
                        </div>
                        月
                        <div class="mbgibtnLine">
                            <span class="w6">{{SignDate}}</span>
                        </div>
                        日
                    </div>
                </div>

            </div>
            <div class="mbgiRule">
                根据《中华人民共和国合同法》以及其它相关法律、法规的规定，本着平等互利的原则， 甲、乙双方就合作开展_麦子ERP系统_软件的免费应用，特订立本合同，并共同遵守下列条款：
            </div>
            <div class="mbgiComTitle">一、定义</div>
            <div class="mbgiDingyi">
                <div>除非本合同的条款或者内容中另有规定，下列名词具有如下意义：</div>
                <div>1、软件产品：指甲方提供的《麦子ERP系统》的SaaS版本</div>
                <div>2、知识产权：指依据中国有关法律和国际条约规定权利人所享有的专利权、版权(著作权)、商标权、商业信誉和商业秘密权。</div>
                <div>3、技术支持：应软件用户的要求，为用户解决软件应用过程中产生的各种技术问题。</div>
                <div>4、售后服务：指为乙方及乙方用户提供软件维护、升级等其它服务。</div>
                <div>5、补充协议及附件：指主合同的补救条款或从合同等，与主合同具有同样的效力。</div>
            </div>
            <div class="mbgiComTitle">二、合同期限</div>
            <div class="mbgiDingyi">
                <div>本合同规定“麦子ERP系统”软件基础版免费使用期限为：</div>
                <div class="mbgiLastNYR" style="line-height:4rem;margin-top:2rem;">
                    <div class="mbgibtnLine">
                        <span class="w10">{{SYear}}</span>
                    </div>
                    年
                    <div class="mbgibtnLine">
                        <span class="w8">{{SMonth}}</span>
                    </div>
                    月
                    <div class="mbgibtnLine">
                        <span class="w8">{{SDate}}</span>
                    </div>
                    日
                    <div style="margin-left:10px;">至</div>
                    <div class="mbgibtnLine">
                        <span class="w10">{{EYear}}</span>
                    </div>
                    年
                    <div class="mbgibtnLine">
                        <span class="w8">{{EMonth}}</span>
                    </div>
                    月
                    <div class="mbgibtnLine">
                        <span class="w8">{{EDate}}</span>
                    </div>
                    日
                </div>
            </div>
            <div class="mbgiComTitle">三、费用及结算模式</div>
            <div class="mbgiRule">
                经甲乙双方协商一致，乙方使用软件产品的基础功能为免费使用，若乙方需要使用其他增值功能，需要和甲方另行签订协议。
            </div>
            <div class="mbgiComTitle" style="margin-bottom:0;">四、双方的权利和责任</div>
            <div class="mbgiComSecond">(一)甲方的权利和责任</div>
            <div class="mbgiDingyi">
                <div>1、甲方向乙方提供软件产品和运行环境。</div>
                <div>2、甲方保障系统的稳定运行和BUG的及时修复。</div>
                <div>3、甲方可以向乙方提供单独付费的定制化开发或服务内容。</div>
                <div>4、甲方有权要求乙方保证系统的知识产权。乙方不得将系统转借非乙方企业成员使用</div>
                <div>5、甲方可以为乙方提供全方位技术支持。由此产生的甲方工作人员的交通住宿费用由乙方承担。</div>
                <div>6、 甲方需保障乙方的数据安全，不可泄露任何乙方数据为给非乙方工作人员。</div>
            </div>
            <div class="mbgiComSecond">(二)乙方的权利和责任</div>
            <div class="mbgiDingyi">
                <div>1、乙方使用本系统，必须遵守国家互联网信息管理相关法律、法规、条例。乙方对其经营行为和信息发布时因违反上述规定而引起的任何政治、经济、法律责任承担全部责任。</div>
                <div>2、乙方须对系统使用账号严格保存，禁止非乙方公司员工拥有该系统账户，员工离职后，及时禁用其账户，如因乙方泄露账号密码，造成的数据安全问题，甲方概不负责。</div>
                <div>3、乙方可以在周一至周五（9:30-18:00）联系甲方技术支持代表解决系统问题。若乙方升级至定制化用户可以调整为周一至周日（9:30-21:30）</div>
            </div>
            <div class="mbgiComTitle">五、合同的解除与终止</div>
            <div class="mbgiRule">
                双方协商一致可以解除本合同。另外，本合同在下列情形下也可以解除，但提出解除的一方应提前一个月以书面形式通知对方：            
            </div>
            <div style="margin-top:2rem;line-height:7rem;">
                <div>
                    1、因合同一方经营状况出现重大困难，濒临破产进入法定整顿期间或被清算，另一方可以解除本协议。
                </div>
                <div>
                    2、因合同一方未履行合同义务或违约，另一方经书面告知给予一定期限仍不履行或不予采取补救措施，致使另一方合同预期利益无法实现或无继续履行必要，另一方有权解除本合同。
                </div>
                <div>
                    3、本合同期限届满，双方未续签的，合同解除或合同到期自然终止，双方仍应履行未完毕之合同义务，安排售出产品的售后服务事项。同等条件下，乙方有优先续约权利。
                </div>
            </div>
            <div class="mbgiComTitle">六、违约责任</div>
            <div class="mbgiDingyi">
                <div>1、乙方若违反协议约定，侵犯甲方知识产权，需承担不低于贰拾万元整的经济损失。</div>
                <div>2、若一方违约给另一方造成损失的，除赔偿损失外，另需承担其它违约责任。</div>
                <div>3、因一方履约不当给第三方造成损失的，应自行承担赔偿责任。</div>
            </div>
            <div class="mbgiComTitle">七、争议解决</div>
            <div class="mbgiDingyi">
                <div>甲、乙双方之间因履行本合同或因本合同任何条款的解释与适用而发生任何争议，甲、乙双方应通过友好协商解决。如协商不能解决，任何一方有权向有管辖权的人民法院起诉。</div>
            </div>
            <div class="mbgiComTitle">八、其它</div>
            <div class="mbgiDingyi">
                <div>1、凡涉及本代理合同补充、变更、解除等事宜，双方均可进行协商并签署补充协议作为合同附件。合同附件与本合同具有同等法律效力。</div>
                <div>2、本合同一式贰份，双方各执壹份，签字盖章后生效，具有同等法律效力。</div>
            </div>
            <div style="margin:60px 0;">本公司尚有"选配功能"."增值功能"."附加服务"三项优质产品,欢迎选购</div>
            <div class="mbjiayisf">
                <div>
                    甲方授权代表<br/>(签章)：
                </div>
                <div style="display:flex">
                    乙方授权代表<br/>(签章)：<img class="MagiSign" :src="msg.CustomerSignImg" v-if="msg.CustomerSignImg!=''"/>
                </div> 
            </div>
            <div class="mbjiayisf" style="margin:5rem 0 16rem 0">
                <div class="mbgiLastNYR">
                    <div class="mbgibtnLine">
                        <span class="w10">{{JYear}}</span>
                    </div>
                    年
                    <div class="mbgibtnLine">
                        <span class="w8">{{JMonth}}</span>
                    </div>
                    月
                    <div class="mbgibtnLine">
                        <span class="w8">{{JDate}}</span>
                    </div>
                    日
                </div>
                <div class="mbgiLastNYR" style="margin-left:2rem;">
                    <div class="mbgibtnLine">
                        <span class="w10">{{YYear}}</span>
                    </div>
                    年
                    <div class="mbgibtnLine">
                        <span class="w8">{{YMonth}}</span>
                    </div>
                    月
                    <div class="mbgibtnLine">
                        <span class="w8">{{YDate}}</span>
                    </div>
                    日
                </div>
            </div>
            <div class="MbSignDiv" @click="dialogVisible=true" :class="dialogVisible?'CisHideen':''">
                <div class="mbsign">
                    <p><span class="iconfont icon-qianming" style="font-size:4rem;"></span></p>
                    <span style="font-size:3rem" v-if="msg.CustomerSignImg==''||msg.CustomerSignImg==null">签字</span>
                    <span style="font-size:3rem" v-else>重新签字</span>
                </div>        
            </div>
        </div>

        <!-- 签名 -->
        <div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
            <div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
                <div class="CanvasDiv">
                    <div class="Mbdash">
                        <div id="canvas" style="position:relative;top:0;">
                    </div>
                </div>
                </div>
                    <div class="bottom" style="text-align:center;height:80px;line-height:80px">
                        <el-row>
                            <el-col :span="12">
                                <div style="width:100%;" @click="handelClearEl()">
                                    <!-- <span class="bg bg1"></span> -->
                                    <span style="font-size:4rem;color:rgb(36, 173, 229)" class="iconfont icon-zhongzhi1"></span>
                                    <span style="font-size:3rem">重置签名</span>
                                </div>
                                
                            </el-col>
                            <el-col :span="12">
                                <div style="width:100%;" @click="handelSaveEl()">
                                    <!-- <span class="bg bg2"></span> -->
                                    <span style="font-size:4rem;color:rgb(36, 173, 229)" class="iconfont icon-wancheng1"></span>
                                    <span style="font-size:3rem">完成签名</span>
                                </div>
                            </el-col>
                        </el-row>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import moment from 'moment'
let canvas = document.createElement("canvas");
let cxt = canvas.getContext("2d");
export default {
    data() {
      return {
          msg:{
            Id:0,
            CustomerName:'', //乙方名称
            SignDate:'', //签订日期
            BusinessLicense:'',  //营业执照
            ContractStartDate:'',  // 合同开始日期
            ContractEndDate:'',  //合同结束日期
            ViittoSignImg:'',  //微途签章图片
            ViittoSignDate:'',  //微途签订日期
            CustomerSignImg:'',  //客户签章图片
            CustomerSignDate:'',  //客户签订日期
          },
          SignYear:'', //签约日期年
          SignMonth:'', //签约日期月
          SignDate:'', //签约日期日

          SYear:'', //使用开始年
          SMonth:'',  //使用开始月
          SDate:'',  //使用开始日

          EYear:'', //使用结束年
          EMonth:'', //使用结束月
          EDate:'',  //使用结束日

          JYear:'', //甲方签约年
          JMonth:'', //甲方签约月
          JDate:'',  //甲方签约日

          YYear:'', //乙方签约年
          YMonth:'',//乙方签约月
          YDate:'', //乙方签约日

          dialogVisible:false,
          linewidth: 10, //线条粗细，选填
          color: "black", //线条颜色，选填
          background: "#fff", //线条背景，选填
      }
    },
    mounted() {
        var cHeight=document.getElementsByClassName("CliSignDiv")[0];
        cHeight.style.height=900+'px';
        this.getCanvas();

        if (this.$route.query.Id) {
            this.msg.Id = this.$route.query.Id;
            this.getContract();
        }

    },
    methods: {
        //初始化信息
        getContract(){
            let msg = {
                Id:this.$route.query.Id
            }
            this.apipost("viitto_get_GetEntityService",msg,res => {
                if (res.data.resultCode == 1) {
                    //this.Success('保存成功');
                    let myData = res.data.data;
                    this.msg.CustomerName = myData.CustomerName;
                    if(myData.SignDate!=null){
                        this.SignYear = moment(myData.SignDate).format("YYYY-MM-DD").split("-")[0];
                        this.SignMonth = moment(myData.SignDate).format("YYYY-MM-DD").split("-")[1];
                        this.SignDate = moment(myData.SignDate).format("YYYY-MM-DD").split("-")[2];
                    }
                    this.msg.BusinessLicense = myData.BusinessLicense;
                    if(myData.ContractStartDate!=null){
                        this.SYear = moment(myData.ContractStartDate).format("YYYY-MM-DD").split("-")[0];
                        this.SMonth = moment(myData.ContractStartDate).format("YYYY-MM-DD").split("-")[1];
                        this.SDate = moment(myData.ContractStartDate).format("YYYY-MM-DD").split("-")[2];
                    }
                    if(myData.ContractEndDate!=null){
                        this.EYear = moment(myData.ContractEndDate).format("YYYY-MM-DD").split("-")[0];
                        this.EMonth = moment(myData.ContractEndDate).format("YYYY-MM-DD").split("-")[1];
                        this.EDate = moment(myData.ContractEndDate).format("YYYY-MM-DD").split("-")[2];
                    }
                    if(myData.ViittoSignDate!=null){
                        this.JYear = moment(myData.ViittoSignDate).format("YYYY-MM-DD").split("-")[0];
                        this.JMonth = moment(myData.ViittoSignDate).format("YYYY-MM-DD").split("-")[1];
                        this.JDate = moment(myData.ViittoSignDate).format("YYYY-MM-DD").split("-")[2];
                    }
                    if(myData.CustomerSignDate!=null){
                        this.YYear = moment(myData.CustomerSignDate).format("YYYY-MM-DD").split("-")[0];
                        this.YMonth = moment(myData.CustomerSignDate).format("YYYY-MM-DD").split("-")[1];
                        this.YDate = moment(myData.CustomerSignDate).format("YYYY-MM-DD").split("-")[2];
                    }
                    this.msg.ViittoSignImg = myData.ViittoSignImg;
                    this.msg.CustomerSignImg = myData.CustomerSignImg;
                } else {
                    this.Error(res.data.message);
                }
            },
                err => {}
            );
        },
        //保存
        SaveInfo(){
            this.msg.SignDate = this.SignYear+"-"+this.SignMonth+"-"+this.SignDate;
            this.msg.ContractStartDate = this.SYear+"-"+this.SMonth+"-"+this.SDate;
            this.msg.ContractEndDate = this.EYear+"-"+this.EMonth+"-"+this.EDate;
            this.msg.ViittoSignDate = this.JYear+"-"+this.JMonth+"-"+this.JDate;
            this.msg.CustomerSignDate = this.YYear+"-"+this.YMonth+"-"+this.YDate;
            this.apipost("viitto_post_SetViittoContractService",this.msg,res => {
                if (res.data.resultCode == 1) {
                    this.Success('保存成功');
                    this.handelClearEl();
                } else {
                    this.Error(res.data.message);
                }
            },
                err => {}
            );
        },

        getCanvas() {
            let el = document.getElementById("canvas");
            el.appendChild(canvas);
            canvas.width = el.clientWidth;
            canvas.height = el.clientHeight;
            //cxt.fillStyle = this.background; //填充绘图的背景颜色
            cxt.fillStyle='rgba(255, 255, 255, 0)';
            cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
            cxt.strokeStyle = this.color; //笔触的颜色
            cxt.lineCap = "round"; //线条末端线帽的样式
            let linewidth = this.linewidth;
            //开始绘制
            canvas.addEventListener(
                "touchstart",
                function(e) {
                cxt.beginPath();
                cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
                cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
                }.bind(this),
                false
            );
            //绘制中
            canvas.addEventListener(
                "touchmove",
                function(e) {
                cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
                cxt.stroke();
                }.bind(this),
                false
            );
            //结束绘制
            canvas.addEventListener(
                "touchend",
                function() {
                cxt.closePath();
                }.bind(this),
                false
            );
        },
        handelClearEl() {
            cxt.clearRect(0, 0, canvas.width, canvas.height);
        },
        handelSaveEl() {
            let that=this;
            let imgUrl =canvas.toDataURL();
            let newArr = [];
            var fileName = `${that.uuid(10,10)}.png`;
            var path = `/RevenueFile/`;
            newArr.push(this.dataURLtoFile(imgUrl,fileName))
            this.UploadSelfFileT(path, newArr, x => {
                this.msg.CustomerSignImg=that.domainManager().ViittoFileUrl+x.data.FilePath;
                this.msg.ID= this.$route.query.Id;
                this.dialogVisible=false;
                this.SaveInfo();
            }, 1);
        },
        uuid(len, radix) {
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
            var uuid = [],
            i;
            radix = radix || chars.length;
            if (len) {
            // Compact form
            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
            } else {
            var r;
            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
            uuid[14] = '4';
            for (i = 0; i < 36; i++) {
                if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                }
            }
            }
            return uuid.join('');
        },
        dataURLtoFile(dataurl, filename) {//将base64转换为文件
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime});
        },
    },
}
</script>