<template>
    <div class="home_wrapper">
      <div class="header_main" >
        发包方审核
        <div class="return_btn" @click="onClickLeft"></div>
      </div>
      <div class="list_main">
        <div class="titBox">
          <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
          <p class="tit">信息核对</p>
        </div>
        <van-field readonly v-model="form.fbfbm" label="编码" placeholder="编码" input-align="right" :border="false" />
        <van-field readonly v-model="form.fbfdcy" label="名称" placeholder="名称" input-align="right" :border="false" />
        <van-field readonly v-model="form.fbffzrxm" label="负责人" placeholder="负责人" input-align="right" :border="false" />
        <van-field readonly v-model="form.fzrzjlx" label="证件类型" placeholder="证件类型" input-align="right" :border="false" />
        <van-field readonly v-model="form.fzrzjhm" label="证件号码" placeholder="证件号码" input-align="right" :border="false" />
        <van-field readonly v-model="form.fbfdcjs" label="调查记事" placeholder="调查记事" input-align="right" :border="false" />
        <van-field readonly v-model="form.fbfdcy" label="调查员" placeholder="调查员" input-align="right" :border="false" />
        <van-field readonly v-model="form.fbfdcrq" label="调查日期" placeholder="调查日期" input-align="right" :border="false" />
        <van-cell title="调查签名" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly label="调查签名" input-align="right" :border="false" >
          <template #label>
            <img :src="'/api'+form.fbfdcqz" width="10%" alt="" v-if="form.fbfdcqz" >
          </template>
        </van-field>
        </van-cell>
<!--        <van-col :span="12">  <van-field readonly label="调查签名" input-align="right" :border="false" /></van-col>-->
<!--        <van-col :span="12"><img :src="'/api'+form.fbfdcqz" width="100%" alt="" v-if="form.fbfdcqz" ></van-col>-->

      </div>

      <div class="subForm"  v-if="!showShenHe">
        <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
        <van-field
          v-model="form.shyj"
          rows="3"
          autosize
          required
          label="审批意见"
          type="textarea"
          :border="false"
        />
      </div>

      <div class="subForm2" v-if="showShenHe">
        <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
        <van-field readonly v-model="form.shyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
        <van-cell title="审核人" style="border: none;height: 40px;color: #646566;" >
          <van-field readonly style="padding: 0 0;" label="审核人" input-align="right" :border="false" >
            <template #label>
              <img :src="'/api'+form.shrqz" width="10%" alt="" v-if="form.shrqz" >
            </template>
          </van-field>
        </van-cell>
        <van-field readonly v-model="form.shrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />

        <img class="bottomImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_04.png" alt="">
      </div>
      <div style="margin: 30px auto 0;width: 50%;" v-if="showShqz && !showShenHe">
        <van-button round block type="primary" native-type="submit" @click="onSign()">
          审核签字
        </van-button>
      </div>
      <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
                 close-icon="close">
        <van-row style="margin:0 10%">
          <p class="title" style="margin:20px 0;position:relative;padding-left:20px;font-size:0.5rem">电子签名</p>
        </van-row>
        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
          <vue-esign
            ref="esign"
            class="mySign"
            :width="500"
            :height="height"
            :isCrop="signature.isCrop"
            :lineWidth="signature.lineWidth"
            :lineColor="signature.lineColor"
            :bgColor.sync="signature.bgColor"
            v-if="!signature.resultImg"
          />
        </div>
        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
        <div class="signature-footer"  v-if="!signature.resultImg">
          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
          </van-row>
        </div>
      </van-popup>
    </div>
</template>

