<style scoped>
.bg {
  background-color: blue;
  height: 1px;
  border: 0;
}
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.search_input {
  border: 0;
  outline: none;
}
.font{
  font: 15px PingFang-SC-Medium;
  color: #666666;
}
.input-font{
  font: 15px PingFang-SC-Medium;
  color: #333333;
}
.btn-font{
  font:600 16px PingFang-SC-Bold;
  color: #499EDF;
}
.btn-color{
  background-color: #FFFFFF;
  border-radius: 10px ;
  border: 1px solid #499EDF;
}
.app-text {
  font-size: 12px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.yybtn-color{
  background-color:#499edf;
  border-radius: 4px ;
  border: 1px solid #499EDF;
  color: #FFFFFF;
  font: 14px PingFang-SC-Bold;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  color: #499edf;
  font: 14px PingFang-SC-Bold;
  border: 1px solid #499EDF;
}
.button_shrink_top {width: 35px; height: 35px; background-size:100%;background-image: url("../../../static/newStyle/stretch_top.png")}
.button_shrink_bottom {width: 35px; height: 35px;  background-size:100%;background-image: url("../../../static/newStyle/stretch_bottom.png")}
.button_shrink_left {width: 35px; height: 35px;  background-size:100%;background-image: url("../../../static/newStyle/stretch_left.png")}
.button_shrink_right {width: 35px; height: 35px; background-size:100%;background-image: url("../../../static/newStyle/stretch_right.png")}

</style>
<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_userinfo_code" class="search_input input-font"
                       v-model=model.f_userinfo_code condition="f_userinfo_code like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_name" class="font text-left">用户姓名：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_name" class="search_input input-font"
                       v-model=model.f_user_name condition="f_user_name like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/地址.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_address" class="font text-left">地址：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_address" class="search_input input-font"
                       v-model=model.f_address condition="f_address like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_name" class="font text-left">操作员：</label>
              </div>
              <div class="col-xs-8" >
                <v-select :value.sync="model.f_checker_id" v-model='model.f_checker_id'
                          :value-single="true" style="width: 60%"
                          class="select_list select"
                          :options='$parent.$parent.checkersid' placeholder='安检员'
                          close-on-select
                          condition="f_checker_id = '{}'"></v-select>
              </div>
            </div>
            <div class="row app-row" >
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_upload_date" class="font text-left">送气起始：</label>
              </div>
              <div class="col-xs-8" >
                <datepicker id="f_start_date"
                            placeholder= '起始'
                            :value.sync="model.f_staet_date1"
                            :disabled-days-of-Week="[]"
                            v-model="model.f_staet_date1"
                            class="input-font"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            :show-reset-button="reset"
                            condition="f_upload_date>='{}'"
                >
                </datepicker>
              </div>
            </div>
            <div class="row app-row" >
              <div class="col-xs-4">
                <img src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_upload_date" class="font text-left">送气截止：</label>
              </div>
              <div class="col-xs-8" >
                <datepicker id="f_end_date"
                            placeholder= '截止'
                            :value.sync="model.f_end_date1"
                            :disabled-days-of-Week="[]"
                            v-model="model.f_end_date1"
                            class="input-font"
                            :format="'yyyy-MM-dd HH:mm:ss'"
                            :show-reset-button="reset"
                            condition="f_upload_date<='{}'"
                >
                </datepicker>
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="$parent.$parent.search()">查询</button>
              <div style="float: right;margin-right: 3% " class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"  @click="$parent.$parent.hidden()"></div>
            </div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" style="margin-top: 5px;" >
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户编号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_userinfo_code }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left"><b>用户名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{ row.f_user_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="width: 23%;float: left"><b>用户电话:</b></p>
                  <p class="panel-title text-left input-font" style="width: 77%">{{ row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone }}
                    <img src="../../assets/phone.png" style="width: 6%" v-on:click.stop.prevent='$parent.$parent.$parent.makeAPhoneCall(row.f_user_phone2 ? row.f_user_phone2 : row.f_user_phone)'></img>
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="width: 21%;float: left"><b>用户地址:</b></p>
                  <p class="panel-title text-left input-font" style="width: 79%">{{ row.f_address }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>安检状态:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_state }}</p>
                </div>
                <div class="col-xs-6">
                  <p class="panel-title col-xs-5 text-left font"><b>送气时间:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_upload_date}}</p>
                </div>
                <div class="row text-right">
                  <button type="button" class="btn qxbtn-color"
                          @click='$parent.$parent.$parent.gotocheckpaper(row)'>查看</button>
                  <button type="button" class="btn qxbtn-color"
                          @click='$parent.$parent.$parent.imgUp(row)'>图片补充</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <modal v-if="imgUpModalShow" :show.sync="imgUpModalShow" v-ref:modal :large="true"
           :backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="imgUpModalShow = false"><span>&times;</span></button>
        <h4 class="modal-title">图片补充上传</h4>
      </header>
      <article slot="modal-body" class="modal-body clearfix">
        <div class="auto" :class="style__">
          <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 tableImages">
                  <img-self :src="img.path" alt="安检补充照片" :width="140" :height="170"></img-self>
                  <img src="../../assets/删除.png" @click="delfile('path', img.path,index)" style="width: 15px;margin-top: -80px" alt="">
                </div>
              </div>
              <div  style="width: 5%">
                <button type="button" class="btn btn-primary" name="button" @click="takePic('path', '安检补充照片')">拍照</button>
              </div>
            </div>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-primary" @click="uploadPic()">上传</button>
        <button type="button" class="btn btn-primary" @click="imgUpModalShow = false">取消</button>
      </footer>
    </modal>
  </div>
