<template>
  <div>
    <div class="form-group col-sm-12">
      <label class="text-left font">总体安检其他照片</label>
      <div class="auto">
        <div class="panel" style="padding: 10px 10px 5px 10px;">
          <div class="panel-body panel-self col-xs-12 col-sm-12" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
            <div class="row col-xs-12 col-sm-12 col-md-6" style="height: 240px;overflow: scroll;top: 1px" >
              <div  style="height: auto;" v-for="(index,img) in f_all_imgs">
                <div class="col-xs-4 col-sm-3 col-md-2" v-if="img.title == '其他'" style="margin-bottom: 35px" >
                  <img-self :src="img.f_overall_path" alt="总体安检照片" :width="140" :height="170"></img-self>
                  <img src="../assets/删除.png" @click="delfile('f_overall_path', img.f_overall_path,index,'其他')" style="width: 15px;" alt="">
                </div>
              </div>
            </div>7

            <div class="row col-xs-12 col-sm-12 col-md-6 text-right div-photo">
              <button type="button" name="button" class="btn btn-photo" @click="takePic('f_overall_path', '其他','总体其他安检照片')">拍照</button>
              <!--<button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_overall_path', '总体安检照片1')">拍照</button>-->
              <!--&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_overall_path', img.f_overall_path)" style="width: 25%;"></img>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group col-sm-12">
      <label class="text-left font">总体安检照片</label>
      <span>{{Vue.nopic}}</span>
      <div class="auto">
        <div class="panel">
          <div class="panel-body panel-self col-xs-12 col-sm-12" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
            <div class="row col-xs-12 col-sm-12 col-md-6" style="height: 240px;overflow: scroll;top: 1px" >
              <!--<div  class="col-xs-4 col-sm-3 col-md-2" v-for="(index,img) in f_all_imgs">-->
                <!--<div class="panel-self" style="margin-bottom: 35px" v-if="img.title != '其他'" >-->
                  <div id='img' style="margin: 4% 0 0 11%;">
                    <!--<img-self :src=`rs/getImg/readBlob?id='13337853_402882ad47485b1d01474867334b0d7f_3'` :alt="总体安检照片" :width="140" :height="170"></img-self>-->

                  </div>
                  <!--<img src="../assets/cs0.png" @click="delfile('f_overall_path', img.f_overall_path,index)" style="width: 140px;height:170px" alt="">-->
                  <div class="row col-xs-12 col-sm-12 col-md-6 text-right div-photo">
                    <span>{{img.title}}</span>
                    <button v-if="img.f_overall_path.includes('nopic.png')" type="button" name="button" class="btn btn-photo" @click="takePic(img.type, img.title,index)">拍照</button>
                    <!--<button type="button" name="button" class="btn btn-primary btn-photo" @click="takePic('f_overall_path', '总体安检照片1')">拍照</button>-->
                    <!--&nbsp;&nbsp;&nbsp;&nbsp;<img src="../../../assets/remove.png" :class="style__" @click="delfile('f_overall_path', img.f_overall_path)" style="width: 25%;"></img>-->
                  </div>
                <!--</div>-->
              <!--</div>-->

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <modal :show.sync="true" v-ref:modal :backdrop="isBack">
    <div slot="modal-header" class="modal-header">
      <span class="modal-title font">
        新增设备信息
      </span>
    </div>
    <div slot="modal-body" class="modal-body">
      <div style="width: 95%;margin: auto">
        <form>
            <div class="row" style="margin-top: 6px" >
              <label class="col-xs-4 control-label font text-left">卡号<span>*</span></label>
              <div class="col-xs-8">
                <div>
                  <input type="text" class="form-control" v-model="row.f_item_value" maxlength="20"
                         onkeyup="value=value.replace(/[^\d\.]/g,'')" >
                </div>

                <div  class="col-xs-4">
                  <img src="../assets/saoyisao.png" class="col-xs-4" style="width: 20px;" alt="" @click="saoyisao()" >
                </div>

              </div>
            </div>

        </form>
      </div>
    </div>
  </modal>






  <!--<div class="row"  style="margin-top: 6px">-->
    <!--<label class="col-xs-4 control-label font text-left">燃气表<span>*</span></label>-->
    <!--<div class="col-xs-8">-->
      <!--<input type="text"  style="width:60%" class="form-control " v-model="row.f_item_value" maxlength="20" >-->
      <!--<div class="col-xs-4">-->
        <!--<img src="../assets/saoyisao.png" style="width: 20px;" alt="" @click="saoyisao()" >-->
      <!--</div>-->

    <!--</div>-->
  <!--</div>-->
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  import Util from 'Util'
  export default {
    title: 'test',
    props: ['msg'],
    data () {
      return {
        f_all_imgs:[
          {title:'厨房全景',f_overall_path:'getimg/readBlob?id=13337867_402882ad46b334ac0146f10cebe52132_1',f_create_time:'',type:'f_kitchen_overall_path'},
          {title:'管道全景',f_overall_path:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg',f_create_time:'',type:'f_pipeline_overall_path'},
          {title:'供气合同',f_overall_path:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg',f_create_time:'',type:'f_contract_overall_path'},
          {title:'停气管控',f_overall_path:Vue.nopic,f_create_time:'',type:'f_control_overall_path'},
          {title:'其他',f_overall_path:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg',f_create_time:'',type:'f_other_overall_path'},
          {title:'其他',f_overall_path:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg',f_create_time:'',type:'f_other_overall_path'},
          {title:'其他',f_overall_path:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg',f_create_time:'',type:'f_other_overall_path'}
        ],
        src:'rs/image/file/6fd44474bd9b59622348d8090c52a83c-f_overall_path.jpg'
      }
    },
    methods: {
      cameraCallBack(prop, fileName) {
        if(prop.indexOf('_overall_path')){
          let f_overall_path = fileName + '?' + Math.random()
          for (let img in HostApp.__this__.f_all_imgs) {
            if(HostApp.__this__.f_all_imgs[img].type == 'prop'){
              HostApp.__this__.f_all_imgs[img].f_overall_path= f_overall_path
              HostApp.__this__.f_all_imgs[img].f_create_time= Util.toStandardDateString()
            }
          }
        }else{
          HostApp.__this__.paper[prop] = fileName + '?' + Math.random()
        }
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title,index) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        let fileName
        if(prop.indexOf('_overall_path') != -1){
          if (!this.f_all_imgs[index] || this.f_all_imgs[index].f_overall_path.includes("nopic.png")) {
            fileName = Util.guid() + '-' + prop + '.jpg'
          } else {
            fileName = Util.getFileName(this.f_all_imgs[index].f_overall_path)
          }
        }

        HostApp._open_a_page({
          type: 'boomerang',
          page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
          param: {
            file: fileName,
            requestCode: 111,
            callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");',
            watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + Vue.user.name
          }
        })
      },
      modify () {
        this.$set('model.a特殊', 'aaaa')
      }
    },
    ready(){
      console.log('Vue.nopic',img.f_overall_path == Vue.nopic)
    }
  }
</script>
<style>
  .panel-self{
    border-radius: 5px;
    border:1px solid #c5e1f7;
    background-color: #F2F6FA;
  }
  .text-left{
    text-align:left;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .showInput{
    font: 14px PingFang-SC-Medium;
    color: #666666;
  }
  .info{
    margin-top: 15px;
    border-radius: 5px;
    background-color: #f3faff;
  }
  .btn-photo{
    border: 0;
    border-radius: 7px;
    background-color: #7dc1f4;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .btn-voice{
    border-radius: 7px;
    border: 1px solid #dedede;
    background-color: #f5fbff;
    font: 15px PingFang-SC-Bold;
    color: #499edf;
  }
  .save-btn{
    width: 25%;
    background-color:#499edf;
    border-radius: 6px;
    color: #FFFFFF;
    font: 15px PingFang-SC-Bold;
  }
  .upload-btn{
    width: 25%;
    background-color:#ffffff;
    border: 1px solid #499edf;
    border-radius: 6px;
    color: #499edf;
    font: 15px PingFang-SC-Bold;
  }
  .repair-btn{
    width: 25%;
    border: 1px solid #499edf;
    border-radius: 6px;
    font: 15px PingFang-SC-Bold;
  }
</style>
