<!--
 * @Author: your name
 * @Date: 2019-09-29 10:02:11
 * @LastEditTime : 2019-12-26 12:08:25
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 -->
<template>
  <h-view id="contract-details" class="public-style">
    <div v-show="isshow" class="all">
      <div class="prompt">
        <div class="top">
          <div>
            <img src="@/assets/constractSigning/prompt.png" alt >
            <span>提示</span>
          </div>
          <div>请前往【农行代扣授权书】界面完成银行卡信息录入！</div>
        </div>
        <div class="bottom" @click="isshow = !isshow">我知道了</div>
      </div>
    </div>
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
        <span>合同详情</span>
      </div>
    </h-header>
    <div
      v-if="!isConfirm && con_confirm_status !== 'APPROVED' && auth_credit_flag !=='Y' && credit_status !== 'N'"
      v-once
      class="myModal"
    >
      <div class="box">
        <span class="title-box">征信授权书</span>
        <div class="content-box">
          <div>江苏徐工工程机械租赁有限公司：</div>
          <p>本人/本单位拟向贵公司办理融资租赁业务，贵公司需要了解本人/本单位、本人配偶/本单位法定代表人以及担保人的信用记录，用于审核融资租赁申请条件、贷后管理及风险控制，因此，相关人员特做出以下授权并清楚理解其含义：</p>
          <p>（一）同意授权贵公司通过中国人民银行或者第三方机构查询、打印、保存、使用征信信息；</p>
          <p>（二）同意授权贵公司向中国人民银行或者第三方机构提供、报送、上传因本业务产生的全部信息；</p>
          <p>（三）同意授权中国人民银行或者第三方机构向有关机构采集的个人信息，可依法整理、保存、加工、使用、提供，并出具信用报告；</p>
          <p>（四）以上授权的期限为作出本授权承诺之日起至在贵公司办理或涉及的所有业务或事项终结之日止，且在业务存续期间可多次查询。若在贵公司处办理或涉及的业务未获批准，同意贵公司继续保留此查询授权书原件和身份证件复印件或影印件。</p>
          <p>特别提示：</p>
          <p>为了保障您的合法权益，您应当阅读并遵守本授权书。请您务必审慎阅读，并充分理解本授权书的全部内容，特别是以加粗形式提示您注意的。若您不接受本授权书的任何条款，请您立即停止授权。</p>
          <p>特别声明：</p>
          <p>本授权书经接受后即时生效，且效力具有独立性，不因相关业务合同或条款无效或被撤销而无效或失效，本授权一经做出，便不可撤销。</p>
          <p>授权人已知悉本授权书全部内容（特别是加粗字体内容）的含义及因此产生的法律效力，自愿作出以上授权。本授权书是授权人真实意思表示，授权人同意承担由此带来的一切法律后果。</p>
          <div>授权人(承租人)：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;&nbsp;日期：</div>
          <div>法定代表人/负责人：&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;日期：</div>
          <div>授权人(承租人配偶)：&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;日期：</div>
          <div>授权人(担保人)：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;&nbsp;日期：</div>
          <div>法定代表人/负责人：&nbsp;&nbsp;&nbsp;&nbsp;身份证号：&nbsp;&nbsp;&nbsp;日期：</div>
          <p class="font-blod">注：1.承租人、担保人为法人或者其他机构的，法定代表人或负责人需签名</p>
          <p class="font-blod sec">2.承租人为自然人且已婚的，配偶双方共同签名</p>
        </div>
        <div class="confirm">
          <input type="checkbox" @click="select" >
          <span>我本人已阅读本协议，并同意授权xxxx</span>
        </div>
        <button class="appro" @click="confirm">同意</button>
      </div>
    </div>
    <div class="tab-style">
      <div :class="{'done':num === 0,'undone':num !== 0}" @click="num = 0;">
        <img :src="num === 0?check1:uncheck1" >基本信息
      </div>
      <div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;">
        <img :src="num === 1?check3:uncheck3" >租赁信息
      </div>
      <div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;">
        <img :src="num === 2?check2:uncheck2" >合同文本
      </div>
    </div>
    <h-content v-if="num === 0" class="business-condition">
      <!-- 法人信息 -->
      <LegalPerson v-if="bp_flag" :baseInfo="baseInfo" />

      <!-- 个人信息（自然人） -->
      <Personal v-if="!bp_flag" :baseInfo="baseInfo" />

      <div class="equipment-list">
        担保人信息
        <span v-if="guarantorInfo.length === 0">(无)</span>
      </div>
      <list-item v-if="guarantorInfo.length" :item-height="76">
        <item v-for="(item,index) in guarantorInfo" :key="index">
          <div slot="name">
            <span class="name-box">{{ index+1 }}</span>
            <span class="name">担保人{{ index+1 }}姓名</span>
            <span class="card-num">证件号</span>
          </div>
          <div slot="content" class="right">
            <img src="@/assets/intoApproval/introduce.png" >
            <span :title="item.bp_name">{{ item.bp_name }}</span>
            <br >
            <span>{{ item.bp_class==='NP'? item.id_card_no: item.organization_code }}</span>
          </div>
        </item>
      </list-item>
      <div class="alert">
        <div class="alert-content">
          <div class="title">
            <img src="@/assets/intoApproval/info.png" >
            <span class="info-word">温馨提示</span>
          </div>
          <p class="top-info">绑定成功后，您即可使用APP中合同查询、还款查询等功能。</p>
          <div class="top-word">
            <p>本人保证所提供信息的真实性、完整性及准确性。</p>
            <p>本人在此授权徐工融资租赁有限公司通过中国人民银行个人信用信息基础数据库及其他征信机构、金融机构查询本人的个人信息、信用记录和工作情况。</p>
            <p>本人同意接收来自于徐工融资租赁有限公司或第三方发出的提醒付款、确认付款、催款等短信(不含广告),同意接收来自于徐工融资租赁有限公司的录音电话,并积极配合。</p>
          </div>
        </div>
        <!-- <div v-if="tabNum === 1" class="bodyCheck">
          <button @click="iFram">iFram</button>
        </div>-->
        <!-- <div v-if="tabNum === 1" class="sign-elect">
           <button @click="goElectronicSign">电子签</button>
        </div>-->
      </div>
    </h-content>
    <h-content v-if="num === 2">
      <list-item :item-height="56" class="contract-text" style="background-color:rgb(250,250,250);">
        <item v-for="(item,index) in attachArray" :proportion="[7,1]" :key="index">
          <div slot="name" class="aguremrnt-list">
            <img src="@/assets/constractSigning/npack.png" alt class="pics" >
            <p class="second first">{{ item.attachment_file }}</p>
            <img v-if="item.read_status === 'N'" class="unread" src="@/assets/constractSigning/unread.png" >
            <img v-if="item.read_status === 'Y'" class="unread" src="@/assets/constractSigning/read.png" >
          </div>
          <div slot="content" class="in-detail" @click="goContent(item)">
            <img src="@/assets/constractSigning/detail.png" alt >
          </div>
        </item>
      </list-item>
    </h-content>
    <h-content v-if="num === 1">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">商务政策</div>
          <input slot="content" v-model="info.product_plan_id_n" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">设备总价</div>
          <span slot="content">{{ info.equip_price * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">融资金额</div>
          <span slot="content">{{ info.finance_amount * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">首付款</div>
          <span slot="content">{{ info.down_payment * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保证金比例</div>
          <span slot="content">{{ info.deposit_ratio_n }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保证金</div>
          <span slot="content">{{ info.deposit * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">手续费比例</div>
          <input slot="content" v-model="info.lease_charge_ratio_n" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">手续费</div>
          <span
            slot="content"
          >{{ parseFloat(info.lease_charge * info.product_num).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">保险押金</div>
          <span slot="content">{{ info.insurance_fee * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">GPS费用</div>
          <span slot="content">{{ info.gps_fee * info.product_num | currency }}</span>
        </item>
        <item>
          <div slot="name">首次付款合计</div>
          <span slot="content">{{ parseFloat(info.first_pay).toFixed(2) | currency }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">预计付款日</div>
          <span slot="content">{{ dateConverse(info.lease_start_date) }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">还款周期</div>
          <input slot="content" v-model="info.annual_pay_times_n" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">租赁期数</div>
          <input slot="content" v-model="info.lease_times" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">年利率</div>
          <input slot="content" v-model="info.int_rate_n" readonly >
        </item>
      </list-item>
      <div class="repay-plan">
        <p @click="repayPlan">查看还款计划</p>
      </div>
      <div class="equipment-list-fund">
        <span />
        <p>设备清单</p>
      </div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">设备识别号</div>
          <input slot="content" v-model="info.product_code" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">产品名称</div>
          <input slot="content" v-model="info.product_name" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">产品数量</div>
          <input slot="content" v-model="info.product_num" readonly >
        </item>
      </list-item>
      <div class="alert alert-fund">
        <div class="alert-content">
          <div class="title">
            <img src="@/assets/intoApproval/info.png" >
            <span class="info-word">提示</span>
          </div>
          <p class="top-info">
            绑定成功后，您即可使用APP中合同查询、还款查询等功能。
            <span>为了确保您的权益，请查看全部</span>
          </p>
        </div>
      </div>
    </h-content>
    <bottom-tab v-if="con_confirm_status!=='APPROVED'" class="add-box">
      <tab-button class="before" @click.native="takePhonto">
        <img src="@/assets/constractSigning/certification.png" >认证
      </tab-button>
      <tab-button class="next" @click.native="inSure">
        <img src="@/assets/intoApproval/approve.png" >审批
      </tab-button>
    </bottom-tab>
    <h-modal
      v-if="con_confirm_status!=='APPROVED'"
      ref="modal"
      v-model="showModalValue"
      position="bottom"
      cus-class="sign-modal"
    >
      <h-view>
        <h-content class="approveContent">
          <div class="approveBottom">
            <span>
              审批意见
              <img src="@/assets/intoApproval/close1.png" @click="showModalValue=false" >
            </span>
            <textarea v-model="confirm_note" cols="8" rows="20" placeholder="请输入" />
          </div>
        </h-content>
        <bottom-tab>
          <tab-button class="reject" @click.native="showModalValue=true;charge('拒绝','REJECTED')">
            <img src="@/assets/intoApproval/reject.png" >拒绝
          </tab-button>
          <tab-button class="same" @click.native="showModalValue=true;charge('同意','APPROVED')">
            <img src="@/assets/intoApproval/approve.png" >同意
          </tab-button>
        </bottom-tab>
      </h-view>
    </h-modal>
    <!--活体检测-->
    <body-check ref="body" :check_id="$route.params.check_id" :confirm_id="confirm_id" />
  </h-view>
</template>

<script>
import Check1 from '@/assets/constractSigning/business.png'
import Check2 from '@/assets/constractSigning/constract.png'
import Check3 from '@/assets/constractSigning/lease.png'
import unCheck1 from '@/assets/constractSigning/unbusiness.png'
import unCheck2 from '@/assets/constractSigning/unconstract.png'
import unCheck3 from '@/assets/constractSigning/unLease.png'
import LegalPerson from '@/pages/distributorSign/legal-person'
import Personal from '@/pages/distributorSign/personal'
import bodyCheck from './body-check'
export default {
  name: 'ContractDetail',
  components: {
    Personal,
    LegalPerson,
    bodyCheck,
  },
  data () {
    return {
      isshow: false, // 提示框的显示与隐藏
      bp_flag: false, // 判断自然人和法人
      num: 0,
      tabNum: null,
      bp_name: '',
      read_status: 'N',
      showModalValue: false,
      credit_status: 'N', // 一个月内是否查过征信 N查过
      guarantorInfo: [], // 担保人信息
      attachArray: [], // 附件数组
      bp_class: this.$route.params.item.bp_class, // 承租人性质(自然人，企业)
      info: {}, // 租赁信息
      baseInfo: {}, // 基本信息
      project_id: '',
      bank_flag: false,
      isConfirm: false, // 征信授权书状态
      confirm_id: '',
      conditionInfo: {},
      check1: Check1,
      confirm_note: '',
      user_bp_type: '', // 客户类型
      ischecked: false,
      check2: Check2,
      check3: Check3,
      uncheck1: unCheck1,
      uncheck2: unCheck2,
      uncheck3: unCheck3,
      con_confirm_status: '',
      entry_info_flag: false,
      faceListUpload: [], // 自拍照上传
      conLists: [],
      auth_credit_flag: 'N', // 征信授权书确认状态
      readed: require('@/assets/constractSigning/read.png'), // 已读
      unRead: require('@/assets/constractSigning/unread.png'), // 未读
      leasePic: '', // 租赁合同图片
      agentPic: '', // 经销商担保协议图片
      bankPic: '', // 农行代扣授权书图片
      legalPic: '', // 法人授权书图片
      abc_deduction_flag: 'N', // 代扣授权书状态
      signCheckFlag: false, // 签约校验，为true已认证通过可进行签约，否则不可签约
    }
  },
  computed: {},

  watch: {
    $route (to, from) {
      hlsPopup.hideConfirm()
    },
    ischecked: function (newVal, oldVal) {
      let appro = document.querySelector('.appro') // 同意按钮
      if (newVal) {
        appro.style.backgroundColor = '#00469c'
      } else {
        appro.style.backgroundColor = 'rgba(56, 63, 69, 0.5)'
      }
    },
    bp_class () {
      if (this.bp_class === 'NP') {
        this.bp_flag = false
        // this.getBseMsg()
      } else {
        this.bp_flag = true
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'ContractSigning') {
        vm.bank_flag = false
        vm.isConfirm = false
        vm.ischecked = false
        vm.showModalValue = false
        vm.signCheckFlag = false
        vm.tabNum = vm.$route.params.num
        vm.confirm_note = '' // 审批意见
        vm.num = 0 // 进入详情显示基本信息
        vm.bp_name = vm.$route.params.item.bp_name
        vm.user_bp_type = vm.$route.params.user_bp_type
        vm.auth_credit_flag = vm.$route.params.item.auth_credit_flag // 征信授权书确认状态
        vm.abc_deduction_flag = vm.$route.params.item.abc_deduction_flag
        vm.project_id = vm.$route.params.item.project_id
        vm.confirm_id = vm.$route.params.item.confirm_id
        vm.con_confirm_status = vm.$route.params.item.confirm_status // 提交状态
        vm.agentPic = vm.unRead
        vm.leasePic = vm.unRead
        if (vm.$route.params.item.bp_class === 'NP') {
          vm.bp_flag = false
        } else {
          vm.bp_flag = true
        }
        // vm.conditionQuery()
        vm.bankCardQuery()
        vm.getBseMsg()
        vm.getLease()
        vm.getGuarantor()
        // vm.getContractLists() // 合同列表
        // 合同文本附件查询
        vm.getAttachment()
      } else if (from.name === 'EntryInfo') {
        vm.bankCardQuery()
      }
    })
  },
  activated () {
    // this.bankCardQuery()
  },
  mounted () {
    if (this.con_confirm_status !== 'APPROVED') {
      // this.popProtocol()
    }
  },
  /*  beforeRoutrLeave (to, from, next) {
    next(vm => {
      consoloe.log('&&&&&&&&&&&&&&')
      hlsPopup.hideConfirm()
    })
  },
  destroyed () {
    consoloe.log('&&&&&&&&&&&&&&')
    hlsPopup.hideConfirm()
  }, */
  methods: {
    // 签约校验
    async signCheck () {
      let vm = this
      hlsPopup.showLoading('请稍候')
      let url = process.env.basePath + 'sign_check'
      let param = {
        confirm_id: vm.confirm_id,
        data_class: 'PRJ_PROJECT',
      }
      let res = await vm.hlsHttp.post(url, param)
      hlsPopup.hideLoading()
      if (res.result === 'S') {
        return true
      } else {
        // vm.hlsPopup.showLongCenter(res.message)
      }
    },
    goContent (item) {
      // 详情
      // window.open(url)
      // cordova.InAppBrowser.open(url, '_self', 'location=yes')
      cordova.ThemeableBrowser.open(item.attachment_file_path, '_blank', {})
      // 合同状态更新保存
      let vm = this
      let url = process.env.basePath + 'prj_content_status_save'
      let param = {
        parameter: {
          master: {
            content_id: item.content_id,
            auth_credit_flag: 'Y',
          },
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 合同文本详情附件查询
    getAttachment () {
      let vm = this
      let url = process.env.basePath + 'get_content_app'
      let param = {
        confirm_id: vm.confirm_id,
        data_class: 'PRJ_PREVIEW',
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.attachArray = res.attachments
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 征信查询
    creditCheck () {
      let vm = this
      let url = process.env.basePath + 'bp_credit_check'
      let param = {
        bp_class: vm.baseInfo.bp_class,
        bp_id: vm.baseInfo.bp_id,
      }
      vm.hlsPopup.showLoading('请稍后!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.credit_status = res.info.credit_status // N查过征信， Y未查过
        } else {
          vm.hlsPopup.showLongCenter(res.info.msg)
        }
      })
    },
    goBodyCheck (confirm_id) {
      // 活体检测
      this.$refs.body.show()
      /* this.$router.push({
        name: 'BodyCheck',
        params: {
          check_id: this.$route.params.check_id,
          confirm_id: confirm_id,
        },
      }) */
    },
    /* goElectronicSign () { // 电子签
       let vm = this
       let url = process.env.basePath + 'get_sign_url'
       let param = {
         confirm_id: vm.confirm_id,
         data_class: 'PRJ_PROJECT',
       }
       vm.hlsPopup.showLoading('请稍后')
       vm.hlsHttp.post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         if (res.info.msg === 'success') {
          /!* vm.$router.push({
             name: 'ElectronicSign',
             params: {
               url: res.info.data.url,
             },
           })*!/
           cordova.InAppBrowser.open(res.info.data.url, '_blank', 'location=yes')
         } else {
           vm.hlsPopup.showLongCenter(res.info.msg)
         }
       })
     }, */
    charge (val, status) {
      let vm = this
      this.hlsPopup.showConfirm({
        title: '提示',
        content: `您确认${val}吗？`,
        onConfirm: data => {
          if (data) {
            // 需要先校验是否认证通过
            vm.doConfirm(status)
          }
        },
      })
    },
    takePhonto () {
      let vm = this
      hlsPopup.showConfirm({
        title: '提示',
        content: '请自拍一张',
        onConfirm: function (index) {
          if (index === 1) {
            vm.takePhontoOpenCamera()
          } else {
          }
        },
      })
    },
    // 打开相机自拍
    takePhontoOpenCamera () {
      let vm = this
      vm.faceListUpload = []
      let obj = {
        pkvalue: vm.$route.params.check_id,
        source_type: 'PRJ_CDD_ITEM_CHECK',
        picture: '',
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: 'face',
      }
      let cameraoptions = {
        quality: 100,
        cameraDirection: 1,
      }
      let success = function (imgdata) {
        obj.filePath = imgdata
        // obj.filePath = 'http://hlsapp.hand-china.com/file/XCMG/2.jpg'
        vm.confirmContractSign(imgdata)
        vm.faceListUpload.push(obj)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
      // this.confirmContractSign('', status)
    },
    // 执行同意的逻辑(查询对应的身份证正面图片->人脸识别->活体检测)
    async confirmContractSign (faceImg) {
      let idCardImgUrl = await this.idCardImgUrlGet()
      if (idCardImgUrl) {
        this.faceIdentify(faceImg, idCardImgUrl)
      }
    },
    // 获取身份证照片
    async idCardImgUrlGet () {
      let vm = this
      let url = $config.basePath + 'prj_id_card_query'
      let param = {
        confirm_id: vm.confirm_id,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      hlsPopup.hideLoading()
      if (res.result === 'S' && res.info) {
        let cardUrl =
          process.env.filePath +
          'attachment_id=' +
          res.info.attachment_id +
          '&access_token=' +
          window.localStorage.access_token
        return cardUrl
      } else if (res.result === 'S' && !res.info) {
        hlsPopup.showLongCenter('未找到身份证照片')
        return null
      } else {
        hlsPopup.showLongCenter(res.message)
        return null
      }
    },
    // 人脸比对
    faceIdentify (faceImg, idCardImgUrl) {
      let vm = this
      let obj = {
        fileUrl: faceImg,
        idCardImgUrl: idCardImgUrl,
      }
      hlsPopup.showLoading('正在比对')
      let url = process.env.ocrPath + '/baidu/ocr/face'
      hlsUtil.baiduOcrFace(obj, url, function (res) {
        hlsPopup.hideLoading()
        if (res.success) {
          vm.save_picture(vm.faceListUpload)
          let identifyScore = res.result.result.score.toFixed(0)
          hlsPopup.showPopup({
            title: '提示',
            content: `识别分数为${identifyScore},请进行活体检测`,
            onConfirm: () => {
              // 进入活体检测页面
              vm.goBodyCheck(vm.confirm_id)
            },
          })
        } else {
          hlsPopup.showLongCenter('比对失败,请保证和绑定时是同一个人')
        }
      })
      /* vm.save_picture(vm.faceListUpload)
      let identifyScore = 90
      hlsPopup.showPopup({
        title: '提示',
        content: `识别分数为${identifyScore},请进行活体检测`,
        onConfirm: () => {
          // 进入活体检测页面
          vm.goBodyCheck(vm.confirm_id)
        },
      }) */
    },
    // 确认签约逻辑
    doConfirm (status) {
      let vm = this
      let url = process.env.basePath + 'do_confrim_bp'
      let param = {
        master: {
          confirm_id: vm.confirm_id,
          confirm_status: status,
          confirm_note: this.confirm_note,
        },
      }
      vm.hlsPopup.showLoading('提交数据中!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('审批成功')
          window.localStorage.setItem('backFlag', true)
          vm.$routeGo()
        } else {
          vm.hlsPopup.showSuccess(res.message)
        }
      })
    },
    // 图片保存
    save_picture (list) {
      // alert('list' + JSON.stringify(list))
      let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            /* hlsPopup.hideLoading()
              hlsPopup.showLongCenter('图片上传成功') */
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  vm.faceListUpload.push(list[j])
                  // alert('faceListUpload' + JSON.stringify(vm.faceListUpload))
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // popProtocol () {
    //   let modal = document.querySelector('.myModal')
    //   let alpha = 0
    //   let addOpacity = setInterval(() => {
    //     alpha += 1
    //     modal.style.backgroundColor = `rgba(56,63,69,${alpha / 100})`
    //     if (alpha >= 30) {
    //       clearInterval(addOpacity)
    //     }
    //   }, 10)
    // },
    // 授权书勾选
    select () {
      this.ischecked = !this.ischecked
    },
    // 授权书同意
    confirm () {
      this.ischecked ? (this.isConfirm = true) : (this.isConfirm = false)
      let vm = this
      let url = $config.basePath + 'prj_auth_credit_upd'
      let param = {
        master: {
          confirm_id: vm.confirm_id,
          auth_credit_flag: 'Y',
        },
      }
      vm.hlsPopup.showLoading('请稍后')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
        }
      })
    },
    // 担保人
    getGuarantor () {
      let vm = this
      let url = $config.basePath + 'prj_guarantor_list_query'
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.guarantorInfo = res.lists
        }
      })
    },
    dateConverse (date) {
      return date.replace(/\//g, '-')
    },
    // 租赁信息
    getLease () {
      let vm = this
      let url = $config.basePath + 'prj_lease_query'
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.info = res.info
        }
      })
    },
    // 基本信息
    getBseMsg () {
      let vm = this
      let url = ''
      let url1 = $config.basePath + 'prj_np_info_query'
      let url2 = $config.basePath + 'prj_org_info_query'
      vm.$route.params.item.bp_class === 'NP' ? (url = url1) : (url = url2)
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          //  vm.lists = res.lists
          vm.baseInfo = res.info
          if (res.info.auth_flag) {
            window.localStorage.setItem('auth_flag', res.info.auth_flag)
          }
          vm.creditCheck()
        }
      })
    },
    // 合同列表查询
    getContractLists () {
      let vm = this
      let url = $config.basePath + 'prj_contract_text_query'
      let param = {
        project_id: vm.project_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('合同列表', res)
        if (res.result === 'S') {
          vm.conLists = res.lists
        }
      })
    },
    // 还款计划
    repayPlan () {
      this.$router.push({
        name: 'ContractRepayPlan',
        params: {
          project_id: this.project_id,
          product_num: this.info.product_num,
        },
      })
    },
    // 跳转合同详情
    goContractContent (name) {
      this.$router.push({
        name: 'ContractContent',
        params: {
          name,
          business_type: this.baseInfo.business_type,
        },
      })
      if (name === '经销商担保协议') {
        setTimeout(() => {
          this.agentPic = this.readed
        }, 1000)
      } else if (name === '租赁主合同') {
        setTimeout(() => {
          this.leasePic = this.readed
        }, 1000)
      }
    },
    // 跳转银行信息录入
    entryInfo () {
      let idCard = ''
      if (this.baseInfo.auth_flag) {
        this.baseInfo.auth_flag === '是'
          ? (idCard = this.baseInfo.auth_person_id_card)
          : this.baseInfo.id_card_no
        console.log(',,,,,,,,,,,', idCard)
      } else {
        idCard = this.baseInfo.id_card_no
      }
      this.$router.push({
        name: 'EntryInfo',
        params: {
          id_card_no: idCard,
          bp_name: this.bp_name,
          project_id: this.project_id,
          confirm_status: this.con_confirm_status,
          entry_info_flag: this.entry_info_flag,
          user_bp_type: this.user_bp_type,
          bp_id: this.baseInfo.bp_id,
        },
      })
    },
    async inSure () {
      let flag = await this.signCheck()
      if (flag) {
        // 只有认证通过后方可进行签约操作
        if (!this.bank_flag && this.abc_deduction_flag === 'Y') {
          this.isshow = true // 未查到农行卡给出提示且勾选农行代扣
        } else {
          this.showModalValue = true // 审批内容框显示
        }
      }
    },

    // 银行卡查询
    bankCardQuery () {
      let vm = this
      let url = $config.basePath + 'con_bank_query'
      let param = {
        project_id: vm.project_id,
        bp_id: vm.baseInfo.bp_id,
      }
      // vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log(res)
          console.log(res.info.bank_full_name === ' ')
          if (res.info.bank_full_name === ' ') {
            vm.bank_flag = false
            vm.bankPic = vm.unRead
          } else {
            vm.bank_flag = true
            vm.bankPic = vm.readed
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" rel="stylesheet">
#contract-details {
  .sign-elect {
    width: 100%;
    height: 1.1rem;
    position: fixed;
    bottom: 43px;
    // margin-top: 20px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      width: 7.172rem;
      height: 0.88rem;
      background: #1d3fff;
      border-radius: 0.08rem;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 0.3rem;
      line-height: 0.4rem;
      letter-spacing: 0.2rem;
    }
  }
  .bodyCheck {
    width: 100%;
    height: 1.1rem;
    position: fixed;
    bottom: 92px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
      width: 7.172rem;
      height: 0.88rem;
      background: #1d3fff;
      border-radius: 0.08rem;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 0.3rem;
      line-height: 0.88rem;
      letter-spacing: 0.2rem;
    }
  }
  .footer-button {
    .approve {
      width: 358.6px;
      height: 44px;
      background: @headerColor;
      border-radius: 4px;
      color: #fff;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      line-height: 20px;
      letter-spacing: 10px;
      img {
        width: 16.8px;
        height: 16.8px;
      }
    }
  }
  .name-box {
    display: inline-block;
    text-align: center;
    line-height: 16px;
    color: #00469c;
    width: 16px;
    height: 16px;
    background: #cddbec;
    border-radius: 4px;
  }
  .name {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #383f45;
    letter-spacing: 0;
    margin-left: 10px;
  }
  .card-num {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #383f45;
    letter-spacing: 0;
    display: block;
    margin-left: 31px;
    margin-top: 7px;
  }
  .right {
    position: relative;
  }
  .right span {
    float: right;
    margin-right: 48px;
    display: block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(56, 63, 69, 0.6);
    letter-spacing: 0;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
    margin-top: -10px;
    text-align: right;
  }
  .right span:last-child {
    margin-top: 7px;
  }
  .right img {
    position: absolute;
    top: 30%;
    left: 88%;
    width: 14px;
    height: 16px;
  }
  .alert {
    padding-bottom: 30px;
    width: 100%;
    //margin-top: -10px;
    background: #fbf2d2;
  }
  .alert-fund {
    margin-top: -10px;
  }
  .alert-content {
    width: 334px;
    margin: 0 auto;
    padding-top: 16px;
  }

  .info-word {
    font-family: PingFangSC-Semibold;
    font-size: 14px;
    color: #fcc800;
    letter-spacing: 0.5px;
    margin-left: 8px;
  }

  .title {
    display: flex;
    align-items: center;
  }
  .top-word {
    p {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #656464;
      letter-spacing: 0.37px;
      margin-top: 7px;
      line-height: 15px;
      text-indent: 16px;
      position: relative;
    }
    p::before {
      content: "";
      display: block;
      position: absolute;
      top: 5px;
      left: 0px;
      width: 4px;
      height: 4px;
      border-radius: 20px;
      background-color: #fcc800;
    }
  }
  .top-info {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #656464;
    letter-spacing: 0.37px;
    margin-top: 7px;
    line-height: 15px;

    span {
      color: #fcc800;
    }
  }

  .alert img {
    width: 18px;
    height: 18px;
  }
  .font-color {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #656464;
    letter-spacing: 0;
  }
  .repay-plan {
    height: 44px;
    width: 100%;
    margin-top: -10px;
    background: #f2f2f2;
    p {
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #00469c;
      letter-spacing: 0;
      height: 44px;
      width: 84px;
      line-height: 44px;
      font-weight: bold;
      text-decoration: underline;
      margin-left: 16px;
    }
  }
  .equipment-list-fund {
    height: 40px;
    line-height: 40px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    color: #00469c;
    font-size: 15px;
    //margin-left: 16px;
    position: relative;
    //margin-top: -10px;
    span {
      width: 4px;
      height: 20px;
      background: #00469c;
    }
    p {
      padding-left: 10px;
    }
  }
  .all {
    position: absolute;
    background-color: transparent;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;

    .prompt {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -75px;
      margin-left: -121px;
      background-color: #fff;
      box-shadow: 0 1px 2px 1px rgba(128, 128, 128, 0.1);
      border-radius: 4px;
      width: 242px;
      height: 150px;

      .top {
        height: 105px;
        border-bottom: 1px solid #f1f0f5;

        div:first-child {
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #e50020;
          letter-spacing: 0.5px;
          font-weight: 700;
          margin-top: 13px;

          img {
            width: 18px;
            line-height: 12px;
            display: block;
            margin: -3px 5px 0 40%;
            float: left;
          }
        }

        div:nth-child(2) {
          margin-top: 22px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #383f45;
          letter-spacing: 0.4px;
          padding: 0 22px;
          line-height: 20px;
        }
      }

      .bottom {
        text-align: center;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #00469c;
        line-height: 32px;
      }
    }
  }

  .tab-style {
    display: flex;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 8px;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.5);

    div {
      display: block;
      height: 32px;
      width: 172px;
      border-radius: 16px;
      border-radius: 16px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      letter-spacing: 0.43px;
      margin: 0 4px;
      line-height: 32px;
    }
    .undone {
      background: rgba(220, 220, 221, 0.26);
      color: #383f45;
    }
    .done {
      background: rgba(0, 70, 156, 0.1);
      color: #00469c;
    }

    img {
      width: 16px;
      display: block;
      float: left;
      margin: 8px 5px 0 20px;
    }

    span:nth-of-type(2) {
      margin-left: 7px;
    }
  }

  .content {
    height: 87%;

    .contract-text {
      .border-red {
        border: 2px solid rgba(255, 0, 0, 0.4);
      }

      .hls-item {
        margin-top: 8px;
        background-color: #fff;
      }

      .contents {
        padding: 0;
      }

      .in-detail {
        background-color: rgba(0, 70, 156, 0.08);
        width: 48px;
        height: 56px;
        text-align: center;
        line-height: 65px;

        img {
          width: 16px;
        }
      }

      .in-all {
        //width: 96px;
        display: flex;

        img {
          width: 16px;
        }

        div {
          width: 48px;
          height: 56px;
          text-align: center;
          line-height: 65px;
        }

        div:first-child {
          background-color: rgba(252, 200, 0, 0.1);
        }

        div:nth-child(2) {
          background-color: rgba(0, 70, 156, 0.08);
        }
      }
    }
  }

  .business-condition {
    .equipment-list {
      height: 40px;
      line-height: 40px;
      background-color: #fafafa;
      color: #00469c;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }

    .equipment-list::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      position: absolute;
      left: -15px;
      top: 10px;
    }

    div {
      font-family: PingFangSC-Regular;
      color: #656464;
      letter-spacing: 0;
    }

    section {
      font-family: PingFangSC-Regular;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
    }
  }

  .aguremrnt-list {
    display: flex;
    flex-direction: row;
    .unread{
      width:34px;
      height: 20PX;
      margin:8px 0 0 4px;
    }
    .pic {
      margin-left: -3px;
    }

    .pics {
      //    width: 21px;
      height: 30px;
    }

    .read {
      height: 16px;
      margin-top: 8px;
      margin-left: 6px;
    }

    .second {
      height: 32px;
      line-height: 32px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      margin-left: 16px;
      color: #383f45;
      letter-spacing: 0.43px;
    }

    .first {
      margin-left: 13px;
    }
  }

  .myModal {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      position: relative;
      width: 301px;
      height: 467px;
      background: url("../../assets/intoApproval/top.png") no-repeat;
      background-size: 301px 24.7px;
      background-color: #fff;
      button {
        width: 240px;
        height: 40px;
        position: absolute;
        color: #fff;
        bottom: 16px;
        left: 30.5px;
        background-color: rgba(56, 63, 69, 0.5);
      }
      .title-box {
        width: 100%;
        display: block;
        text-align: center;
        margin-top: 37px;
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #00469c;
      }
      .content-box {
        width: 240px;
        height: 280px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #383f45;
        margin: 0 auto;
        margin-top: 12px;
        overflow-y: scroll;
        div {
          height: 20px;
          line-height: 20px;
        }
        p {
          text-indent: 22px;
          line-height: 16px;
          margin-top: 6px;
        }
        .font-blod {
          font-weight: bold;
          text-indent: 0;
        }
        .sec {
          text-indent: 22px;
        }
      }
      .confirm {
        width: 240px;
        height: 20px;
        padding-top: 25px;
        margin: 0 auto;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #383f45;
        line-height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        input {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background: none;
        }
        input::before {
          content: "";
          display: block;
          background-image: url("../../assets/intoApproval/top.png");
        }
      }
    }
  }
  .approveContent {
    position: absolute;
    top: 50%;
    background-color: #fafafa;
    overflow-y: scroll;
  }
  .approveBottom {
    width: 343px;
    margin: 0 auto;
    span {
      display: block;
      width: 100%;
      font-family: PingFangSC-Semibold;
      font-size: 15px;
      color: #00469c;
      height: 21px;
      line-height: 21px;
      margin: 16px 0;
      img {
        float: right;
      }
    }
    textarea {
      width: 343px;
      height: 178px;
      border-radius: 2px;
      padding: 10px;
    }
    span::after {
      content: "";
      display: block;
      position: relative;
      left: 70px;
      top: -17px;
      width: 14px;
      height: 14px;
      background: url("../../assets/intoApproval/approv.png");
      background-size: 14px 14px;
    }
  }
  .reject,
  .same {
    width: 175px;
    height: 40px;
    border-radius: 4px;
    font-family: PingFangSC-Semibold;
    font-size: 15px;
    img {
      width: 13px;
      height: 13px;
    }
  }
  .reject {
    color: #656464;
    border: 1px solid #656464;
  }
  .same {
    color: #ffffff;
    background: #00469c;
    border: 1px solid #00469c;
  }
  .add-box {
    .before {
      border: 1px solid #fdb62f;
      border-radius: 4px;
      color: #fdb62f;
      img {
        width: 18px;
      }
    }
    .next {
      background: #1d3fff;
      border-radius: 4px;
      color: #fff;
      img {
        width: 18px;
      }
    }
  }
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>