<script>
  import { getSysFfb,auditSign} from "@/api/sunVillage_info/sysFbf";
  import  { commonUpload } from "@/api/homestead/index";
  import $ from "jquery";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        value:'',
        showesign:false,
        showShenHe:false,
        showShqz:true,
        height:0,
        form:{},
        //电子签名
        signature: {
          lineWidth: 6, // 画笔的线条粗细
          lineColor: "#000000", // 画笔的颜色
          bgColor: "", // 画布的背景颜色
          resultImg: "", // 最终画布生成的base64图片
          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        },
      };
    },
    created() {
      this.getSysFfb();
      this.height = window.screen.height * 1.28 - 20;
    },
    methods: {
        getSysFfb(){
          getSysFfb().then(response => {
            if(response.data.length > 0){
              this.form = response.data[0];
              if(this.form.shrqz != null){
                this.showShenHe = true;
              }
              console.info(this.form);
            }

          });
        },
      canvasTTdown() {
        $('#canvasTT').css('display', 'none');
      },
      onSign(){
        this.showesign = true;
      },
      // 清空画板
      handleReset() {
        this.resultImg = null
        if(this.$refs.esign){
          this.$refs.esign.reset();
        }
        $('#canvasTT').css('display', 'block')
      },
      // 生成签字图
      handleGenerate() {
        console.info( this.$refs.esign
          .generate() );
        this.$refs.esign
          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
          .then((res) => {
            this.signature.resultImg = res;
            console.info(res)
            let wj = this.dataURLtoBlob(res);
            let param = new FormData();
            param.append('file', wj)  // 通过append向form对象添加数据
            param.append('id', this.form.id)
            param.append('shyj', this.form.shyj)
            this.$toast.loading({
              message: "数据处理中",
              forbidClick: true,
              duration: 40000,
            });
            auditSign(param).then((r1) => {
              this.$toast.clear();
              // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
              this.$notify({type: 'success', message: '签字成功'});
              this.showShqz = false;
              this.showesign = false;
              this.getSysFfb();
              // this.mainImgArr.push(r1.fileName)
            })
            // let param = new FormData()  // 创建form对象
            // param.append('file', wj)  // 通过append向form对象添加数据
            // param.append('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
            // zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
            //   this.$notify({type: 'success', message: '签字成功'});
            //   this.showesign = false;
            //   getZjdzd(this.zjdzdxx.id).then((response) => {
            //     localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
            //     location.reload();
            //   });


            // });

          })
          .catch((err) => {
            // 画布没有签字时会执行这里提示一下
            this.$toast.fail('请签名后再保存签字');
          });
      },
      dataURLtoBlob (dataurl, filename = 'file') {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
          type: mime
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
    background-size: 100% 100%;
    border: none;
  }

  .van-cell::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.426667rem;
    bottom: 0;
    left: 0.426667rem;
    border:none;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }

  .signature-footer {
    transform: rotate(90deg);
    width: auto;
    position: absolute;
    top: 50%;
    left: 0px;

  }
.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;

        .return_btn {
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
    }
    .release_head{
        height: 90px;
        padding:0 23px;
        display: flex;
        align-items: center;
        font-size: 26px;
        color: #929292;
        .people{
            flex: 1;
            display: flex;
            align-items: center;
            .icon{
                width: 24px;
                height: 21px;
                background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
                background-size: 100% 100%;
                display: block;
                margin-right: 8px;
            }
        }
        .time{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content:flex-end;
            .icon{
                width: 25px;
                height: 25px;
                background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
                background-size: 100% 100%;
                display: block;
                margin-right: 8px;
            }
        }
    }
    .release_conetnt{
        padding:0 22px;
        font-size: 32px;
        color: #252525;
        line-height: 44px;
        img{
            max-width: 100%;
            margin-bottom: 16px;
        }
        p{
            margin-bottom: 16px;
        }
    }
  .list_main{
    padding:25px;
    background: #ffffff;
    width: 94%;
    margin: 25px auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
  }
  .subForm{
    padding:25px;
    background-image: linear-gradient(#2884ec,#68b2ee);
    width: 94%;
    margin: 50PX auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    position: relative;
    padding-top: 10vw;
    img{
      position: absolute;
      left: 50%;
      width: 15vw;
      transform: translate(-50%,calc(-50% - 10vw));
      border: 5PX solid #e9e9e9;
      border-radius: 100%;
    }
    /deep/ .van-field__label{
      /*padding-left: 10PX;*/
      width: auto;
      display: flex;
      align-items: start;
      color: #ffffff;
      margin-right: 6vw;
    }
    /deep/ .van-cell{
      background-color: transparent;
    }
    /deep/ .van-field__value{
      background-color: #ffffff;
      border-radius: 10PX;
    }
    /deep/ .van-field__control{
      padding: 12PX;
    }
    /deep/ .van-cell--required::before{
      left: 60PX;
    }
  }
  .subForm2{
    padding:25px;
    background:#ffffff;
    width: 94%;
    margin: 50PX auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    position: relative;
    padding-top: 10vw;
    .topImg{
      position: absolute;
      left: 50%;
      width: 15vw;
      transform: translate(-50%,calc(-50% - 10vw));
      border: 5PX solid #e9e9e9;
      border-radius: 100%;
    }
    .bottomImg{
      position: absolute;
      left: 50%;
      top: 50%;
      width: 25vw;
      transform: translate(-50%,-50%);
    }
  }
  .titBox{
    display: flex;
    align-items: center;
  }
  .tit{
    font-size: 36px;
    font-weight: bold;
  }
  /deep/ .van-cell{
    padding-left: 0!important;
    padding-right: 0!important;
    padding-bottom: 0!important;
  }
  /deep/ .van-field__label{
    /*padding-left: 10PX;*/
    width: auto;
    display: flex;
    align-items: center;
  }
  /deep/ .van-cell--required::before{
    left: 85PX;
  }
}
</style>
