<template>
  <h-view id="addCar">
    <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">
            <span>请上传照片</span>
            <div class="photo" @click="pickMethod()">
              <img v-if="vehicleImg" :src="vehicleImg" alt="" >
            </div>
            <list-item :item-height="44">
              <item>
                <div slot="name" class="required">车架号</div>
                <input
                  slot="content"
                  v-model="info.frame_number"
                  :readonly="flag"
                  placeholder="自动识别车架号"
                >
              </item>
              <item>
                <div slot="name" class="required">发动机号</div>
                <input
                  slot="content"
                  v-model="info.engine"
                  :readonly="flag"
                  placeholder="自动识别发动机号"
                >
              </item>
              <item>
                <div slot="name" class="required">车辆型号</div>
                <input
                  slot="content"
                  v-model="info.vehicle_model"
                  :readonly="flag"
                  placeholder="自动识别车辆型号"
                >
              </item>
              <item>
                <div slot="name" class="required">合格证编号</div>
                <input
                  slot="content"
                  v-model="info.certificate_number"
                  :readonly="flag"
                  placeholder="自动识别合格证编号"
                >
              </item>
              <item v-if="!flag">
                <div slot="name" class="required">发车日期</div>
                <input
                  slot="content"
                  v-model="info.departure_date"
                  readonly
                  placeholder="请输入发车日期"
                  @click="showTime('YYYY-MM-DD')"
                >
              </item>
              <item v-if="flag">
                <div slot="name" class="required">发车日期</div>
                <input
                  slot="content"
                  v-model="info.departure_date"
                  readonly
                  placeholder="请输入发车日期"
                >
              </item>
              <item v-if="!flag">
                <div slot="name" class="required">开票日期</div>
                <input
                  slot="content"
                  v-model="info.invoice_date"
                  readonly
                  placeholder="请输入开票日期"
                  @click="showTimeInvoice('YYYY-MM-DD')"
                >
              </item>
              <item v-if="flag">
                <div slot="name" class="required">开票日期</div>
                <input
                  slot="content"
                  v-model="info.invoice_date"
                  readonly
                  placeholder="请输入开票日期"
                >
              </item>
              <!-- <item :showArrow="true" @click.native="showModalValue=true">
                <div slot="name">产品参数</div>
                <input slot="content" v-model="info.bank_branch_name" placeholder="请选择产品参数" @click="changeHeight">
              </item>-->
            </list-item>
          </div>
          <button v-if="!flag" @click="isSave">保存</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>
    <Tab :title="text" @getTabNum="getTabNum" />
    <h-content>
      <div v-show="tabNum===0">
        <div class="userInfo">承租人信息</div>
        <list-item :item-height="44">
          <item v-if="!read" :showArrow="true">
            <div slot="name">合同号</div>
            <input
              slot="content"
              v-model="detail.project_number"
              placeholder="请选择合同号"
              @click="selectContruct"
            >
          </item>
          <item v-if="read">
            <div slot="name">合同号</div>
            <input
              slot="content"
              v-model="detail.project_number"
              readonly
              placeholder="暂无数据"
            >
          </item>
          <item v-if="!read" :showArrow="true">
            <div slot="name">经销商</div>
            <input
              slot="content"
              v-model="detail.bp_agent_name"
              placeholder="请选择经销商"
              @click="selectAgent"
            >
          </item>
          <item v-if="read">
            <div slot="name">
              {{ detail.bp_agent_name ? "经销商" : "办事处" }}
            </div>
            <div slot="content">
              {{
                detail.bp_agent_name ? detail.bp_agent_name : detail.office_name
              }}
            </div>
          </item>
          <item>
            <div slot="name">承租人</div>
            <input
              slot="content"
              v-model="detail.bp_name"
              :placeholder="read ? '暂无数据' : '请输入承租人姓名'"
              readonly="read"
            >
          </item>
          <item v-if="!read" :showArrow="true">
            <div slot="name">产品名称</div>
            <input
              slot="content"
              v-model="detail.division_n"
              placeholder="请选择产品名称"
              @click="selectProductLine"
            >
          </item>
          <item v-if="read">
            <div slot="name">产品名称</div>
            <input
              slot="content"
              v-model="detail.division_n"
              readonly
              placeholder="暂无数据"
            >
          </item>
          <item v-if="read">
            <div slot="name">产品型号</div>
            <input
              slot="content"
              v-model="detail.product_code"
              readonly
              placeholder="暂无数据"
            >
          </item>
          <item>
            <div slot="name">合同金额</div>
            <input
              slot="content"
              v-model="detail.total_price"
              :placeholder="read ? '暂无数据' : '请输入合同金额'"
              :readonly="read"
            >
          </item>
          <item v-if="!read" :showArrow="true">
            <div slot="name">商务政策</div>
            <input
              slot="content"
              v-model="detail.product_plan_id_n"
              placeholder="请选择合同政策"
              @click="selectProductPlan"
            >
          </item>
          <item v-if="read">
            <div slot="name">商务政策</div>
            <input
              slot="content"
              v-model="detail.product_plan_id_n"
              readonly
              placeholder="暂无数据"
            >
          </item>
          <item>
            <div slot="name">租赁物数量</div>
            <input
              slot="content"
              v-model="detail.product_num"
              :readonly="read"
              placeholder="请输入租赁物数量"
            >
          </item>
          <item
            v-if="!flag"
            class="date-check"
            @click.native="showFirstTime('YYYY-MM-DD', 'Sign')"
          >
            <div slot="name" class="firstPay">签约日期</div>
            <input
              slot="content"
              v-model="detail.sale_date"
              readonly
              placeholder="请选择日期 "
              class="firstPay"
            >
          </item>
          <item
            v-if="flag"
          >
            <div slot="name" class="firstPay">签约日期</div>
            <input
              slot="content"
              v-model="detail.sale_date"
              readonly
              placeholder="请选择日期 "
              class="firstPay"
            >
          </item>
          <item
            v-if="!flag"
            class="date-check"
            @click.native="showFirstTime('YYYY-MM-DD', 'FirstPay')"
          >
            <div slot="name" class="firstPay">首次分期付款日</div>
            <input
              slot="content"
              v-model="detail.lease_start_date"
              readonly
              placeholder="请选择日期 "
              class="firstPay"
            >
          </item>
          <item
            v-if="flag"
          >
            <div slot="name" class="firstPay">首次分期付款日</div>
            <input
              slot="content"
              v-model="detail.lease_start_date"
              readonly
              placeholder="请选择日期 "
              class="firstPay"
            >
          </item>

          <item :showArrow="true" @click.native="goPlan">
            <div slot="name">查看还款计划</div>
            <input slot="content" readonly >
          </item>
        </list-item>
        <div class="userInfo">设备清单</div>
        <div
          v-for="(item, index) in equip"
          :key="index"
          class="equipment"
          @click="
            downNum = true;
            getRent(item.contract_id, item.contract_lease_item_id);
          "
        >
          <div class="left">
            <span>
              <img src="@/assets/contractStart/list.png" >
            </span>
          </div>
          <div class="center">
            <span>租赁物信息</span>
            <span
              :class="[
                'status',
                item.lease_status === 'Y' ? 'unMantain' : 'mantain',
              ]"
            >{{ item.lease_status === "Y" ? "已维护" : "待维护" }}</span
            >
            <p>
              设备识别号
              <span>{{ item.product_code }}-{{ (index + 1) | lengthCheck }}</span>
            </p>
          </div>
          <div class="right">
            <img src="@/assets/contractStart/into.png" >
          </div>
        </div>
      </div>
      <div v-show="tabNum===1">
        <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/unchecked.png" >
              <img v-if="item.read_status === 'Y'" class="unread" src="@/assets/constractSigning/checked.png" >
              <div
                v-if="item.template_code === 'PRE_ABC_PAYMENT'"
                class="wrap-img"
                @click="entryInfo"
              >
                <img src="@/assets/constractSigning/scan.png" >
              </div>
            </div>
            <div slot="content" class="in-detail" @click="goContent(item,index)">
              <img src="@/assets/constractSigning/detail.png" alt >
            </div>
          </item>
        </list-item>
      </div>
    </h-content>
    <bottom-tab v-if="!flag">
      <tab-button class="save" @click.native="generateContract" :disable="generateContractFlag">生成电子合同</tab-button>
      <tab-button
        class="approve" @click.native="checkStatus"
      >提交签署</tab-button
      >
    </bottom-tab>
    <div class="bottom-pop">
      <div class="bottom-content">
        <div class="box">
          <div class="fix">
            <div class="hide">
              <div class="userInfo">产品查询</div>
              <img src="@/assets/contractStart/delete.png" @click="hideBox" >
            </div>
            <div class="bottom-top">
              <input placeholder="请输入产品名称" >
              <img src="@/assets/contractStart/delete.png" >
              <input placeholder="请输入产品型号" >
              <img src="@/assets/contractStart/delete.png" >
              <span />
            </div>
          </div>
          <div class="wrap">
            <div v-for="(item, index) in 8" :key="index" class="bottom-item">
              <div class="left">
                <p>
                  <img src="@/assets/contractStart/product.png" >
                </p>
              </div>
              <div class="right">
                <ul>
                  <li>
                    <span class="name">产品名称</span>&ensp; &ensp; 挖掘机
                    <span class="to-right">
                      <span class="name">产品种类</span>&ensp; &ensp; *****
                    </span>
                  </li>
                  <li>
                    <span class="name">产品型号</span>&ensp; &ensp; GTZ226
                    <span class="to-right">
                      <span class="name">产品名称</span>&ensp; &ensp; *****
                    </span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </h-view>
