<template>
  <h-view id="contract-details" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <div class="top">
            录入产品信息
            <img
              src="@/assets/intoApproval/close.png"
              @click="downNum = false"
            >
          </div>
          <div class="down-content">
            <list-item :item-height="44">
              <item>
                <div slot="name" class="required">产品名称</div>
                <input
                  slot="content"
                  v-model="itemInfo.ref_v02"
                  placeholder="请输入产品名称"
                >
              </item>
              <item>
                <div slot="name" class="required">产品数量</div>
                <input
                  slot="content"
                  v-model="itemInfo.quantity"
                  placeholder="请输入产品数量"
                >
              </item>
            </list-item>
          </div>
          <button @click.native="prjLeaseItemSave">保存</button>
        </div>
      </div>
    </transition>
    <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 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>
    <h-content v-if="num === 0" class="business-condition">
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">业务经办</div>
          <input slot="content" v-model="baseInfo.bp_user_id_n" readonly>
        </item>
      </list-item>
      <div class="equipment-list">承租人信息</div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">公司名称</div>
          <input
            slot="content"
            v-model="baseInfo.bp_name"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectBpTenant"
          >
        </item>
        <item>
          <div slot="name" class="font-color">营业执照号</div>
          <input slot="content" v-model="baseInfo.organization_code">
        </item>
        <item>
          <div slot="name" class="font-color">注册资本</div>
          <input slot="content" v-model="baseInfo.registered_capital" >
        </item>
        <item>
          <div slot="name" class="font-color">注册地址</div>
          <span slot="content">{{ baseInfo.registered_place }}</span>
        </item>
        <item>
          <div slot="name" class="font-color">经营地址</div>
          <input slot="content" v-model="baseInfo.business_address" >
        </item>
        <item>
          <div slot="name" class="font-color">固定电话</div>
          <input slot="content" v-model="baseInfo.phone" >
        </item>
        <item>
          <div slot="name" class="font-color">是否授权</div>
          <input slot="content" v-model="baseInfo.auth_flag" >
        </item>
        <item>
          <div slot="name" class="font-color">是否征信授权</div>
          <input slot="content" v-model="baseInfo.auth_flag" >
        </item>
      </list-item>
      <div class="equipment-list">法定代表人</div>
      <list-item :item-height="44" class="second-part">
        <item>
          <div slot="name" class="font-color">姓名</div>
          <input slot="content" v-model="baseInfo.legal_person" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">证件号</div>
          <input slot="content" v-model="baseInfo.id_card_no" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">手机号码</div>
          <input slot="content" v-model="baseInfo.cell_phone" readonly>
        </item>
        <item>
          <div slot="name" class="font-color">联系地址</div>
          <span slot="content">{{ baseInfo.living_address }}</span>
        </item>
      </list-item>
      <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="equipment-list">
        采矿权许可证
      </div>
      <list-item :item-height="76">
        <div class="house spec">
          <!--待上传图片列表-->
          <div
            v-for="(item, index) in upload_list_mining"
            v-if="item.check_id === miningCheckId"
            :key="index+'info2'"
            class="card-upload"
          >
            <img :src="item.picture" @click="showBigPicture(item.picture)" >
            <div class="close" @click="remove_pic(item.attachment_id,index,'mining')">
              <img src="@/assets/userBind/deleteIcon.png" >
            </div>
          </div>
          <!--特批 从服务器上下载的图片-->
          <div v-for="(pic, index) in dowload_list_mining" :key="index+'mining'">
            <div v-if="pic.check_id==miningCheckId" :key="index+'info3'" class="card-upload">
              <img :src="pic.url" @click="showBigPicture(pic.url)" >
              <div class="close" @click="delete_pic(pic.attachment_id,'mining')">
                <img src="@/assets/userBind/deleteIcon.png" >
              </div>
            </div>
          </div>
          <div class="card-upload plus" @click="ocrShow('采矿权许可证',miningCheckId,'mining')">
            <img src="@/assets/userBind/camera.png" class="upload-btn" >
          </div>
        </div>
      </list-item>
      <div class="equipment-list">
        开票信息
      </div>
      <list-item :item-height="44">
        <item :showArrow="true">
          <div slot="name" class="font-color">纳税人类型</div>
          <input
            slot="content"
            v-model="invoiceInfo.taxpayer_type_n"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectTaxpayer"
          >
        </item>
        <item :showArrow="true">
          <div slot="name" class="font-color">发票类型</div>
          <input
            slot="content"
            v-model="invoiceInfo.invoice_kind_n"
            type="text"
            readonly
            placeholder="请选择"
            @click="selectInvoiceType"
          >
        </item>
        <item>
          <div slot="name" class="font-color">发票抬头</div>
          <input slot="content" v-model="invoiceInfo.invoice_title" type="text" placeholder="请输入发票抬头" >
        </item>
        <item>
          <div slot="name" class="font-color">发票地址</div>
          <textarea
            slot="content" ref="myTestarea" v-model="invoiceInfo.invoice_adds" cols="22"
            rows="1"
            type="text" placeholder="请输入发票地址" @input="addRows(invoiceInfo.invoice_adds)" />
        </item>
        <item>
          <div slot="name" class="font-color">开户电话</div>
          <input slot="content" v-model="invoiceInfo.invoice_tel" type="text" placeholder="请输入开户电话" >
        </item>
        <item>
          <div slot="name" class="font-color">发票开户行</div>
          <textarea
            slot="content"
            ref="myTestareaLive"
            v-model="invoiceInfo.open_bank"
            cols="22"
            rows="1"
            type="text"
            placeholder="请输入发票开户行"
            @input="addRowsLive(invoiceInfo.open_bank)"
          />
        </item>
        <item>
          <div slot="name" class="font-color">开户行账号</div>
          <input slot="content" v-model="invoiceInfo.open_account" type="text" placeholder="请输入开户行账号" >
        </item>
        <item>
          <div slot="name" class="font-color">纳税人识别号</div>
          <input
            slot="content"
            v-model="invoiceInfo.organization_code" placeholder="纳税人识别号" type="text" readonly
          >
        </item>
      </list-item>
      <div class="equipment-list">
        基本账户信息
      </div>
      <list-item :item-height="44">
        <item>
          <div slot="name">账户名称</div>
          <input slot="content" v-model="baseInfo.bank_account_name" placeholder="请输入账户名称">
        </item>
        <item>
          <div slot="name">开户行</div>
          <input
            slot="content"
            v-model="baseInfo.bank_full_name"
            placeholder="请输入开户行"
          >
        </item>
        <item>
          <div slot="name">银行账号</div>
          <input
            slot="content"
            v-model="baseInfo.bank_account_num"
            placeholder="请输入银行账号"
          >
        </item>
        <item>
          <div slot="name">联行号</div>
          <input slot="content" v-model="baseInfo.bank_branch_name" placeholder="请输入联行号">
        </item>
      </list-item>
      <div class="equipment-list">
        联系人信息
      </div>
      <list-item :item-height="44">
        <item>
          <div slot="name">联系人姓名</div>
          <input slot="content" v-model="baseInfo.contact_name" placeholder="请输入联系人姓名">
        </item>
        <item>
          <div slot="name">身份证号码</div>
          <input
            slot="content"
            v-model="baseInfo.contact_card_no"
            placeholder="请输入身份证号码"
          >
        </item>
        <item>
          <div slot="name">联系电话</div>
          <input
            slot="content"
            v-model="baseInfo.contact_tel"
            placeholder="请输入联系电话"
          >
        </item>
        <item>
          <div slot="name">联系地址</div>
          <input slot="content" v-model="baseInfo.contact_adds" placeholder="请输入联系地址">
        </item>
      </list-item>
      <div class="equipment-list">
        财务报表
      </div>
      <list-item :item-height="76">
        <div class="house spec">
          <!--待上传图片列表-->
          <div
            v-for="(item, index) in upload_list_report"
            v-if="item.check_id === reportCheckId"
            :key="index+'info2'"
            class="card-upload"
          >
            <img :src="item.picture" @click="showBigPicture(item.picture)" >
            <div class="close" @click="remove_pic(item.attachment_id,index,'report')">
              <img src="@/assets/userBind/deleteIcon.png" >
            </div>
          </div>
          <!--特批 从服务器上下载的图片-->
          <div v-for="(pic, index) in dowload_list_report" :key="index+'report'">
            <div v-if="pic.check_id==reportCheckId" :key="index+'info3'" class="card-upload">
              <img :src="pic.url" @click="showBigPicture(pic.url)" >
              <div class="close" @click="delete_pic(pic.attachment_id,'report')">
                <img src="@/assets/userBind/deleteIcon.png" >
              </div>
            </div>
          </div>
          <div class="card-upload plus" @click="ocrShow('财务报表',reportCheckId,'report')">
            <img src="@/assets/userBind/camera.png" class="upload-btn" >
          </div>
        </div>
      </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>-->
          <CurrencyInput slot="content" v-model="quotationInfo.equip_price" placeholder="请输入设备总价"/>
        </item>
        <item>
          <div slot="name" class="font-color">融资金额</div>
          <!--          <span slot="content">{{ info.finance_amount * info.product_num | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.finance_amount" placeholder="请输入融资金额"/>
        </item>
        <item>
          <div slot="name" class="font-color">首付款</div>
          <!--          <span slot="content">{{ info.down_payment * info.product_num | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.down_payment" placeholder="请输入首付款"/>
        </item>
        <item>
          <div slot="name" class="font-color">保证金比例</div>
          <!--          <span slot="content">{{ info.deposit_ratio_n }}</span>-->
          <RateInput slot="content" v-model="quotationInfo.deposit_ratio_n" placeholder="请输入保证金比例"/>
        </item>
        <item>
          <div slot="name" class="font-color">保证金</div>
          <!--          <span slot="content">{{ info.deposit * info.product_num | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.deposit" placeholder="请输入保证金"/>
        </item>
        <item>
          <div slot="name" class="font-color">手续费比例</div>
          <!--          <input slot="content" v-model="info.lease_charge_ratio_n" readonly />-->
          <RateInput slot="content" v-model="quotationInfo.lease_charge_ratio_n" placeholder="请输入手续费比例"/>
        </item>
        <item>
          <div slot="name" class="font-color">手续费</div>
          <!--          <span slot="content">{{ parseFloat(info.lease_charge * info.product_num).toFixed(2) | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.lease_charge" placeholder="请输入手续费"/>
        </item>
        <item>
          <div slot="name" class="font-color">保险押金</div>
          <!--          <span slot="content">{{ info.insurance_fee * info.product_num | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.insurance_fee" placeholder="请输入保险押金"/>
        </item>
        <item>
          <div slot="name" class="font-color">GPS费用</div>
          <!--          <span slot="content">{{ info.gps_fee * info.product_num | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.gps_fee" placeholder="请输入GPS费用"/>
        </item>
        <item>
          <div slot="name">首次付款合计</div>
          <!--          <span slot="content">{{ parseFloat(info.first_pay).toFixed(2) | currency }}</span>-->
          <CurrencyInput slot="content" v-model="quotationInfo.first_pay" placeholder="请输入首次付款合计"/>
        </item>
        <!--        <item>-->
        <!--          <div slot="name" class="font-color">预计付款日</div>-->
        <!--          <span slot="content">{{ dateConverse(info.lease_start_date) }}</span>-->
        <!--        </item>-->
        <item :show-arrow="true" @click.native="showTime('YYYY-MM-DD')">
          <div slot="name" class="font-color">预计付款日</div>
          <div slot="content" class="autoColor">{{ quotationInfo.lease_start_date }}</div>
        </item>
        <!--        <item>-->
        <!--          <div slot="name" class="font-color">还款周期</div>-->
        <!--          <input slot="content" v-model="info.annual_pay_times_n" readonly />-->
        <!--        </item>-->
        <item :show-arrow="true" @click.native="periodPull">
          <div slot="name" class="font-color">还款周期</div>
          <span slot="content">{{ quotationInfo.annual_pay_times_n }}</span>
          <!-- <input slot="content" v-model="info.annual_pay_times_n" placeholder="月"> -->
        </item>
        <item>
          <div slot="name" class="font-color">租赁期数</div>
          <!--          <input slot="content" v-model="info.lease_times" readonly />-->
          <input slot="content" v-model="quotationInfo.lease_times" placeholder="请输入租赁期数" type="number">
        </item>
        <item>
          <div slot="name" class="font-color">年利率</div>
          <!-- <span slot="content">{{ info.int_rate_n }}</span> -->
          <RateInput slot="content" v-model="quotationInfo.int_rate_n" placeholder="请输入年利率"/>
        </item>
      </list-item>
      <!--      <div class="repay-plan">-->
      <!--        <p @click="repayPlan">查看还款计划</p>-->
      <!--      </div>-->
      <div class="equipment-list-fund">
        <span />
        <p>设备清单</p>
        <div style="width: 75%;text-align: right;" @click="downNum=true">新增</div>
      </div>
      <list-item v-for="(item, index) in leaseList" :item-height="44" :key="index" 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="item.ref_v02" readonly >
        </item>
        <item>
          <div slot="name" class="font-color">产品数量</div>
          <input slot="content" v-model="item.quantity" readonly >
        </item>
      </list-item>
    </h-content>
    <bottom-tab class="add-box">
      <tab-button class="next">
        <img src="@/assets/intoApproval/approve.png" @click.native="">保存
      </tab-button>
    </bottom-tab>
  </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 CurrencyInput from '@/components/currencyInput'
import RateInput from '@/components/rateInput'
// import bodyCheck from './body-check'
import axios from 'axios'
import PDFJS from 'pdfjs-dist'

export default {
  name: 'ContractDetail',
  components: {
    Personal,
    LegalPerson,
    // bodyCheck,
  },
  data () {
    return {
      pages: 0,
      pdfDoc: null,
      isshow: false, // 提示框的显示与隐藏
      bp_flag: false, // 判断自然人和法人
      num: 0,
      attachFlag: false,
      attachUrl: null,
      tabNum: null,
      check_id: this.$route.params.check_id,
      bp_name: '',
      bookFlag: false,
      read_status: 'N',
      content_id: '',
      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,
      signMsg: '',
      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已认证通过可进行签约，否则不可签约
      invoiceInfo: {
        invoice_kind: '',
        invoice_kind_n: '',
        taxpayer_type: '',
        invoice_title: '',
        taxpayer_type_n: '',
        organization_code: '',
        invoice_adds: '',
        invoice_tel: '',
        open_bank: '',
        open_account: '',
      },
      bank_lists: {
        bank_account_num: '', // 卡号
        bank_account_name: '', // 账户姓名
        bank_card_type: '', // 类型（信用卡/借记卡/未知）
        bank_full_name: '', // 银行名称
        bank_branch_name: '', // 支行
      },
      quotationInfo: {},
      leaseList: [],
      itemInfo:{},
      downNum: false,
      checkId: '',
      reportCheckId: '',
      miningCheckId: '',
      upload_list_mining: [],
      dowload_list_mining: [],
      upload_list_report: [],
      dowload_list_report: [],
    }
  },
  computed: {},

  watch: {
    $route (to, from) {
      hlsPopup.hideConfirm()
    },
    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.$refs.body.hideBody()
        vm.bank_flag = false
        vm.isConfirm = false
        vm.ischecked = false
        vm.bookFlag = 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.getPrjBaseInfo()
        vm.getMiningLicenseList()
        vm.getFinancialStatementsList()
        vm.getPrjQuotationList()
        vm.getLease()
      }
    })
  },
  activated () {

  },
  mounted () {
    this.getBpTenantSelects()
    this.getInvoiceType()
    this.getTaxpayer()
    this.repayPeriod()
  },
  methods: {
    _renderPage (num) {
      this.pdfDoc.getPage(num).then((page) => {
        let canvas = document.getElementById('the-canvas' + num)
        console.log(canvas)
        let ctx = canvas.getContext('2d')
        let dpr = window.devicePixelRatio || 1
        let bsr = ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1
        let ratio = dpr / bsr
        let viewport = page.getViewport(screen.availWidth / page.getViewport(1).width)
        canvas.width = viewport.width * ratio
        canvas.height = viewport.height * ratio
        canvas.style.width = viewport.width / 1.1 + 'px'
        canvas.style.height = viewport.height / 1.1 + 'px'
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        }
        page.render(renderContext)
        if (this.pages > num) {
          this._renderPage(num + 1)
        }
      })
    },
    _loadFile (url) {
      console.log('URL ==== ' + url)
      PDFJS.getDocument(url).then((pdf) => {
        this.pdfDoc = pdf
        console.log('pdf ==== ' + pdf)
        this.pages = this.pdfDoc.numPages
        this.$nextTick(() => {
          this._renderPage(1)
        })
      })
    },
    // 担保人
    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 + 'zm_prj_lease_item_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.leaseList = 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()
        }
      })
    },
    invoiceQuery () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_query'
      let param = {
        bp_id: vm.bp_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          console.log('invoiceInfo', res.info)
          vm.invoiceInfo = res.info
          vm.invoiceInfo.invoice_title = JSON.parse(window.localStorage.getItem('handleUser')).bp_name
          // Object.assign(vm.invoiceInfo, res.info)
          vm.addRows(vm.invoiceInfo.invoice_adds)
          vm.addRowsLive(vm.invoiceInfo.open_bank)
        }
      })
    },

    addRows (e) {
      if (e) {
        let len = 0
        for (let i = 0; i < e.length; i++) {
          var c = e.charCodeAt(i)
          // 统计字符串的字符长度
          if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
            len += 1
          } else {
            len += 2
          }
        }
        let addNum = Math.ceil(len / 21)
        this.$refs.myTestarea.rows = addNum
      }
    },
    addRowsLive (e) {
      if (e) {
        let len = 0
        for (let i = 0; i < e.length; i++) {
          var c = e.charCodeAt(i)
          // 统计字符串的字符长度
          if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
            len += 1
          } else {
            len += 2
          }
        }
        let addNum = Math.ceil(len / 21)
        this.$refs.myTestareaLive.rows = addNum
      }
    },
    getPrjBaseInfo () {
      let vm = this
      let url = process.env.basePath + 'zm_prj_base_info_query'
      let param = {
        project_id: vm.project_id,
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.baseInfo = res.lists[0]
        }
      })
    },
    getMiningLicenseList () {
      let vm = this
      let url = process.env.basePath + 'bp_mining_license_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.miningCheckId = res.lists[0].check_id
          vm.getAttachmentList(vm.reportCheckId, 'mining')
        }
      })
    },
    getFinancialStatementsList () {
      let vm = this
      let url = process.env.basePath + 'bp_financial_statements_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.reportCheckId = res.lists[0].check_id
          vm.getAttachmentList(vm.reportCheckId, 'report')
        }
      })
    },
    getPrjQuotationList () {
      let vm = this
      let url = process.env.basePath + 'zm_prj_quotation_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.quotationInfo = res.lists[0]
        }
      })
    },
    getBpTenantSelects () {
      let vm = this
      let url = process.env.basePath + 'bp_tenant_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.bpTenantList = res.lists.map(item => {
            item.code = item.bp_id
            item.code_name = item.bp_name
            return item
          })
        }
      })
    },
    selectBpTenant (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.bpTenantList,
        code: 'bp_id',
        object: {},
        returnItem: function (index, obj) {
          debugger
          console.log(vm.bpTenantList[index])
          vm.baseInfo = {
            ...vm.baseInfo,
            ...vm.bpTenantList[index],
          }
          vm.invoiceInfo = {
            ...vm.invoiceInfo,
            ...vm.bpTenantList[index],
          }
        },
      })
    },
    getAttachmentList (checkId, code) {
      let vm = this
      let url =
        process.env.basePath + 'attachment_list_query' // 附件查询
      let param = {
        check_id: checkId,
      }
      hlsPopup.showLoading('请稍候')
      return vm.hlsHttp.post(url, param).then(function (res) {
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          res.lists.forEach(item => {
            item['url'] =
              process.env.filePath +
              'attachment_id=' +
              item.attachment_id +
              '&access_token=' +
              window.localStorage.access_token
          })
          if (code === 'report') {
            vm.dowload_list_report = res.lists
          } else {
            vm.dowload_list_mining = res.lists
          }
        }
      })
    },
    getInvoiceType () {
      let vm = this
      let url = process.env.basePath + 'bp_invoice_kind_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.invoicList = res.lists.map(item => {
            return {
              code: item.invoice_kind,
              code_name: item.invoice_kind_n,
            }
          })
        }
      })
    },
    getTaxpayer () {
      let vm = this
      let url = process.env.basePath + 'bp_taxpayer_type_query'
      let param = {}
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.taxpayerList = res.lists.map(item => {
            return {
              code: item.taxpayer_type,
              code_name: item.taxpayer_type_n,
            }
          })
        }
      })
    },
    selectTaxpayer (e) {
      let vm = this
      console.log('vm.taxpayerList', vm.taxpayerList)
      vm.hlsPopup.selectList({
        list: vm.taxpayerList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.$set(vm.invoiceInfo, 'taxpayer_type', obj.bp_type)
          vm.$set(vm.invoiceInfo, 'taxpayer_type_n', obj.bp_type_n)
          console.log('obj', vm.invoiceInfo)
        },
      })
    },
    selectInvoiceType (e) {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.invoicList,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.$set(vm.invoiceInfo, 'invoice_kind', obj.bp_type)
          vm.$set(vm.invoiceInfo, 'invoice_kind_n', obj.bp_type_n)
        },
      })
    },

    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100% !important',
      })
    },
    // ocr识别入口
    ocrShow (desc, id, code) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(desc, id, code)
          } else {
            vm.takePicture(desc, id, code)
          }
        },
      })
    },
    openCamera (desc, id, code) {
      let vm = this
      let obj = {
        'pkvalue': id,
        'source_type': 'PRJ_CDD_ITEM_CHECK',
        'picture': '',
        'check_id': id,
        'filePath': '',
        'attachment_id': '',
        'user_id': 1,
        'fileName': desc + '_' + new Date().getTime(),
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        obj.filePath = imgdata
        obj.picture = hlsUtil.convertImageUrl(imgdata)
        let list = []
        list.push(obj)
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list, code)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture (desc, checkId, code) {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        var list = []
        for (let i = 0; i < imgUrl.length; i++) {
          let obj = {
            'pkvalue': checkId,
            'source_type': 'PRJ_CDD_ITEM_CHECK',
            'picture': '',
            'check_id': checkId,
            'filePath': '',
            'attachment_id': '',
            'user_id': 1,
            'fileName': desc + '_' + new Date().getTime(),
          }
          obj.filePath = imgUrl[i]
          obj.picture = hlsUtil.convertImageUrl(imgUrl[i])
          list.push(obj)
        }
        vm.save_picture(list, code)
      }
      let error = function () {
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 图片保存
    save_picture (list, code) {
      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
                  if (code === 'report') {
                    vm.upload_list_report.push(list[j])
                    break
                  } else if (code === 'mining') {
                    vm.upload_list_mining.push(list[j])
                    break
                  }
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    // 移除图片
    remove_pic (attachment_id, index, code) {
      let vm = this
      var delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_upload_list(attachment_id, index, code)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    remove_upload_list (attachment_id, index, code) {
      let vm = this
      if (code === 'report') {
        vm.upload_list_report.remove(index)
        vm.upload_list_report.sort()
      } else if (code === 'mining') {
        vm.upload_list_mining.remove(index)
        vm.upload_list_mining.sort()
      }
    },
    // 删除图片
    delete_pic (attachment_id, code) {
      let vm = this
      let delete_list = []
      let obj = {'attachment_id': attachment_id}
      delete_list.push(obj)
      let url = process.env.basePath + 'app_delete_attment' // 附件删除
      let param = {
        'picturelist': delete_list,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('删除成功!')
          vm.remove_dowload_list(attachment_id, code)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    remove_dowload_list (attachment_id, code) {
      console.log('attachment_id', attachment_id)
      let vm = this
      if (code === 'report') {
        vm.dowload_list_report = vm.dowload_list_report.filter(item => {
          return item.attachment_id !== attachment_id
        })
      } else if (code === 'mining') {
        vm.dowload_list_mining = vm.dowload_list_mining.filter(item => {
          return item.attachment_id !== attachment_id
        })
      }
    },
    // 还款周期查询
    repayPeriod () {
      let vm = this
      let url = $config.basePath + 'annual_pay_times_query'
      let param = {
        product_plan_id: vm.product_plan_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.periodLists = res.lists.map(item => {
            return {
              code: item.annual_pay_times,
              code_name: item.annual_pay_times_n,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 还款周期选择
    periodPull () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.periodLists, // 下拉列表
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.info.annual_pay_times_n = obj.bp_type_n
          vm.annual_pay_times = obj.bp_type
        },
      })
    },
    // 保存融租方案接口
    prjBaseInfoSave () {
      let vm = this
      let url = $config.basePath + 'zm_prj_base_info_save'
      let param = {
        'project_id': vm.project_id,
        'operator_id': '',
        ...vm.baseInfo,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {

        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 保存设备
    prjLeaseItemSave () {
      let vm = this
      let url = $config.basePath + 'zm_prj_lease_item_save'
      let param = {
        master: {
          lists: [{
            'project_id': vm.project_id,
            ...vm.itemInfo,
          }],
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.getLease()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 方案信息保存&更新接口
    calculationSave () {
      let vm = this
      if (!vm.quotationInfo.equip_price) {
        hlsPopup.showLongCenter('请输入设备总价')
      } else if (!vm.quotationInfo.price_date_to) {
        hlsPopup.showLongCenter('请选择时间')
      } else if (!vm.quotationInfo.gps_fee) {
        hlsPopup.showLongCenter('请输入GPS费用')
      } else if (!vm.quotationInfo.insurance_fee) {
        hlsPopup.showLongCenter('请输入保险押金费用')
      } else {
        let url = $config.basePath + 'zm_prj_quotation_save'
        let param = {
          'project_id': vm.project_id,
          'quotation_id': vm.quotationInfo.quotation_id,
          'equip_price': vm.quotationInfo.equip_price,
          'down_payment': vm.quotationInfo.down_payment,
          'deposit': vm.quotationInfo.deposit,
          'lease_charge': vm.quotationInfo.lease_charge,
          'due_date': vm.quotationInfo.due_date,
          'lease_times': vm.quotationInfo.lease_times,
          'insurance_fee': vm.quotationInfo.insurance_fee,
          'gps_fee': vm.quotationInfo.gps_fee,
          'annual_pay_times': vm.quotationInfo.annual_pay_times,
          'finance_amount': vm.quotationInfo.finance_amount,
          'deposit_ratio': vm.quotationInfo.deposit_ratio,
          'lease_charge_ratio': vm.quotationInfo.lease_charge_ratio,
          'lease_start_date': vm.quotationInfo.lease_start_date,
          'int_rate': vm.quotationInfo.int_rate,
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.hlsHttp.post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            vm.quotationInfo.quotation_id = res.quotation_id
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
  },
}
</script>
<style lang="less" rel="stylesheet">
#contract-details {
  .outer {
    width: 259px;
    height: 370px;
    background-color: #fff;
    overflow-y: scroll;
    overflow-x: hidden;
    .canvas {
      position: relative;
      z-index: 0;
    }
  }

  .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%;
    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;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: 100%;
    .unread {
      width: 34px;
      height: 20px;
      margin: 0 10px;
    }
    .wrap-img {
      width: 12%;
      height: 100%;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      background: rgb(254, 251, 233);
      img {
        width: 22px;
        height: 20px;
      }
    }
    .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;
      width: 60%;
    }
  }

  .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;
      top: -67px;
      background: url("../../assets/intoApproval/top.png") no-repeat;
      background-size: 301px 24.7px;
      background-color: #fff;
      img {
        position: absolute;
        z-index: 999;
        width: 301px;
      }
      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;
        background-color: #fff;
        // 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;
        position: relative;
        margin-top: 15px;
        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;
      }
    }
  }
  input::placeholder{
    color: #B4B4B5;
  }
  .font-color {
    color: #656464;
  }
  textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
    color:#666;
    resize: none;
  }
  .footer-button {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .save {
    width: 100%;
    height: 45px;
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
  }

  .house {
    background: #fff;
    margin-top: 10px;
    padding-bottom: 10px;
    .plus {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-upload {
      position: relative;
      width: 80px;
      height: 80px;
      border: 1px dashed #dcdcdd;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      margin-top: 12px;
      margin-left: 16px;
      // float: left;

      .close {
        /* position: relative;
         color: #F96F68;
         margin-top: -100%;
         margin-left: -10%;*/
        position: absolute;
        color: #F96F68;
        top: -6px;
        right: -6px;

        img {
          width: 14px;
          height: 14px;
        }
      }

      img {
        /*width: 88px;
        height: 88px;*/
        width: 100%;
        height: 100%;
      }

      .upload-btn {
        width: 24px;
        height: 24px;
      }
    }
  }
  .house:last-child, .house:nth-last-child(2){
    // margin-top: 0;
    div {
      float: left;
    }
  }

  .upload-box {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    div {
      width: 172px;
      height: 120px;
      border: 1px dashed #dcdcdd;
      text-align: center;
      font-size: 14px;
      color: #b4b4b5;
      .front,
      .back {
        width: 172px;
        height: 120px;
      }
    }
    div:nth-of-type(2) {
      margin-left: 7px;
    }
    img {
      margin-top: 32px;
      width: 58px;
      height: 45px;
    }
    p {
      margin-top: 12px;
      font-size: 13px;
    }
  }

}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}

.trans-enter-active,
.trans-leave-active {
  transition: opacity 0.5s;
}
.trans-enter,
.trans-leave-active {
  opacity: 0;
}
.hide {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    width: 30px;
    height: 30px;
    margin-left: 65%;
  }
}
.wrap {
  padding-top: 92px;
}
.modal-show {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  z-index: 900;
  background-color: rgba(56, 63, 69, 0.3);
  justify-content: center;
  align-items: center;
  .down {
    position: relative;
    width: 314px;
    height: 516px;
    z-index: 999;
    background-size: 301px 24.7px;
    background-color: #fff;
  }
  .top {
    width: 100%;
    height: 44px;
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    letter-spacing: 0;
    text-align: center;
    line-height: 44px;
    color: #fff;
    background: #0041c4;
    img {
      width: 16px;
      height: 16px;
      float: right;
      margin-top: 13px;
      margin-right: 20px;
    }
  }
  .down-content {
    margin-top: 8px;
    span:first-child {
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #656464;
      letter-spacing: 0;
      margin-left: 15px;
    }
    .photo {
      width: 172px;
      height: 120px;
      border: 1px solid #dcdcdd;
      border-radius: 2px;
      margin: 0 auto;
      margin-top: 12px;
      background: url("../../assets/contractStart/photo.png") 70px no-repeat;
      background-size: 24px 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  button {
    width: 240px;
    height: 40px;
    position: absolute;
    color: #fff;
    bottom: 10px;
    left: 30.5px;
    background-color: #0041c4;
    border-radius: 4px;
  }
}

</style>
