<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="cbfTypeName" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfbm" label="承包方代码" placeholder="承包方代码" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfmc" label="承包方名称" placeholder="承包方名称" input-align="right" :border="false" />
      <van-field readonly v-model="zjlxName" label="承包方证件类型" placeholder="承包方证件类型" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfzjhm" label="承包方证件号码" placeholder="承包方证件号码" input-align="right" :border="false" />
      <van-field readonly v-model="form.lxdh" label="联系电话" placeholder="联系电话" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfcysl" label="承包方成员数量" placeholder="承包方成员数量" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfdcy" label="承包方调查员" placeholder="承包方调查员" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfdcrq" label="承包方调查日期" placeholder="承包方调查日期" input-align="right" :border="false" />
      <van-field readonly v-model="form.cbfdcjs" label="承包方调查记事" placeholder="承包方调查记事" input-align="right" :border="false" />
      <van-cell title="承包方调查签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly input-align="right" :border="false" >
          <template #label>
            <img :src="'/api'+form.cbfdcqz" width="10%" alt="" v-if="form.cbfdcqz" >
          </template>
        </van-field>
      </van-cell>
      <van-field readonly v-model="form.gsjs" label="公示记事" placeholder="公示记事" input-align="right" :border="false" />
      <van-field readonly v-model="form.gsjsr" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />
      <van-cell title="公示记事人签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly  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" />
      <van-field readonly v-model="form.gsjgyj" label="公示结果意见" placeholder="公示结果意见" input-align="right" :border="false" />
      <van-cell title="公示结果签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >
          <template #label>
            <img :src="'/api'+form.gsjgqz" width="10%" alt="" v-if="form.gsjgqz" >
          </template>
        </van-field>
      </van-cell>
      <van-field readonly v-model="form.gsjgqzrq" label="公示结果签字日期" placeholder="公示结果签字日期" input-align="right" :border="false" />
      <van-field readonly v-model="form.gsshr" label="公示审核人" placeholder="公示审核人" input-align="right" :border="false" />
      <van-field readonly v-model="form.gsshrq" label="公示审核日期" placeholder="公示审核日期" input-align="right" :border="false" />
      <van-field readonly v-model="form.gsshyj" label="公示审核意见" placeholder="公示审核意见" input-align="right" :border="false" />
      <van-cell title="公示审核签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >
          <template #label>
            <img :src="'/api'+form.gsjgqz" width="10%" alt="" v-if="form.gsjgqz" >
          </template>
        </van-field>
      </van-cell>
      <van-field readonly v-model="form.yzbm" 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-field readonly v-model="form.fbfdcjs" label="发包方调查记事" placeholder="发包方调查记事" input-align="right" :border="false" />
      <van-cell title="发包方调查签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly  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-field readonly v-model="form.shyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />
      <van-field readonly v-model="form.shrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />
      <van-cell title="审核人签字" style="color: #646566;">
        <van-field style="padding: 0 0;" readonly  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.hcgfsl	" label="户持股份(份额)数量" placeholder="户持股份(份额)数量	" input-align="right" :border="false" />
      <van-field readonly v-model="form.hcgfzjtqqtdbl	" label="户持股份(份额)比例" placeholder="户持股份(份额)比例	" input-align="right" :border="false" />
      <van-field readonly v-model="form.hcgfzjtqqtdmj	" label="户持股份(份额)面积" placeholder="户持股份(份额)面积" input-align="right" :border="false" />
      <van-field readonly v-model="surveyStatusName" label="确权调查状态" placeholder="确权调查状态" input-align="right" :border="false" />
      <van-field readonly v-model="form.surveyRemark" label="确权调查备注" placeholder="确权调查备注" input-align="right" :border="false" />
      <van-field readonly v-model="isDepositName" label="是否纳入托管" placeholder="是否纳入托管" input-align="right" :border="false" />
      <van-field readonly v-model="form.tgmj" label="托管面积(亩)" placeholder="托管面积(亩)" input-align="right" :border="false" />
      <div style="margin: 30px auto 0;width: 50%;">
        <van-button round block type="primary" v-if="sqbutShow"  @click="cbfsq">
          授权
        </van-button>
        <!-- <van-button round block type="primary" v-if="!sqbutShow"  >
          授权完成
        </van-button> -->
      </div>
      <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_authorized.png" alt="" v-if="!sqbutShow" />
    </div>
  </div>
</template>

<script>
  import { getCbfList,eqbEmpower} from "@/api/sunVillage_info/sysCbf";
  import FieldSelect from "@/components/form/FieldSelect";
  import Cookies from "js-cookie";
  import $ from "jquery";
  export default {
    name: "certificateList",
    components: {FieldSelect},
    data() {
      return {
        form:{},
        showForm2:false,
        showesign:false,
        sqbutShow:false,
        sysFarmer:JSON.parse(Cookies.get('user')),
        zjlxName:"",
        cbfTypeName:"",
        surveyStatusName:"",
        isDepositName:"",
        height:0,
        options: {
          cert_type: [],
        },
        //电子签名
        signature: {
          lineWidth: 6, // 画笔的线条粗细
          lineColor: "#000000", // 画笔的颜色
          bgColor: "", // 画布的背景颜色
          resultImg: "", // 最终画布生成的base64图片
          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        },
      };
    },
    created() {
      this.getSysCfb();
    },
    methods: {
      InitOptions() {
        for(let k in this.options)
        {
          this.getDicts(k).then((resp) => this.options[k] = resp.data);
        }
      },
      /*承包方授权*/
      cbfsq(){
        console.info(3333333333);
        eqbEmpower(this.form).then(response => {
          if(response.code === 200 ){
            this.sqbutShow = false;
          }
        });
      },
      getSysCfb(){
        getCbfList({deptId:this.sysFarmer.deptId,cbfzjhm:this.sysFarmer.idcard}).then(response => {
          this.sqbutShow = true;
          let _this = this;
          if(response.rows.length > 0){
            this.form = response.rows[0];
            if(this.form.accountId != null && this.form.accountId !== ""){
              this.sqbutShow = false;
            }
            this.getDicts("zjlx").then(response => {
              response.data.forEach(function (item) {
                if (item.dictValue ===  _this.form.cbfzjlx) {
                  _this.zjlxName = item.dictLabel;
                }
              })
            });
            this.getDicts("cbf_type").then(response => {
              response.data.forEach(function (item) {
                if (item.dictValue ===  _this.form.cbflx) {
                  _this.cbfTypeName = item.dictLabel;
                }
              })
            });
            this.getDicts("confirmed_survey_status").then(response => {
              response.data.forEach(function (item) {
                if (item.dictValue ===  _this.form.surveyStatus) {
                  _this.surveyStatusName = item.dictLabel;
                }
              })
            });
            this.getDicts("sys_yes_no").then(response => {
              response.data.forEach(function (item) {
                if (item.dictValue ===  _this.form.isDeposit) {
                  _this.isDepositName = item.dictLabel;
                }
              })
            });
          }

        });
      },
    },
  }
</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;
  }
  .textarea{
  /deep/ .van-field__value{
    background-color: #ffffff;
    border-radius: 10PX;
  }
  /deep/ .van-field__control{
    padding: 12PX;
    color: #666666;
  }
  }
  /deep/ .van-field__value{
    background-color: transparent;
    border-radius: 10PX;
  }
  /deep/ .van-field__control{
    padding: 0PX;
    color: #ffffff;
  }
  /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%;
  }
  }
  .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;
  }
  }
  .bottomImg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50vw;
    transform: translate(-50%,10%);
  }
</style>
