<template>
  <h-view id="accessory" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>附件信息</span>
      </div>
    </h-header>
    <h-content>
      <div class="userInfo">附件信息</div>
      <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">
              <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" @click="imgUploadShow(list.description,list.check_id)">
              <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" @click="ocrShow(list.cdd_item, '')">
              <img src="@/assets/userBind/camera.png" class="upload-btn" >
            </div>
            <div v-if="houseImg&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
              <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" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">共有情况</div>
                <input slot="content" v-model="hauseInfo.public_situation" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">房屋坐落</div>
                <input slot="content" v-model="hauseInfo.house_located" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">登记时间</div>
                <input slot="content" v-model="hauseInfo.regist_date" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">房屋性质</div>
                <input slot="content" v-model="hauseInfo.house_property" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">规划用途</div>
                <input slot="content" v-model="hauseInfo.plan_purpose" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">总层数</div>
                <input slot="content" v-model="hauseInfo.house_layers" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">建筑面积</div>
                <input slot="content" v-model="hauseInfo.built_area" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">套内建筑面积</div>
                <input slot="content" v-model="hauseInfo.built_in_area" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">其他</div>
                <input slot="content" v-model="hauseInfo.others" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">地号</div>
                <input slot="content" v-model="hauseInfo.land_number" placeholder="识别房产证自动填充" >
              </item>
              <item :proportion="[1,1]">
                <div slot="name">土地使用权取得方式</div>
                <input slot="content" v-model="hauseInfo.land_get_method" placeholder="识别房产证自动填充" >
              </item>
              <item>
                <div slot="name">土地使用年限</div>
                <input slot="content" v-model="hauseInfo.land_use_limit" 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" @click="ocrShow(list.cdd_item, '')">
                <img src="@/assets/userBind/camera.png" class="upload-btn" >
              </div>
              <div
                v-if="carImg&&!isApproved"
                class="card-upload plus"
                @click="ocrShow(list.cdd_item, '')"
              >
                <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"
                  v-model="carInfo.vehicle_identify_num"
                  placeholder="识别行驶证自动填充"
                >
              </item>
              <item>
                <div slot="name">住址</div>
                <input slot="content" v-model="carInfo.address" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">品牌型号</div>
                <input slot="content" v-model="carInfo.brand_model_number" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">发证日期</div>
                <input slot="content" v-model="carInfo.start_date" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">车辆类型</div>
                <input slot="content" v-model="carInfo.vehicle_type" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">所有人</div>
                <input slot="content" v-model="carInfo.owner" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">使用性质</div>
                <input slot="content" v-model="carInfo.use_nature" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">发动机号码</div>
                <input slot="content" v-model="carInfo.engine_number" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">号牌号码</div>
                <input slot="content" v-model="carInfo.plate_number" placeholder="识别行驶证自动填充" >
              </item>
              <item>
                <div slot="name">注册日期</div>
                <input slot="content" v-model="carInfo.regist_date" 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" @click="ocrShow(list.cdd_item, '')">
                <img src="@/assets/userBind/camera.png" class="upload-btn" >
              </div>
              <div
                v-if="estateImg&&!isApproved"
                class="card-upload plus"
                @click="ocrShow(list.cdd_item, '')"
              >
                <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"
                  v-model="propertyInfo.right_person"
                  placeholder="识别不动产权证自动填充"
                >
              </item>
              <item>
                <div slot="name">共有情况</div>
                <input slot="content" v-model="propertyInfo.public_situation" placeholder="识别不动产权证自动填充" >
              </item>
              <item>
                <div slot="name">坐落</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_located" cols="25" rows="2"
                  contenteditable="true"
                  placeholder="识别不动产权证自动填充"
                  @input="addRow" />
              </item>
              <item>
                <div slot="name">不动产单元号</div>
                <textarea
                  slot="content" v-model="propertyInfo.real_unit_number" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充"
                  @input="addRow"/>
              </item>
              <item>
                <div slot="name">权利类型</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_type" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
              <item>
                <div slot="name">权利性质</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_property" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
              <item>
                <div slot="name">用途</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_purpose" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
              <item>
                <div slot="name">面积</div>
                <textarea
                  slot="content" v-model="propertyInfo.house_area" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
              <item>
                <div slot="name">使用期限</div>
                <textarea
                  slot="content" v-model="propertyInfo.land_use_limit" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
              <item>
                <div slot="name">权利其他状况</div>
                <textarea
                  slot="content" v-model="propertyInfo.right_others" cols="25" rows="2"
                  placeholder="识别不动产权证自动填充" @input="addRow"/>
              </item>
            </list-item>
          </div>
        </div>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="save" @click.native="save">下一步</tab-button>
    </bottom-tab>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      bp_type: '',
      list: {},
      houseImg: '',
      carImg: '',
      estateImg: '',
      house_id: '',
      car_id: '',
      estate_id: '',
      houseFlag: false, // 房产证查看标识，为false则用查询出来的，为true则用拍照出来的
      carFlag: false, // 行驶证查看标识，为false则用查询出来的，为true则用拍照出来的
      estateFlag: false, // 不动产权证查看标识，为false则用查询出来的，为true则用拍照出来的
      isUploadHouse: false, // 房产证修改标识
      isUploadCar: false, // 行驶证修改标识
      isUploadEstate: false, // 不动产权证修改标识
      estateAttachmentId: '',
      houseAttachmentId: '',
      carAttachmentId: '',
      propertyInfo: {
        bp_id: window.localStorage.getItem('bp_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: window.localStorage.getItem('bp_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: window.localStorage.getItem('bp_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: [],
    }
  },
  computed: {
    isApproved () {
      return window.localStorage.user_bp_status === 'APPROVED'
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'NPInvoiceInfo' && window.localStorage.from === 'true') {
        vm.propertyInfo = {bp_id: window.localStorage.getItem('bp_id')}
        vm.hauseInfo = {bp_id: window.localStorage.getItem('bp_id')}
        vm.carInfo = {bp_id: window.localStorage.getItem('bp_id')}
        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()
          vm.getCarInfo()
          vm.getHouseInfo()
          vm.getEstateInfo()
        }, 0)
      } else if (from.name === 'NPInvoiceInfo' && window.localStorage.from === 'false') {
        vm.propertyInfo = {bp_id: window.localStorage.getItem('bp_id')}
        vm.hauseInfo = {bp_id: window.localStorage.getItem('bp_id')}
        vm.carInfo = {bp_id: window.localStorage.getItem('bp_id')}
        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
      }
    })
  },
  updated () {
    let vm = this
    let myArea = document.querySelectorAll('textarea')
    myArea.forEach(i => {
      let num = Math.round((i.scrollHeight - 42) / 20)
      if (num > 0) {
        i.rows = num + 2
      }
    })
  },
  methods: {
    addRow (el) {
      let num = Math.round((el.target.scrollHeight - 42) / 20)
      if (num > 0) {
        el.target.rows = num + 2
      }
    },
    async saveEstateInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_real_estate_save'
      let param = {
        master: vm.propertyInfo,
      }
      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)
      }
    },
    getCarInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_vehicleLicense_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.carInfo, res.info)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getEstateInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_real_estate_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.propertyInfo, res.info)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    async saveHouseInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_house_info_save'
      let isSaveCar = await vm.saveCarInfo()
      let isSaveEstate = await vm.saveEstateInfo()
      let param = {
        master: vm.hauseInfo,
      }
      hlsPopup.showLoading('请稍候')
      if (isSaveCar && 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') {
          vm.$router.push({
            name: 'NPBankInfo',
          })
        } else {
          hlsPopup.showError(res.message)
        }
      })
    },
    getHouseInfo () {
      let vm = this
      let url = process.env.basePath + 'bp_house_info_query'
      let param = {
        bp_id: window.localStorage.getItem('bp_id'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.hauseInfo, res.info)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    save () {
      let vm = this
      if (vm.isUploadHouse) {
        vm.houseFlag = true
        vm.delete_pic_to_ocr(vm.houseAttachmentId) // 房产证修改，重新上传
        let list = []
        let obj = {
          pkvalue: vm.house_id,
          source_type: 'PRJ_CDD_ITEM_CHECK',
          picture: '',
          check_id: vm.house_id,
          filePath: vm.houseImg,
          attachment_id: '',
          user_id: 1,
          fileName: '房产证',
        }
        list.push(obj)
        vm.save_picture(list)
        vm.isUploadHouse = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
      }
      if (vm.isUploadEstate) {
        vm.estateFlag = true
        vm.delete_pic_to_ocr(vm.estateAttachmentId) // 房产证修改，重新上传
        let list = []
        let obj = {
          pkvalue: vm.estate_id,
          source_type: 'PRJ_CDD_ITEM_CHECK',
          picture: '',
          check_id: vm.estate_id,
          filePath: vm.estateImg,
          attachment_id: '',
          user_id: 1,
          fileName: '不动产权证',
        }
        list.push(obj)
        vm.save_picture(list)
        vm.isUploadEstate = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
      }
      if (vm.isUploadCar) {
        vm.carFlag = true
        vm.delete_pic_to_ocr(vm.carAttachmentId) // 房产证修改，重新上传
        let list = []
        let obj = {
          pkvalue: vm.car_id,
          source_type: 'PRJ_CDD_ITEM_CHECK',
          picture: '',
          check_id: vm.car_id,
          filePath: vm.carImg,
          attachment_id: '',
          user_id: 1,
          fileName: '行驶证',
        }
        list.push(obj)
        vm.save_picture(list)
        vm.isUploadCar = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
      }
      vm.saveHouseInfo()
    },
    ocrShow (ocrType, type) {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera(ocrType, type)
          } else {
            vm.takePicture(ocrType, type)
          }
        },
      })
    },
    openCamera (ocrType, type) {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          if (ocrType === 'HOUSE_CARD') {
            vm.isUploadHouse = true
            vm.houseImg = imgdata
            vm.houseIdentify(imgdata)
          } else if (ocrType === 'CAR_CARD') {
            vm.isUploadCar = true
            vm.carImg = imgdata
            vm.carIdentify(imgdata)
          } else if (ocrType === 'REAL_EST_CERTIFICATE') {
            vm.isUploadEstate = true
            vm.estateImg = imgdata
            vm.estateIdentify(imgdata)
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter('请拍照')
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    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 = imgUrl[0]
            vm.isUploadHouse = true
            vm.houseIdentify(imgUrl[0])
          } else if (ocrType === 'CAR_CARD') {
            vm.carImg = imgUrl[0]
            vm.isUploadCar = true
            vm.carIdentify(imgUrl[0])
          } else if (ocrType === 'REAL_EST_CERTIFICATE') {
            vm.isUploadEstate = true
            vm.estateImg = 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 = 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 = 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 () {
      let vm = this
      vm.dowload_list = []
      let bpId = window.localStorage.getItem('bp_id')
      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('请稍候')
      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
          })
          // 查询图片
          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
              console.log(vm.houseAttachmentId)
              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 {
  .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>
