<template>
    <div class="home_wrapper">
      <div class="header_main" >
        承包方记事
        <div class="return_btn" @click="onClickLeft"></div>
      </div>

      <div class="information_main">
        <div class="titBox">
          <img src="../../assets/images/sunVillage_info/contractor_icon_01.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
          <p class="tit">{{this.$store.state.user.deptName}}</p>
        </div>

        <div class="information_content">
          <div class="information_block">
            <p class="block_num">共有承包方<span>{{cbfCount}}</span>户</p>
          </div>
          <div class="information_block">
            <p class="block_num">承包地<span>{{cbfdkCount}}</span>亩</p>
          </div>
        </div>

      </div>

      <div class="subForm" v-if="!showJsxx">
        <img src="../../assets/images/sunVillage_info/list_employer_process_icon_01.png" alt="">
        <van-field
          v-model="form.gsjs"
          rows="3"
          autosize
          required
          label="记事内容"
          type="textarea"
          :border="false"
        />
      </div>

      <div class="subForm2" v-if="showJsxx">
        <img class="topImg" src="../../assets/images/sunVillage_info/list_employer_process_icon_03.png" alt="">
        <van-field readonly v-model="form.gsjs" label="记事内容" placeholder="记事内容" input-align="right" :border="false" />
        <van-cell title="记事人" style="border: none;color: #646566;" >
          <van-field readonly style="padding: 0 0;height: 30px;" label="记事人" input-align="right" :border="false" >
            <template #label>
              <img  :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
            </template>
          </van-field>
        </van-cell>
        <van-field readonly v-model="form.gsjsrq" label="记事日期" placeholder="审核日期" input-align="right" :border="false" />

        <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_icon_09.png" alt="">
      </div>

      <div style="margin: 30px auto 0;width: 50%;" v-if="!showJsxx">
        <van-button round block type="primary" native-type="submit" @click="onSign()">
          批量记事签字
        </van-button>
      </div>

      <div style="margin: 30px auto 0;width: 50%;" v-if="showJsxx">
        <van-button round block type="primary" native-type="submit" :to="{name:'sunVillageInfoListChronicles'}">
          单独记事签字
        </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 { getList,getCbfdcList,getCbdkms,updateSysCfb,updateBatchSign} from "@/api/sunVillage_info/sysCbf";
  import $ from "jquery";
  export default {
    name: "certificateList",
    data() {
      return {
        value:'',
        cbfCount:0,
        cbfdkCount:0,
        showJsxx:false,
        showesign:false,
        height:0,
        form:{},
        //电子签名
        signature: {
          lineWidth: 6, // 画笔的线条粗细
          lineColor: "#000000", // 画笔的颜色
          bgColor: "", // 画布的背景颜色
          resultImg: "", // 最终画布生成的base64图片
          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        },
      };
    },
    created() {
      this.getCbfdc();
      this.getCbfCount();
      this.getCbfdkCount();
      this.height = window.screen.height * 1.28 - 20;
    },
    methods: {
      getCbfCount(){
        getList({}).then(res=>{
          this.cbfCount = res.total;
        });
      },
      getCbfdc(){
        getCbfdcList({}).then(res=>{
          if(res.total > 0){
            this.form = res.rows[0];
            if(this.form.gsjsrqz != null){
              this.showJsxx = true;
            }
          }
        });
      },
      getCbfdkCount(){
        getCbdkms({}).then(res=>{
          this.cbfdkCount = res.data;
        });
      },
      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() {
        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('date', this.format(new Date(), 'yyyy-MM-dd'))  // 通过append向form对象添加数据
            this.showesign = false;
            this.$toast.loading({
              message: "数据处理中",
              forbidClick: true,
              duration: 40000,
            });
            updateBatchSign(param,this.form.gsjs).then((res) => {
              this.$toast.clear();
              this.getCbfdc();
              this.$notify({type: 'success', message: '签字成功'});

              })
              // 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;
  }
  .signature-footer {
    transform: rotate(90deg);
    width: auto;
    position: absolute;
    top: 50%;
    left: 0px;

  }

  .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);
  }
.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%);
    }
  }

  .information_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);
    position: relative;
    background: url("../../assets/images/sunVillage_info/contractor_icon_08.png") no-repeat center;
    background-size: 100% 100%;

    .tit{
      color: #ffffff;
    }
    .information_content{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      .information_block{
        width: 48%;
        background: rgba(255,255,255,.8);
        text-align: center;
        padding: .5vh 0;
        border-radius: 50PX;
      }
      .block_num{
        font-size: 14PX;
        color: #666666;
        span{
          font-size: 16PX;
          color: #1b9000;
        }
      }
      .block_name{

      }
    }

  }

  .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>