</template>

<script>
import LocalPagedList from '../../plugins/LocalPagedList'
import Vue from 'vue'
import {HttpResetClass, PagedList} from 'vue-client'
import * as Util from '../Util'
import co from 'co'
let select = function* (self) {
  let http = new HttpResetClass()
  let getGasman = yield http.load('POST',`${self.$androidUtil.getProxyUrl()}/rs/search`, {
    source: 'this.getParentByType($department$).getAllChildrens().where(row.getAttributes().get($rolestr$).indexOf($安检员$) != -1))',
    userid: Vue.user.id
  }, {resolveMsg: null, rejectMsg: null})
  //tag
  self.checkersid.push({label: '全部', value: ''})
  getGasman.data.forEach((checker) => {
    self.checkersid.push({label: checker.name, value: checker.id})
  })
}
export default {
  title: '送气计划照片补录',
  data() {
    let model = new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/查找安检单`, 20, {
      f_plan_id: 'this.f_plan_id',
      f_approved: 'this.f_approved',
      f_entry_status: 'this.f_entry',
      f_no_checkplan: 'this.f_no_checkplan',
      f_filialeid: 'this.f_filialeid',
      orderitem: "'f_offsite_time desc'"
    })
    model.f_plan_id = ''
    model.f_entry = ''
    model.f_approved = ''
    model.f_no_checkplan = ''
    model.f_filialeid =Vue.user.orgid
    return {
      checkersid: [],
      model: model,
      tableImages:[],
      paper_id:'',
      imgUpModalShow:false,
      showModal: false,
      param: null,
      criteriaShow:false,
      f_preset_dt : Util.to3339TimeString(),
    }
  },
  ready(){
    let gen = select(this)
    co(gen)
    this.search()
  },
  methods: {
    search () {
      this.$refs.cp.$refs.cri.search()
    },
    selfSearch (args) {
      if(this.model.f_checker_id===''){
        args.condition += `and  f_checker_id='${Vue.user.id}' `
      }
      args.condition+="   and f_safecheck_type='送气类型'"
      this.model.search(args.condition,args.model)
    },
    delfile(prop, fileName, index) {
      if (fileName == Vue.nopic){
      }else {
        this.tableImages.splice(index, 1)
        HostApp.delfile(fileName)
      }
    },
    cameraCallBack(prop, fileName) {
      if (prop == 'path') {
        let path = fileName
        HostApp.__this__.tableImages.push({
          path: path
        })
      } else {
        HostApp.__this__.paper[prop] = fileName
      }
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      let fileName = Util.guid() + '-' + prop + '.jpg'
      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
        }
      })
    },
    imgUp(row){
      this.tableImages = []
      this.paper_id = ''
      let http = new HttpResetClass()
      http.load('POST',`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, {data: {
          items: 'id',
          tablename: 't_check_paper',
          condition: `id = '${row.id}'`,
          orderitem: 'f_upload_date'
        }}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        this.paper_id = res.data[0].id
        this.imgUpModalShow = true
      })
    },
    async uploadPic() {
      if (this.tableImages.length == 0){
        this.$showMessage('请上传图片')
        return
      }
      let data = {
        tableImages: this.tableImages
      }
      HostApp.__this__ = this
      HostApp.logicWithHint({
        'logic': 'imagesUploadAndroid', 'callback': 'javascript: HostApp.__this__.commitCallBack()',
        'data': data, 'backresult': 1
      })
    },
    async commitCallBack(jo) {
      if (jo.state == 'ok'){
        let result = JSON.parse(jo.result)
        if (result.images && result.images.length > 0){
          let condition = result.images.map((item)=>{return `'${item.imgid}'`}).join()
          await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/runSQL`, {data: {sql: `update t_files set f_blobid = '${this.paper_id}' where id in (${condition})`}},
            {resolveMsg: null, rejectMsg: '上传成功'})
          this.$showMessage('上传图片成功')
          this.tableImages = []
          this.paper_id = ''
          this.imgUpModalShow = false
        }else {
          this.$showMessage('上传图片失败')
        }
      }
    },
    refresh() {
    },
    reload(){
      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
    },
    makeAPhoneCall(phoneNumber) {
      this.$androidUtil.makeAPhoneCall(phoneNumber)
    },
    reserve (idx) {
      this.param = idx
      this.showModal = true
    },
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },
    gotocheckpaper(row){
      let pardate = {
        _this:this,
        title:'送气计划照片补录',
        safe:false
      }
      this.$dispatch('gotoson',pardate)
      this.$goto('Asp-paper-message', {f_plan_id: row.f_check_plan_id, item: row, role: 'view'}, 'self')
    },
  }
}
</script>