</template>
<script>
import Tab from '@/pages/carConfirm/tab'
export default {
  components: {
    Tab,
  },
  filters: {
    lengthCheck: function (value) {
      if (value.toString().length === 1) {
        return `0${value}`
      } else {
        return value
      }
    },
  },

  data () {
    return {
      num: null,
      downNum: false,
      show: false,
      project_id: this.$route.query.project_id,
      read: false, // 表示只读
      showDate: '',
      flag: false,
      isUpload: false, // 是否上传
      contract_lease_item_id: '',
      upload_list: [], // 上传列表
      productLine: [],
      productPlan: [],
      contract: [],
      tabNum: 0,
      attachArray: [],
      agent: [],
      text: {
        first: '合同详情',
        second: '合同文本',
      },
      info: {
        contract_id: '',
        frame_number: '',
        engine: '',
        manufacturer: '',
        license_plate_number: '',
        vehicle_model: '',
        certificate_number: '',
        departure_date: '',
        invoice_date: '',
      },
      detail: {
        product_num: '',
        first_pay: '',
        gps_fee: '',
        bp_name: '',
        project_number: '',
        bp_agent_name: '',
        product_plan_id_n: '',
        division: '',
        division_n: '',
        product_plan_id: '',
        project_id: '',
        bp_id: '',
        product_code: '',
        sale_date: '',
        lease_start_date: '',
      },
      equip: [],
      vehicleImg: '',
      vehicleImgUpload: '',
      generateContractFlag: false,
    }
  },
  computed: {
    numInt () {
      // 添加设备的时候处理值为空或者nul的情况
      if (this.detail.product_num !== null && this.detail.product_num !== '') {
        return parseInt(this.detail.product_num)
      } else {
        return 0
      }
    },
    carDate () {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      if (m.toString().length < 2) {
        m = `0${m}`
      } else if (d.toString().length < 2) {
        d = `0${d}`
      }
      return `${y}-${m}-${d}`
    },
  },
  watch: {
    downNum (newVal, oldVal) {
      if (!newVal) {
        this.vehicleImg = ''
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      // if (from.name === 'StartList') {
      //   vm.getProductLine()
      //   vm.getProductPlan()
      //   vm.getContractNum()
      // }
      if (vm.$route.query.project_id) {
        vm.read = true
        vm.getDetail()
        vm.getEquipment()
        if (
          vm.$route.query.car_start_status === 'REJECTED' ||
          vm.$route.query.car_start_status === 'NEW'
        ) {
          vm.flag = false
        } else {
          vm.flag = true
        }
      }
    })
  },
  methods: {
    // 同步电子签
    handSave () {
      // hlsPopup.showLongCenter('保存成功！')
      let vm = this
      let url = process.env.basePath + 'syn_content_app'
      let param = {
        project_id: vm.$route.query.project_id,
      }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.result === 'S') {
          vm.hlsPopup.hideLoading()
          vm.hlsPopup.showSuccess('同步成功')
        } else {
          vm.hlsPopup.hideLoading()
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goContent (item, index) {
      // 详情
      // 合同状态更新保存
      let vm = this
      vm.attachFlag = true
      vm.attachUrl = item.attachment_file_path
      let url = process.env.basePath + 'prj_content_check_status_save'
      let param = {
        master: {
          content_id: item.content_id,
          check_status: 'Y',
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          let temp = vm.attachArray[index]
          temp.read_status = 'Y'
          vm.$router.push({name: 'previewPdf', params: {attachUrl: vm.attachUrl}})
          vm.attachArray.splice(vm.attachArray[index], 1, temp)
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goPlan () {
      let vm = this
      vm.$router.push({
        name: 'ContractRepayPlan',
        params: {
          product_num: vm.detail.product_num,
          project_id: vm.project_id,
        },
      })
    },
    getImg (id) {
      // 获取合格证
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'app_attment_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        master: {
          source_type: 'CON_CONTRACT_LEASE_ITEM',
          pkvalue: id,
        },
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if (res.info) {
            vm.vehicleImg =
              process.env.filePath +
              'attachment_id=' +
              res.info.attachment_id +
              '&access_token=' +
              window.localStorage.access_token
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 选择识别类型
    pickMethod () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择证件类型',
        buttonArray: ['标准车辆合格证（重型、施维英）', '车辆登记证', '出厂合格证'],
        callback: (index) => {
          if (index === 0) {
            vm.certificationType = 'NORMAL'
            vm.ocrShow()
          } else if (index === 1) {
            vm.certificationType = 'DAOLU'
            vm.ocrShow()
          } else if (index === 2) {
            vm.certificationType = 'CHANYUN'
            vm.ocrShow()
          }
        },
      })
    },
    getTabNum (i) {
      this.tabNum = i
      if (i === 1) {
        this.getAttachment()
      }
    },
    // ocr识别入口
    ocrShow () {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: (index) => {
          if (index === 0) {
            vm.openCamera()
          } else {
            vm.takePicture()
          }
        },
      })
    },
    openCamera () {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgdata)
          vm.vehicleImgUpload = imgdata
          vm.vehicleIdentify(imgdata)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture () {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgUrl[0])
          vm.vehicleImgUpload = imgUrl[0]
          vm.vehicleIdentify(imgUrl[0])
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 合格证识别
    vehicleIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url
      if (vm.certificationType === 'NORMAL') {
        url = process.env.ocrPath + '/baidu/ocr/vehicle_certificate'
      } else if (vm.certificationType === 'CHANYUN') {
        url = process.env.ocrPath + '/baidu/ocr/chanyun'
      } else if (vm.certificationType === 'DAOLU') {
        url = process.env.ocrPath + '/baidu/ocr/daolu'
      }
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        console.log('$$$$$$$$$$$$$$$' + JSON.stringify(res))
        if (vm.certificationType === 'NORMAL') {
          let result = res.result.words_result
          vm.info.frame_number = result.VinNo // 车架号
          vm.info.engine = result.EngineNo // 发动机号
          vm.vehicle_model = result.CarModel // 车辆型号
          vm.info.certificate_number = result.CertificationNo // 合格证编号
        } else if (vm.certificationType === 'DAOLU') {
          let result = res.result.data
          vm.info.frame_number = result.vehicle_number.word // 车架号
          vm.info.engine = result.engine_number.word // 发动机号
          vm.info.vehicle_model = result.car_model.word // 车辆型号
          vm.info.certificate_number = ''
        } else if (vm.certificationType === 'CHANYUN') {
          let result = res.result.data
          vm.info.frame_number = result.vehicle_number.word // 车架号
          vm.info.engine = result.engine_number.word // 发动机号
          vm.info.vehicle_model = result.car_type.word // 车辆型号
          vm.info.certificate_number = result.vechicle_ok_no.word
        }
        vm.info.project_lease_item_id = ''
        vm.info.departure_date = ''
        vm.info.invoice_date = ''
      })
    },
    // 图片保存
    save_picture (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.upload_list.push(list[j])
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    showTime (format) {
      this.hlsPopup.showTime({
        nowDate: `${this.carDate}`,
        format: format,
        callback: (date) => {
          this.info.departure_date = date
        },
      })
    },
    showFirstTime (format, code) {
      this.hlsPopup.showTime({
        nowDate: `${this.carDate}`,
        format: format,
        callback: (date) => {
          if (code === 'FirstPay') {
            if (this.detail.lease_start_date !== date) {
              this.hlsPopup.showConfirm({
                title: '提示',
                content: `原首次分期付款日期：${this.detail.lease_start_date}<br/>修改后：<span style="color:#ff9200;font-weight:bold;">${date}</span><br/>修改后需<span style="color:#ff9200;font-weight:bold;">重算租金计划</span>，您是否确认修改？`,
                confirmText: '确认',
                onConfirm: (data) => {
                  if (data === 1) {
                    this.detail.lease_start_date = date
                    this.updateFirstPayDate()
                  }
                },
              })
            }
          } else if (code === 'Sign') {
            if (this.detail.sale_date !== date) {
              this.hlsPopup.showConfirm({
                title: '提示',
                content: `原签约日期：${this.detail.sale_date}<br/>修改后：<span style="color:#ff9200;font-weight:bold;">${date}</span><br/>您是否确认修改？`,
                confirmText: '确认',
                onConfirm: (data) => {
                  if (data === 1) {
                    this.detail.sale_date = date
                    this.updateSignDate()
                  }
                },
              })
            }
          }
        },
      })
    },
    recalculate () {
      // 重算还款计划
      let vm = this
      let url = process.env.basePath + 'repay_calc_by_date'
      let param = {
        master: {
          project_id: vm.project_id,
          lease_start_date: vm.detail.lease_start_date,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('还款计划重算成功！')
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    updateFirstPayDate () {
      // 更新首次付款日
      let vm = this
      let url = process.env.basePath + 'prj_lease_start_date_upd'
      let param = {
        master: {
          project_id: vm.project_id,
          lease_start_date: vm.detail.lease_start_date,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.generateContractFlag = false
        if (res.result === 'S') {
          // hlsPopup.showLongCenter('首次分期付款日期更新成功！')
          vm.recalculate()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    updateSignDate () {
      // 更新签约日期
      let vm = this
      let url = process.env.basePath + 'prj_sale_date_upd'
      let param = {
        master: {
          project_id: vm.project_id,
          sale_date: vm.detail.sale_date,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.generateContractFlag = false
        if (res.result === 'S') {
          hlsPopup.showLongCenter('签约日期更新成功！')
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    showTimeInvoice (format) {
      this.hlsPopup.showTime({
        nowDate: `${this.carDate}`,
        format: format,
        callback: (date) => {
          this.info.invoice_date = date
        },
      })
    },
    save () {
      let vm = this
      let url = process.env.basePath + 'leases_info_save'
      let param = {
        master: this.info,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        vm.generateContractFlag = false
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('保存成功')
          vm.getEquipment()
          setTimeout(() => {
            vm.downNum = false
          }, 2000)
          vm.savePicture()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    savePicture () {
      let vm = this
      let list = []
      let obj = {
        pkvalue: vm.contract_lease_item_id,
        source_type: 'CON_CONTRACT_LEASE_ITEM',
        picture: '',
        check_id: vm.contract_lease_item_id,
        filePath: vm.vehicleImgUpload,
        attachment_id: '',
        user_id: 1,
        fileName: '合格证',
      }
      list.push(obj)
      vm.save_picture(list)
    },
    isSave () {
      if (!this.info.frame_number) {
        hlsPopup.showLongCenter('请输入车架号')
      } else if (!this.info.engine) {
        hlsPopup.showLongCenter('请输入发动机号')
      } else if (!this.info.vehicle_model) {
        hlsPopup.showLongCenter('请输入车辆型号')
      } else if (!this.info.certificate_number) {
        hlsPopup.showLongCenter('请输入合格证编号')
      } else if (!this.info.departure_date) {
        hlsPopup.showLongCenter('请输入发车日期')
      } else if (!this.info.invoice_date) {
        hlsPopup.showLongCenter('请输入开票日期')
      } else {
        this.hlsPopup.showConfirm({
          title: '提示',
          content: '您确定保存吗？',
          onConfirm: (data) => {
            if (data === 1) {
              this.save()
            }
          },
        })
      }
    },
    generateContract () {
      // 生成合同文本
      let vm = this
      vm.generateContractFlag = true
      let url = process.env.basePath + 'car_create_all_content'
      let param = {
        project_id: vm.project_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(res => {
        hlsPopup.hideLoading()
        if (res.result === 'S') {
          hlsPopup.showLongCenter('生成成功！')
          vm.getAttachment()
        } else {
          vm.hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 合同文本详情附件查询
    getAttachment () {
      let vm = this
      let url = process.env.basePath + 'get_content_app_agent'
      let param = {
        project_id: vm.project_id,
        data_class: 'LEASE_ITEM',
         bp_id: JSON.parse(window.localStorage.getItem('now_user_bp_bind_id')).bp_id
      }
      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)
        }
      })
    },
    checkStatus () {
      let mantained = this.equip.filter((i) => {
        return i.lease_status === 'N'
      })
      if (mantained.length > 0) {
        hlsPopup.showLongCenter('您有待维护的设备项，请完善信息后再提交至客户签署！')
      } else {
        this.isApprove()
      }
    },
    isApprove () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确定提交至客户签署吗？',
        onConfirm: (data) => {
          if (data === 1) {
            this.approve()
          }
        },
      })
    },
    getRent (e, id) {
      let vm = this
      for (let i in vm.info) {
        vm.info[i] = ''
      }
      vm.info.contract_id = e
      let url = process.env.basePath + 'leases_info_query'
      let param = {
        contract_id: e,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.info, res.info)
          vm.getImg(id)
          vm.contract_lease_item_id = id
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },

    approve () {
      let vm = this
      let url = process.env.basePath + 'car_apply_submit'
      let param = {
        master: {
          project_id: vm.project_id,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.hlsPopup.showSuccess('申请成功')
          setTimeout(() => {
            vm.$router.push({
              name: 'StartList',
            })
          }, 2000)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getEquipment () {
      let vm = this
      let url = process.env.basePath + 'car_equip_list_query'
      let param = {
        project_id: this.$route.query.project_id,
        pagesize: 999,
        pagenum: 1,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.equip = res.lists
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getContractNum () {
      let vm = this
      let url = process.env.basePath + 'linked_contract_query'
      let param = {
        // user_phone: window.localStorage.getItem('user_phone'),
        bp_id: JSON.parse(window.localStorage.now_user_bp_bind_id).bp_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.contract = res.lists.map((item) => {
            return {
              code: item.project_id,
              code_name: item.project_number,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectContruct () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.contract,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.detail.project_id = obj.bp_type
          vm.detail.project_number = obj.bp_type_n
        },
      })
    },
    getAgent () {
      let vm = this
      let url = process.env.basePath + 'vendor_list_query'
      let param = {}
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.agent = res.lists.map((item) => {
            return {
              code: item.factory_bp_id,
              code_name: item.bp_name,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectAgent () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.agent,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.detail.bp_id = obj.bp_type
          vm.detail.bp_agent_name = obj.bp_type_n
        },
      })
    },
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'con_contract_detial'
      let param = {
        project_id: this.$route.query.project_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.detail, res.info)
          vm.detail.sale_date ? vm.detail.sale_date = vm.detail.sale_date.substr(0, 10) : vm.detail.sale_date = ''
          vm.detail.lease_start_date ? vm.detail.lease_start_date = vm.detail.lease_start_date.substr(0, 10) : vm.detail.lease_start_date = ''
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    changeHeight () {
      let popClient = document.querySelector('.bottom-content')
      let bottomPop = document.querySelector('.bottom-pop')
      bottomPop.style.height = '100%'
      popClient.style.height = '500px'
    },
    getProductLine () {
      let vm = this
      let url = process.env.basePath + 'division_query'
      let param = {}
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.productLine = res.lists.map((item) => {
            return {
              code: item.division,
              code_name: item.division_n,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectProductLine () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.productLine,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.detail.division = obj.bp_type
          vm.detail.division_n = obj.bp_type_n
        },
      })
    },
    getProductPlan () {
      let vm = this
      let url = process.env.basePath + 'prd_plan_defintion'
      let param = {}
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.productPlan = res.lists.map((item) => {
            return {
              code: item.product_plan_id,
              code_name: item.product_plan_name,
            }
          })
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    selectProductPlan () {
      let vm = this
      vm.hlsPopup.selectList({
        list: vm.productPlan,
        code: 'bp_type',
        object: {},
        returnItem: function (index, obj) {
          vm.detail.product_plan_id = obj.bp_type
          vm.detail.product_plan_id_n = obj.bp_type_n
        },
      })
    },
    hideBox () {
      let popClient = document.querySelector('.bottom-content')
      let bottomPop = document.querySelector('.bottom-pop')
      bottomPop.style.height = '0'
      popClient.style.height = '0'
    },
  },
}
</script>
<style lang="less" scoped>
#addCar {
  .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 {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      margin-left: 16px;
      color: #383f45;
      letter-spacing: 0.43px;
    }

    .first {
      margin-left: 13px;
      width: 60%;
    }
  }
  .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);
      }
    }
  }
  input::placeholder {
    color: #888c8f;
  }
  .firstPay {
    color: #ff9200;
    font-weight: bold;
  }
  .date-check {
    background: url("../../assets/trial/date.png") 350px no-repeat;
    background-size: 16px 16px;
    input {
      margin-right: 16px;
    }
  }
  .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;
    }
  }
  .userInfo {
    height: 45px;
    line-height: 45px;
    color: #0041c4;
    font-size: 15px;
    margin-left: 16px;
    position: relative;
  }
  .userInfo::before {
    content: "";
    display: block;
    width: 4px;
    height: 20px;
    background-color: #0041c4;
    position: absolute;
    left: -15px;
    top: 12px;
  }
  .equipment:not(:first-child) {
    margin-top: 2px;
  }
  .equipment {
    width: 359px;
    height: 72px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    .left {
      flex: 1;
      span {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #e8e9ed;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-top: 8px;
        img {
          width: 11px;
          height: 14px;
        }
      }
    }
    .center {
      flex: 6;
      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        letter-spacing: 0.43px;
        margin-left: 10px;
        margin-top: 12px;
      }
      .status {
        display: inline-block;
        width: 46px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        margin-left: 21px;
        margin-top: 12px;
      }
      .unMantain {
        background-color: #1d3fff;
      }
      .mantain {
        background-color: #fff;
        border: 1px solid #1d3fff;
        color: #1d3fff;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0.4px;
        margin-left: 10px;
        margin-top: 10px;
        span {
          font-family: Helvetica;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 13px;
        height: 13px;
      }
    }
  }
  .approve {
    color: #fff;
    background-color: #0041c4;
  }
  .save {
    border: 1px solid #fdb62f;
    border-radius: 4px;
    color: #fdb62f;
  }
  .bottom-pop {
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0px;
    z-index: 999;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .bottom-content {
      width: 100%;
      height: 0px;
      transition: 0.3s linear;
      border-radius: 20px 20px 0 0;
      position: absolute;
      bottom: 0px;
      background-color: #fff;
      overflow-y: scroll;
      .box {
        width: 359px;
        margin: 0 auto;
        .fix {
          position: fixed;
          background-color: #fff;
          border-radius: 20px;
          z-index: 999;
        }
        .bottom-top {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          padding-bottom: 10px;
          border-bottom: 1px solid #d9dbdf;
          input {
            width: 148px;
            height: 36px;
            background-color: rgba(239, 239, 239, 0.55);
            border-radius: 4px;
            text-indent: 14px;
          }
          input:last-of-type {
            margin-left: -5px;
          }
          img {
            width: 15px;
            height: 15px;
            position: relative;
            top: 10px;
            left: -26px;
          }
          span {
            display: inline-block;
            width: 40px;
            height: 36px;
            border-radius: 4px;
            background: url("../../assets/contractStart/select.png") 10px
              no-repeat #1d3fff;
            background-size: 16px 16px;
          }
        }
        .bottom-item {
          width: 100%;
          height: 80px;
          background: #f7f7f7;
          border-radius: 4px;
          margin-top: 10px;
          display: flex;
          justify-content: flex-start;
          .left {
            width: 17%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            p {
              width: 30px;
              height: 30px;
              background: #e0e1e5;
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 14px;
                height: 14px;
              }
            }
          }
          .right {
            width: 83%;
            height: 100%;
            ul {
              height: 100%;
              li {
                width: 100%;
                height: 50%;
                line-height: 36px;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #383f45;
                .name {
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: rgba(56, 63, 69, 0.6);
                  letter-spacing: 0.43px;
                }
              }
              .to-right {
                float: right;
                margin-right: 36px;
              }
              li:first-child {
                border-bottom: 1px solid #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
