<template>
  <div style="height: 100%">
    <div class="panel auto" >
      <div class="panel-heading" @click="selectVal('基本信息')" style="background-color: #ffffff">
        <span class="spanboder" >
          <img  src="../../../assets/person.png" style="width: 22px;margin-right: 8px;">基本信息
          <img class="butt3" :src="imgback('基本信息')">
        </span>
      </div>
      <div class="panel-body " id="upuserinfo_sel" v-show="headername=='基本信息'">
        <div class="row auto" style="margin: 5px 0">
          <labe class="righttxt">用户地址:</labe><!--<input type="text" class="form-control rightipt" readonly v-model="getaddress()"  />-->
          <textarea class="form-control rightipt" : style="height: 80px" v-model="model.f_address"></textarea>
        </div>
        <div class="row auto" style="margin: 5px 0">
          <labe class="righttxt">备&ensp;&ensp;&ensp;&ensp;注:</labe><textarea class="form-control rightipt" style="height: 150px" v-model="model.f_comments"></textarea><!--<input type="text" class="form-control rightipt" v-model="userinfo.baseinfo.base.f_remark"  />-->
        </div>
        <div class="row auto" style="margin: 5px 0">
          <label class="text-left font">总体安检照片:</label>

          <div class="auto" >
            <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" style="margin-bottom: 35px" v-for="(index,img) in model.f_overall_imgs">
                    <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;margin-top: -80px" alt="">
                  </div>
                </div>
                <div class="row text-right div-photo">
                  <button v-show="model.f_overall_imgs.length<3" 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"  @click="delfile('f_overall_path', img.f_overall_path)" style="width: 25%;"></img>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--<div class="row auto" style="margin: 5px 0" v-show="addressType=='特殊地址'">
          <labe class="righttxt">新&ensp;地&ensp;址:</labe>&lt;!&ndash;<input type="text" class="form-control rightipt" v-model="userinfo.addressinfo.f_address"  />&ndash;&gt;
          <textarea class="form-control rightipt" style="height: 80px" v-model="getAddressTS"></textarea>
        </div>-->
      </div>
    </div>
    <div class="panel auto">
      <div class="panel-body">
        <div style="display: flex;justify-content: center;">
          <button class="col-sm-3 btn btn-primary" @click="upload">上传信息</button>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import * as Util from '../../../components/Util'
import Vue from 'vue'
export default {
    title:"无计划到访",
    data(){
      return {
        headername:'基本信息',
        model:{
          f_address:"",
          f_overall_imgs:[],
          f_orgid:Vue.user.orgid,
          f_upload_date:Util.toStandardTimeString(),
          f_checker_name:Vue.user.name,
          f_checker_id:Vue.user.id,
        }
      }
    },
    methods:{
      delfile(prop, fileName, index) {
        if (fileName == Vue.nopic)
          return
        else {
          if (prop == 'f_overall_path') {
            this.model.f_overall_imgs.splice(index, 1)
            HostApp.delfile(fileName)
          } else {
            HostApp.delfile(fileName)
            this.model[prop] = Vue.nopic
          }
        }
      },
      imgback(header){
        if(this.headername==header){
          return require('../../../assets/xiangxia1.png')
        }else{
          return require('../../../assets/xiangyou1.png')
        }
        this.headername=header
      },
      selectVal(header){
        if(this.headername==header){
          this.headername=''
        }else{
          this.headername=header
        }
      },
      cameraCallBack(prop, fileName) {
        if (prop == 'f_overall_path') {
          let f_overall_path = fileName + '?' + Math.random()
          HostApp.__this__.model.f_overall_imgs.push({
            f_overall_path: f_overall_path
          })
        } else {
          HostApp.__this__.model[prop] = fileName + '?' + Math.random()
        }
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      upload(e){
        if(!this.model.f_address){
          this.$showMessage("请填写地址")
          return
        }
        if(this.model.f_overall_imgs.length===0){
          this.$showMessage("至少拍一张照片")
          return
        }

        for (let i = 0; i < this.model.f_overall_imgs.length; i++) {
          this.model[`f_daofang${i+1}_path`] = this.model.f_overall_imgs[i].f_overall_path
        }
        delete this.model.f_overall_imgs
        HostApp.__this__ = this
        HostApp.logicWithHint({
          // logic别名，key必须为logic
          'logic': "saveVisitPaper",
          // 回调执行方法名，key必须为callback
          'callback': 'javascript:HostApp.__this__.saveCallBack()',
          // logic执行需要的业务参数
          'data': this.model,
          // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
          // 执行回调方法传入key为backresult
          // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
          'backresult':1
        })
      },
      saveCallBack(jo){
        if(jo.state=='ok'){
          this.$showMessage("上传成功")
          this.$dispatch('confirm')
        }else{
          this.$showMessage("上传失败")
        }

      },
      takePic(prop, title, index) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        ////tag
        ////tag
        let fileName
        if (prop == 'f_overall_path') {
          if (!this.model.f_overall_imgs[index] || this.model.f_overall_imgs[index].f_overall_path.includes("nopic.png")) {
            fileName = Util.guid() + '-' + prop + '.jpg'
          } else {
            fileName = Util.getFileName(this.model.f_overall_imgs[index].f_overall_path)
          }
        } else {
          if (!this.model[prop] || this.model[prop].includes("nopic.png")) {
            fileName = Util.guid() + '-' + prop + '.jpg'
          } else {
            fileName = Util.getFileName(this.model[prop])
          }
        }

        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 + '\t' + this.model.f_userinfo_code+ '\t' + this.model.f_user_name+ '\t' + this.model.f_address
          }
        })
      },
    }
}
</script>
<style lang="less" scoped>
.butt3 {
  float: right;
  width: 12px;
  margin: 1% 2% 0 0;
}
.rightipt{
  width: 60%;
  float: left;
  margin-left: 5%;
}
.righttxt{
  border: none;
  margin-left: 5px;
  /*border-left: 5px solid #A2C2EB;*/
  float: left;
  width: 25%;
  margin-bottom: 3px;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}
.tit1{
  /*background: #ffffff url('../../assets/用户姓名.png') no-repeat fixed center;*/
  background-image: url('../../../assets/用户姓名.png');
  background-repeat: no-repeat;
  background-position: center;
}
.spanboder{
  border-bottom:2px solid #499edf;
  padding-bottom: 8px
}
#upuserinfo_sel /deep/ ul{
  width: 100% !important;
  left:0 !important;
}
.btn-photo {
  border: 0;
  border-radius: 7px;
  background-color: #7dc1f4;
  font: 15px PingFang-SC-Bold;
  height: 20%;
}
.panel-self {
  border-radius: 10px;
  border: 1px solid #499EDF;
  background-color: #F8F8F8;
}
.div-photo {
  width: auto;
  height: auto;
  /* margin-top: 10px; */
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>
