appendInfo.vue

<template>
  <h-view id="accessory" class="public-style">
    <h-content>
      <div v-for="(list, index) in cddItemList" :key="index" class="card">
        <span class="card-desc" style="color:#1D3FFF">{{ list.description }}</span>
        <div class="img-content">
          <!--待上传图片列表-->
          <div
            v-if="list.cdd_item==='ASSETS_CARD'||list.cdd_item==='MARITAL STATUS'||list.cdd_item==='FAMILY_REGISTER'"
          >
            <div
              v-for="(item, index) in upload_list"
              v-if="item.check_id==list.check_id"
              :key="index"
              class="card-upload"
            >
              <img :src="item.picture" @click="showBigPicture(item.picture)" >
              <div class="close" @click="remove_pic(item.attachment_id,index)">
                <img src="@/assets/userBind/deleteIcon.png" >
              </div>
            </div>
            <!--从服务器上下载的图片-->
            <div v-for="(pic, index) in dowload_list" :key="index">
              <div v-if="pic.check_id==list.check_id" :key="index" class="card-upload">
                <img :src="pic.url" @click="showBigPicture(pic.url)" >
                <div class="close" @click="delete_pic(pic.attachment_id)">
                  <img src="@/assets/userBind/deleteIcon.png" >
                </div>
              </div>
            </div>
            <div class="card-upload plus">
              <img src="@/assets/userBind/camera.png" class="upload-btn" >
            </div>
          </div>
          <div v-if="list.cdd_item==='HOUSE_CARD'">
            <div v-if="!houseImg" class="card-upload plus">
              <img src="@/assets/userBind/camera.png" class="upload-btn" >
            </div>
            <div v-if="houseImg&&!isApproved" class="card-upload plus">
              <img :src="houseImg" style="width:100%;height:100%" >
            </div>
            <div v-if="houseImg&&isApproved" class="card-upload plus" @click="showBigPicture(houseImg)">
              <img :src="houseImg" style="width:100%;height:100%" >
            </div>
            <list-item :item-height="44" class="card-Info">
              <item>
                <div slot="name">房屋所有权人</div>
                <input slot="content" v-model="hauseInfo.house_owner" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">共有情况</div>
                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">房屋坐落</div>
                <textarea
                  slot="content" v-model="hauseInfo.house_located" cols="22" rows="1" readonly
                  placeholder="" @input="addRow(hauseInfo.house_located,$event)" />
              </item>
              <item>
                <div slot="name">登记时间</div>
                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">房屋性质</div>
                <input slot="content" v-model="hauseInfo.house_property" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">规划用途</div>
                <input slot="content" v-model="hauseInfo.plan_purpose" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">总层数</div>
                <input slot="content" v-model="hauseInfo.house_layers" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">建筑面积</div>
                <input slot="content" v-model="hauseInfo.built_area" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">套内建筑面积</div>
                <input slot="content" v-model="hauseInfo.built_in_area" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">其他</div>
                <input slot="content" v-model="hauseInfo.others" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">地号</div>
                <input slot="content" v-model="hauseInfo.land_number" readonly placeholder="" >
              </item>
              <item :proportion="[1,1]">
                <div slot="name">土地使用权取得方式</div>
                <input slot="content" v-model="hauseInfo.land_get_method" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">土地使用年限</div>
                <input slot="content" v-model="hauseInfo.land_use_limit" readonly placeholder="" >
              </item>
            </list-item>
          </div>
          <div v-if="list.cdd_item==='CAR_CARD'">
            <div v-if="list.cdd_item==='CAR_CARD'">
              <div v-if="!carImg" class="card-upload plus">
                <img src="@/assets/userBind/camera.png" class="upload-btn" >
              </div>
              <div
                v-if="carImg&&!isApproved"
                class="card-upload plus"
              >
                <img :src="carImg" style="width:100%;height:100%" >
              </div>
              <div v-if="carImg&&isApproved" class="card-upload plus" @click="showBigPicture(carImg)">
                <img :src="carImg" style="width:100%;height:100%" >
              </div>
            </div>
            <list-item :item-height="44" class="card-Info">
              <item>
                <div slot="name">车辆识别代号</div>
                <input
                  slot="content"
                  readonly
                  v-model="carInfo.vehicle_identify_num"
                  placeholder=""
                >
              </item>
              <item>
                <div slot="name">住址</div>
                <textarea
                  slot="content" v-model="carInfo.address" cols="22" rows="1" readonly
                  placeholder="" @input="addRow(carInfo.address,$event)" />
              </item>
              <item>
                <div slot="name">品牌型号</div>
                <input slot="content" v-model="carInfo.brand_model_number" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">发证日期</div>
                <input slot="content" v-model="carInfo.start_date" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">车辆类型</div>
                <input slot="content" v-model="carInfo.vehicle_type" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">所有人</div>
                <input slot="content" v-model="carInfo.owner" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">使用性质</div>
                <input slot="content" v-model="carInfo.use_nature" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">发动机号码</div>
                <input slot="content" v-model="carInfo.engine_number" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">号牌号码</div>
                <input slot="content" v-model="carInfo.plate_number" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">注册日期</div>
                <input slot="content" v-model="carInfo.regist_date" readonly placeholder="" >
              </item>
            </list-item>
          </div>
          <div v-if="list.cdd_item==='REAL_EST_CERTIFICATE'">
            <div v-if="list.cdd_item==='REAL_EST_CERTIFICATE'">
              <div v-if="!estateImg" class="card-upload plus">
                <img src="@/assets/userBind/camera.png" class="upload-btn" >
              </div>
              <div
                v-if="estateImg&&!isApproved"
                class="card-upload plus"
              >
                <img :src="estateImg" style="width:100%;height:100%" >
              </div>
              <div v-if="estateImg&&isApproved" class="card-upload plus" @click="showBigPicture(estateImg)">
                <img :src="estateImg" style="width:100%;height:100%" >
              </div>
            </div>
            <list-item :item-height="44" class="card-Info">
              <item>
                <div slot="name">权利人</div>
                <input
                  slot="content"
                  readonly
                  v-model="propertyInfo.right_person"
                  placeholder=""
                >
              </item>
              <item>
                <div slot="name">共有情况</div>
                <input slot="content" v-model="propertyInfo.public_situation" readonly placeholder="" >
              </item>
              <item>
                <div slot="name">坐落</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_located" cols="22" rows="1"
                  contenteditable="true"
                  readonly
                  placeholder=""
                  @input="addRow(propertyInfo.house_located,$event)" />
              </item>
              <item>
                <div slot="name">不动产单元号</div>
                <textarea
                  slot="content" v-model="propertyInfo.real_unit_number" cols="22" rows="1"
                  readonly
                  placeholder=""
                  @input="addRow(propertyInfo.real_unit_number,$event)"/>
              </item>
              <item>
                <div slot="name">权利类型</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_type" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.right_type,$event)"/>
              </item>
              <item>
                <div slot="name">权利性质</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_property" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.right_property,$event)"/>
              </item>
              <item>
                <div slot="name">用途</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_purpose" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.house_purpose,$event)"/>
              </item>
              <item>
                <div slot="name">面积</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_area" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.house_area,$event)"/>
              </item>
              <item>
                <div slot="name">使用期限</div>
                <textarea
                  slot="content" v-model="propertyInfo.land_use_limit" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.land_use_limit,$event)"/>
              </item>
              <item>
                <div slot="name">权利其他状况</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_others" cols="22" rows="1"
                  readonly
                  placeholder="" @input="addRow(propertyInfo.right_others,$event)"/>
              </item>
            </list-item>
          </div>
        </div>
      </div>
    </h-content>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      bp_type: '',
      list: {},
      houseImg: '',
      carImg: '',
      estateImg: '',
      house_id: '',
      car_id: '',
      estate_id: '',
      houseImgUpload: '',
      carImgUpload: '',
      estateImgUpload: '',
      houseFlag: false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
      carFlag: false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
      estateFlag: false, // 不动产权证查看标识，为false则用查询出来的，为true则用拍照出来的
      isUploadHouse: false, // 房产证修改标识
      isUploadCar: false, // 行驶证修改标识
      isUploadEstate: false, // 不动产权证修改标识
      estateAttachmentId: '',
      houseAttachmentId: '',
      carAttachmentId: '',
      propertyInfo: {
        bp_id: this.document_id,
        right_person: '',
        public_situation: '',
        house_located: '',
        real_unit_number: '',
        right_type: '',
        right_property: '',
        house_purpose: '',
        house_area: '',
        land_use_limit: '',
        right_others: '',
      },
      hauseInfo: {
        bp_id: this.document_id,
        house_owner: '',
        public_situation: '',
        house_located: '',
        regist_date: '',
        house_property: '',
        plan_purpose: '',
        house_layers: '',
        built_area: '',
        built_in_area: '',
        others: '',
        land_number: '',
        land_get_method: '',
        land_use_limit: '',
      },
      carInfo: {
        bp_id: this.document_id,
        vehicle_identify_num: '',
        address: '',
        brand_model_number: '',
        start_date: '',
        vehicle_type: '',
        owner: '',
        use_nature: '',
        engine_number: '',
        plate_number: '',
        regist_date: '',
        words_result_num: '',
        success: '',
      },
      upload_list: [],
      cddItemList: [], // 资料清单列表
      dowload_list: [],
    }
  },
  props: {
    document_id: String,
    document_name: String,
  },
  computed: {
    isApproved () {
      return window.localStorage.user_bp_status === 'APPROVED'
    },
  },
  created () {
    this.getHouseInfo()
    this.getEstateInfo()
    this.getCarInfo()
    this.loadItemList(true)
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'NPInvoiceInfo' && window.localStorage.from === 'true') {
        vm.propertyInfo = {
          bp_id: this.document_id,
          right_person: '',
          public_situation: '',
          house_located: '',
          real_unit_number: '',
          right_type: '',
          right_property: '',
          house_purpose: '',
          house_area: '',
          land_use_limit: '',
          right_others: '',
        }
        vm.hauseInfo = {
          house_owner: '',
          public_situation: '',
          house_located: '',
          regist_date: '',
          house_property: '',
          plan_purpose: '',
          house_layers: '',
          built_area: '',
          built_in_area: '',
          others: '',
          land_number: '',
          land_get_method: '',
          land_use_limit: '',
          bp_id: this.document_id,
        }
        vm.carInfo = {
          vehicle_identify_num: '',
          address: '',
          brand_model_number: '',
          start_date: '',
          vehicle_type: '',
          owner: '',
          use_nature: '',
          engine_number: '',
          plate_number: '',
          regist_date: '',
          words_result_num: '',
          success: '',
          bp_id: this.document_id,
        }
        vm.houseImgUpload = ''
        vm.carImgUpload = ''
        vm.estateImgUpload = ''
        vm.houseImg = ''
        vm.carImg = ''
        vm.estateImg = ''
        vm.houseFlag = false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.carFlag = false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.estateFlag = false, // 不动产权证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.isUploadHouse = false, // 房产证修改标识
        vm.isUploadCar = false, // 行驶证修改标识
        vm.isUploadEstate = false, // 不动产权证修改标识
        vm.bp_type = window.localStorage.bp_type
        setTimeout(() => {
          vm.loadItemList(true)
          vm.getCarInfo()
          // vm.getHouseInfo()
          // vm.getEstateInfo()
        }, 0)
      } else if (from.name === 'NPInvoiceInfo' && window.localStorage.from === 'false') {
        vm.propertyInfo = {
          bp_id: this.document_id,
          right_person: '',
          public_situation: '',
          house_located: '',
          real_unit_number: '',
          right_type: '',
          right_property: '',
          house_purpose: '',
          house_area: '',
          land_use_limit: '',
          right_others: '',
        }
        vm.hauseInfo = {
          house_owner: '',
          public_situation: '',
          house_located: '',
          regist_date: '',
          house_property: '',
          plan_purpose: '',
          house_layers: '',
          built_area: '',
          built_in_area: '',
          others: '',
          land_number: '',
          land_get_method: '',
          land_use_limit: '',
          bp_id: this.document_id,
        }
        vm.carInfo = {
          vehicle_identify_num: '',
          address: '',
          brand_model_number: '',
          start_date: '',
          vehicle_type: '',
          owner: '',
          use_nature: '',
          engine_number: '',
          plate_number: '',
          regist_date: '',
          words_result_num: '',
          success: '',
          bp_id: this.document_id,
        }
        vm.houseImgUpload = ''
        vm.carImgUpload = ''
        vm.estateImgUpload = ''
        vm.houseImg = ''
        vm.carImg = ''
        vm.estateImg = ''
        vm.houseFlag = false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.carFlag = false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.estateFlag = false, // 不动产权证查看标识，为false则用查询出来的，为true则用拍照出来的
        vm.isUploadHouse = false, // 房产证修改标识
        vm.isUploadCar = false, // 行驶证修改标识
        vm.isUploadEstate = false, // 不动产权证修改标识
        vm.bp_type = window.localStorage.bp_type
        vm.loadItemList(false)
      }
    })
  },
  updated () {
    let myArea = document.querySelectorAll('textarea')
    myArea.forEach(i => {
      let num = Math.ceil((i.scrollHeight - 42) / 20)
      if (num > 0) {
        i.rows = num + 2
      }
    })
  },
  methods: {
    addRow (e, event) {
      // let num = Math.ceil((el.target.scrollHeight - 42) / 20)
      // if (num > 0) {
      //   el.target.rows = num + 2
      // }
      if (e) {
        let addNum = Math.ceil(e.length / 16)
        if (addNum === 0) {
          event.target.rows = 1
        } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
          event.target.rows = addNum + 1
        }
      }
    },
    async saveEstateInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_real_estate_save'
      let isSaveCar = await vm.saveCarInfo()
      let param = {
        master: vm.propertyInfo,
      }
      if (isSaveCar) {
        hlsPopup.showLoading('请稍候')
        let res = await vm.$post(url, param)
        if (res.result === 'S') {
          vm.hlsPopup.hideLoading()
          return true
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      }
    },
    async saveCarInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_vehicleLicense_save'
      let param = {
        master: vm.carInfo,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      if (res.result === 'S') {
        vm.hlsPopup.hideLoading()
        return true
      } else {
        hlsPopup.showLongCenter(res.message)
      }
    },
    async getCarInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_vehicleLicense_query'
      let flag = await vm.getEstateInfo()
      let param = {
        bp_id: this.document_id,
      }
      // hlsPopup.showLoading('请稍候')
      if (flag) {
        let res = await vm.$post(url, param)
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.carInfo, res.info)
          return true
        } else {
          hlsPopup.showLongCenter(res.message)
          return false
        }
      }
    },
    async getEstateInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_real_estate_query'
      let flag = await vm.getHouseInfo()
      let param = {
        bp_id: this.document_id,
      }
      // hlsPopup.showLoading('请稍候')
      if (flag) {
        let res = await vm.$post(url, param)
        // vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.propertyInfo, res.info)
          return true
        } else {
          hlsPopup.showLongCenter(res.message)
          return false
        }
      }
    },
    async saveHouseInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_house_info_save'
      let isSaveEstate = await vm.saveEstateInfo()
      let param = {
        master: vm.hauseInfo,
      }
      hlsPopup.showLoading('请稍候')
      if (isSaveEstate) {
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            /* vm.$router.push({
              name: 'NPBankInfo',
            }) */
            vm.attachmentCheck()
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    attachmentCheck () {
      // let vm = this
      // let url = process.env.basePath + 'bp_attachment_check'
      // let param = {
      //   bp_id: window.localStorage.getItem('bp_id'),
      // }
      // vm.hlsPopup.showLoading('正在校验数据')
      // vm.hlsHttp.post(url, param).then(function (res) {
      //   vm.hlsPopup.hideLoading()
      //   if (res.result === 'S') {
      this.$router.push({
        name: 'NPBankInfo',
      })
      //   } else {
      //     hlsPopup.showError(res.message)
      //   }
      // })
    },
    async getHouseInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_house_info_query'
      let param = {
        bp_id: this.document_id,
      }
      hlsPopup.showLoading('请稍候')
      let res = await vm.$post(url, param)
      // vm.hlsPopup.hideLoading()
      if (res.result === 'S') {
        Object.assign(vm.hauseInfo, res.info)
        return true
      } else {
        hlsPopup.showLongCenter(res.message)
        return false
      }
    },
    houseIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/house'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.data
        vm.hauseInfo.house_owner = result.house_owner.word
        vm.hauseInfo.public_situation = result.public_situation.word
        vm.hauseInfo.house_located = result.house_located.word
        vm.hauseInfo.regist_date = result.regist_date.word
        vm.hauseInfo.house_property = result.house_property.word
        vm.hauseInfo.plan_purpose = result.plan_purpose.word
        vm.hauseInfo.house_layers = result.house_layers.word
        vm.hauseInfo.built_area = result.built_area.word
        vm.hauseInfo.built_in_area = result.built_in_area.word
        vm.hauseInfo.others = result.others.word
        vm.hauseInfo.land_number = result.land_number.word
        vm.hauseInfo.land_get_method = result.land_get_method.word
        vm.hauseInfo.land_use_limit = result.land_use_limit.word
      })
    },
    carIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/vehicleLicense'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.words_result
        vm.carInfo.vehicle_identify_num = result.车辆识别代号.words
        vm.carInfo.address = result.住址.words
        vm.carInfo.brand_model_number = result.品牌型号.words
        vm.carInfo.start_date = result.发证日期.words
        vm.carInfo.vehicle_type = result.车辆类型.words
        vm.carInfo.owner = result.所有人.words
        vm.carInfo.use_nature = result.使用性质.words
        vm.carInfo.engine_number = result.发动机号码.words
        vm.carInfo.regist_date = result.注册日期.words
        vm.carInfo.plate_number = result.号牌号码.words
        vm.carInfo.success = res.success
      })
    },
    estateIdentify (fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别')
      let url = process.env.ocrPath + '/baidu/ocr/houseRight'
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        let result = res.result.data
        vm.propertyInfo.right_person = result.right_person.word
        vm.propertyInfo.public_situation = result.public_situation.word
        vm.propertyInfo.house_located = result.house_located.word
        vm.propertyInfo.real_unit_number = result.real_unit_number.word
        vm.propertyInfo.right_type = result.right_type.word
        vm.propertyInfo.right_property = result.right_property.word
        vm.propertyInfo.house_purpose = result.house_purpose.word
        vm.propertyInfo.house_area = result.house_area.word
        vm.propertyInfo.land_use_limit = result.land_use_limit.word
        vm.propertyInfo.right_others = result.right_others.word
      })
    },
    takePicture (ocrType, type) {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          if (ocrType === 'HOUSE_CARD') {
            vm.houseImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.houseImgUpload = imgUrl[0]
            vm.isUploadHouse = true
            vm.houseIdentify(imgUrl[0])
          } else if (ocrType === 'CAR_CARD') {
            vm.carImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.carImgUpload = imgUrl[0]
            vm.isUploadCar = true
            vm.carIdentify(imgUrl[0])
          } else if (ocrType === 'REAL_EST_CERTIFICATE') {
            vm.isUploadEstate = true
            vm.estateImg = hlsUtil.convertImageUrl(imgUrl[0])
            vm.estateImgUpload = imgUrl[0]
            vm.estateIdentify(imgUrl[0])
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    imgUploadOpenCamera (description, check_id) {
      let vm = this
      let obj = {
        pkvalue: check_id,
        source_type: 'PRJ_CDD_ITEM_CHECK',
        picture: '',
        check_id: check_id,
        filePath: '',
        attachment_id: '',
        user_id: 1,
        fileName: description + '_' + new Date().getTime(),
      }
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgdata) {
        obj.picture = hlsUtil.convertImageUrl(imgdata)
        obj.filePath = imgdata
        let list = []
        list.push(obj)
        // vm.upload_list.push(obj)
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list)
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    imgUploadTakePicture (description, check_id) {
      let vm = this
      let cameraoptions = {
        quality: 100,
      }
      let success = function (imgUrl) {
        var list = []
        for (let i = 0; i < imgUrl.length; i++) {
          let obj = {
            pkvalue: check_id,
            source_type: 'PRJ_CDD_ITEM_CHECK',
            picture: '',
            check_id: check_id,
            filePath: '',
            attachment_id: '',
            user_id: 1,
            fileName: description + '_' + new Date().getTime(),
          }
          obj.picture = hlsUtil.convertImageUrl(imgUrl[i])
          obj.filePath = imgUrl[i]
          list.push(obj)
        }
        // 拍完一张立马执行保存图片逻辑
        vm.save_picture(list)
      }
      let error = function () {}
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 图片保存
    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()
      }
    },
    // 移除图片
    remove_pic (attachment_id, index) {
      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)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    remove_upload_list (attachment_id, index) {
      let vm = this
      vm.upload_list.remove(index)
      vm.upload_list.sort()
    },
    // 图片上传入口
    imgUploadShow (description, check_id) {
      let vm = this
      // vm.upload_list = []
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.imgUploadOpenCamera(description, check_id)
          } else {
            vm.imgUploadTakePicture(description, check_id)
          }
        },
      })
    },
    // 查看大图
    showBigPicture (pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100% !important',
      })
    },
    delete_pic (attachment_id) {
      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_dowload_list(attachment_id)
        } else if (res.result === 'E') {
          hlsPopup.showShortCenter(res.message)
        }
      })
    },
    loadItemList (flag) {
      let vm = this
      vm.dowload_list = []
      let bpId = this.document_id
      if (bpId === 'undefined') {
        bpId = null
      }
      let url = process.env.basePath + 'prj_cdd_check_list'
      let param = {
        master: {
          document_id: bpId,
          document_table: 'HLS_BP_MASTER',
          tab_group: 'HLS_NP',
        },
      }
      vm.hlsPopup.showLoading('请稍候')
      // if (flag) {
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          var listTemp = [...res.lists]
          listTemp.forEach(item => {
            switch (item.cdd_item) {
              case 'HOUSE_CARD': // 房产证
                vm.house_id = item.check_id
                break
              case 'CAR_CARD': // 承租人身份证背面
                vm.car_id = item.check_id
                break
              case 'REAL_EST_CERTIFICATE': // 承租人身份证背面
                vm.estate_id = item.check_id
                break
              default:
                break
            }
          })
          vm.cddItemList = res.lists.filter(i => {
            return i.description.indexOf('身份证') === -1
          })
          // 查询图片
          if (flag) {
            vm.cddItemList.forEach((item, index) => {
              vm.load_picture(item.check_id, index, item.cdd_item)
            })
          }
        }
      })
      // }
    },
    delete_pic_to_ocr (attachment_id) {
      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,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        hlsPopup.hideLoading()
        if (res.result === 'S') {

        } else if (res.result === 'E') {
        }
      })
    },
    load_picture (check_id, index, cdd_item) {
      let vm = this
      let url =
        process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
      let param = {
        check_id: check_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$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
          })
          switch (cdd_item) {
            case 'HOUSE_CARD': // 房产证
              if (!vm.houseFlag) {
                vm.houseImg = res.lists[0].url
              }
              vm.houseAttachmentId = res.lists[0].attachment_id
              break
            case 'CAR_CARD': // 行驶证
              if (!vm.carFlag) {
                vm.carImg = res.lists[0].url
              }
              vm.carAttachmentId = res.lists[0].attachment_id
              break
            case 'REAL_EST_CERTIFICATE': // 行驶证
              if (!vm.estateFlag) {
                vm.estateImg = res.lists[0].url
              }
              vm.estateAttachmentId = res.lists[0].attachment_id
              break
            default:
              vm.dowload_list.push(res.lists)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less">
#accessory {
  textarea{
    color: #666;
    resize: none;
  }
    textarea::placeholder{
    text-align: right;
  }
  .userInfo {
    height: 45px;
    line-height: 45px;
    color: @headerColor;
    margin-top: -10px;
    font-size: 15px;
    margin-left: 16px;
    position: relative;
  }
  .userInfo::before {
    content: "";
    display: block;
    width: 4px;
    height: 20px;
    background-color: @headerColor;
    position: absolute;
    left: -15px;
    top: 12px;
  }
  .card {
    padding-bottom: 8px;
    height: auto;
    background-color: #fff;
    margin-bottom: 10px;

    display: flex;
    flex-direction: column;
    .card-desc {
      color: #656464;
      font-size: 13px;
      line-height: 18px;
      padding-top: 8px;
      display: block;
      margin-left: 16px;
    }
    .img-content {
      /*display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;*/
    }
    .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;
          margin-left: 5px;
        }
      }
      img {
        /*width: 88px;
          height: 88px;*/
        width: 100%;
        height: 100%;
      }
      .upload-btn {
        width: 24px;
        height: 24px;
      }
    }
  }
  .save {
    color: #fff;
    border-radius: 4px;
    background-color: @headerColor;
  }
}
</style>