<template>
  <div class="auto" style="margin-top: 5px;" >
    <div class="panel" style="padding: 10px 10px 5px 10px;">
      <div class="panel-body panel-self" style="background-color: #F8F8F8;width: 100%;height: 260px;position: relative">
        <div class="row" style="height: 240px;overflow: scroll;top: 1px">
          <div class="col-xs-4 col-sm-3 col-md-2"  v-for="img in model">
            <img-self :src="img.f_overall_path" alt="宣传照片" :width="150" :height="200"></img-self>
            <img src="../../assets/remove.png"  @click="remove(img)" class="imgs" style="width: 30px;" alt="">
          </div>
        </div>
        <div class="row text-right div-photo" >
          <button type="button" name="button" class="btn btn-photo" @click="takePic()">拍照</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import * as Util from '../Util'

  export default {
    props: {
      // 存放照片的数组
      model: {
        type: Array
      },
      show:true
    },
    data () {
      return {
        // 拍照时的文件名
        fileName: ''
      }
    },
    methods: {
      // 从图片中删除
      remove (row) {
        HostApp.delfile(row.f_overall_path)
        var len = this.model.length;
        for(var i=0;i<len;i++){
          //删除掉所有为2的元素
          if(this.model[i].f_overall_path==row.f_overall_path){
            this.model.splice(i,1);
          }
        }
      },
      // 拍照后，回传参数获取
      // self: 调用时的组件
      getCallBack() {
        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
          let self = window.iosApp.__this__;
          window.iosApp.__callback__ = null;
          window.iosApp.__this__ = null;
          return self;
        } else {
          let self = HostApp.__this__;
          HostApp.__callback__ = null;
          HostApp.__this__ = null;
          return self;
        }
      },
      // fileName: 回传文件名,传入的带安卓路径url
      // prop: 传入的字段名，没做改动
      cameraCallBack(prop, fileName) {
        // alert("callback!!!!!!!!!!!!!!!!!!--start")
        // 当前this只能通过HostApp.__tis__获取
        let self = this.getCallBack(this)
        // 添加新图片
        console.log('新增照片信息')
        self.model.push({
          f_create_time:Util.toStandardTimeString(),
          f_overall_path: fileName
        })
        console.log('新增照片信息结束')
        // alert("callback!!!!!!!!!!!!!!!!!!--end")
      },
      // 拍照
      // self: 进行拍照的组件
      androidTakePic(self, callback, fileName) {
        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
          window.iosApp.__callback__ = callback;
          window.iosApp.__this__ = self;
          // prop代表给那个部分进行拍照
          let prop = 'handMeter';
          let idx = 'aofeng';
          let title = '安检小区宣传拍照';
          // 维修人名称
          let name = Vue.user.name;
          window.prompt("_open_a_page",JSON.stringify({type: 'boomerang',
            page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
            param: {
              file: fileName,
              requestCode: 111,
              callback:'javascript:this.iosApp.__callback__("' + prop +'", "%s");',
              watermark: title + '\t时间：' + Util.toStandardTimeString() + '\t' + name
            }
          }));
        } else {
          HostApp.__callback__ = callback;
          HostApp.__this__ = self;
          // prop代表给那个部分进行拍照
          let prop = 'handMeter';
          let idx = 'aofeng';
          let title = '安检小区宣传拍照';
          // 维修人名称
          let name = Vue.user.name;
          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' + name
            }
          })
        }
      },
      takePic() {
        let prop = 'handMeter'
        let idx = 'aofeng'
        this.fileName = Util.guid() + 'f_overall_path' + '.jpg'
        this.androidTakePic(this, this.cameraCallBack, this.fileName)
      },
      getimgstr(val){
        if(!val){
          return ''
        }
        if(Vue.android){
          let path = val.android_file + '?' + Math.random()
          return path
        }
        this.$showAlert(`照片`, 'danger')
      }
    },
  }
</script>
<style>
  .panel-self{
    border-radius: 5px;
    border:1px solid #c5e1f7;
    background-color: #F2F6FA;
  }
  .btn-photo{
    border-radius: 7px;
    background-color: #7dc1f4;
    color: #FFFFFF;
    font: 15px PingFang-SC-Bold;
    height: 20%;
  }
  .div-photo{
    width: auto;
    height: auto;
    /* margin-top: 10px; */
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
</style>
