<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 style="height: auto;width: 100%">
    <work-busy :is-busy="workBusy"></work-busy>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label  class="font text-left">用户姓名：</label>
              </div>
              <div class="col-xs-8" >
                <input  class="search_input input-font" v-model=model.f_user_name></input>
              </div>
            </div>
            <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></input>
              </div>
            </div>
            <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_meternumber" class="font text-left">用户表号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_meternumber" class="search_input input-font"
                       v-model=model.f_meternumber></input>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户地址：</label>
              </div>
              <div class="col-xs-8">
                <input class="search_input input-font"
                       v-model=model.f_address></input>
              </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_state" class="font text-left">起始时间：</label>
              </div>
              <datepicker id="f_start_date"
                          placeholder= '起始时间'
                          :value.sync="model.f_start_date"
                          :disabled-days-of-Week="[]"
                          v-model="model.f_start_date"
                          class="input-font"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="reset" readonly="readonly">
              </datepicker>
            </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_state" class="font text-left">结束时间：</label>
              </div>
              <datepicker id="f_end_date"
                          placeholder= '结束时间'
                          :value.sync="model.f_end_date"
                          :disabled-days-of-Week="[]"
                          v-model="model.f_end_date"
                          class="input-font"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="reset" readonly="readonly">
              </datepicker>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;" @click="$parent.$parent.selfSearch">查询</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>
            <div style="height:30px;"></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-5 text-left input-font" style="width: 74%">{{ 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-5 text-left input-font" style="width: 74%">{{ row.f_meternumber }}</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_phone }}</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-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%">{{ $parent.$parent.$parent.trouble(row.f_defect_content) }}</p>
                </div>
                <div class="col-xs-12">
                  <button type="button" name="button" class="btn btn-primary" style="background-color:#499edf;float: right;margin-right:10px;" @click="$parent.$parent.$parent.openshowModal1(row)">处理</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>

<script>

  import Vue from 'vue'
  import { PagedList,HttpResetClass } from 'vue-client'
  import * as Util from '../../Util'

  export default {
    title: '无计划安检查询',
    data() {
      return {
        showModal:false,
        showModal1:false,
        showimg:'',
        deletecause:'',
        deletecauseBooble: false,
        workBusy:false,
        deal:{
          result:{},
          f_deal_path:'',
          f_deal_remark:'',
          f_dealsign_path:'', //签名
          f_dealer:Vue.user.name,
          f_dealer_id:Vue.user.id
        },
        f_filialeids:'',
        model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_OrderBy`, 50, {items: '"tcp.*,uf.f_meternumber"', tablename: '"t_check_paper tcp left join t_userfiles uf on tcp.f_userinfoid = uf.f_userinfo_id left join (select tcp.id from t_check_paper tcp' +
            ` LEFT JOIN t_paper_devices tpd ON tcp.id= tpd.f_paper_id ` +
            ` LEFT JOIN t_devices_items tdi ON tpd.id= tdi.f_device_id` +
            ` LEFT JOIN t_devices_items_lists tdl ON tdi.id= tdl.f_item_id ` +
            ` where 1=1 AND tdi.f_is_defect= 'true'  AND tdl.f_dealwith IS NULL AND tdi.f_deal_dispose = '未处理' AND tdi.f_is_repaired IS NULL group by tcp.id ) tcp2 on tcp.id = tcp2.id` +
            ' "', orderitem: '"tcp.f_upload_date desc"'}),
        criteriaShow: false,
        isNeedDealSign: this.$appdata.getSingleValue('隐患处理是否需要签名') == 'true',
      }
    },
    ready(){
      // this.selfSearch()
    },
    methods: {
      trouble(val) {
        const defect_content = JSON.parse(val)
        let result = ''
        if (defect_content.data) {
          const jsonData = defect_content.data
          for (const itemdata of jsonData) {
            const keys = Object.keys(itemdata)
            for (const itm of keys) {
              const value = itemdata[itm]
              result += itm + ':' + value +';'
            }
          }
        }
        return result
      },
      // 签名回调
      signCallback(prop, fileName) {
        console.log("签名回调地址" + fileName)
        // HostApp.alert('绑定属性:' + prop + ' 文件全路径如file:///storage/sdcard0/safecheck/abc.jpg：' + fullFileName)
        HostApp.__this__.$set('deal.f_dealsign_path', fileName)
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      // 用户签名
      sign() {
        if (!this.deal.f_deal_path) {
          this.$showMessage('请先拍摄处理后照片!!!')
          return
        }
        this.delAudioFile('f_dealsign_path', this.deal.f_dealsign_path)
        let prop = 'f_dealsign_path'
        let idx = 'aofeng'
        let fileName
        if (!this.deal.f_dealsign_path) {
          fileName = Util.guid() + '-valve-' + idx + '-' + prop + '.jpg'
        } else {
          fileName = Util.getFileName(this.deal.f_dealsign_path)
        }
        HostApp.__callback__ = this.signCallback
        HostApp.__this__ = this
        HostApp.getSignature({
          file: fileName,
          requestCode: 111,
          callback: 'javascript:HostApp.__callback__("' + prop + '", "%s");'
        })
      },
      delAudioFile(prop, fileName) {
        if (!fileName)
          return
        else {
          HostApp.delfile(fileName)
          this.deal[prop] = null
        }
      },
      commitDealDefect(){
        if (this.deletecauseBooble && !this.deletecause) {
          this.$showMessage("请填写取消拉黑原因！")
          return;
        }
        if (!this.deal.f_deal_path){
          this.$showMessage('处理后照片必须上传')
          return
        }
        if (this.isNeedDealSign && !this.deal.f_dealsign_path){
          this.$showMessage('签名必须上传')
          return
        }
        if (this.deletecauseBooble) {
          let http = new HttpResetClass()
          http.load('POST', 'http://36.108.175.152:8000/API/Secheck/SetBlackList', {
            data: {
              "id": this.deal.result.f_userinfo_code,
              "bh": this.deal.result.f_meternumber,
              "black": false,
              "blackMemo": this.deletecause
            }
          }, {resolveMsg: null, rejectMsg: null})
            .then((res)=>{
              if (res.data.Success) {
                HostApp.__this__ = this
                HostApp.logicWithHint({'logic': 'safe_dealWithDefect', 'callback': 'javascript: HostApp.__this__.commitCallBack()',
                  'data': this.deal, 'backresult':1
                })
              } else {
                this.$showMessage("取消拉黑失败，请稍后再试！")
              }
            })
        } else {
          HostApp.__this__ = this
          HostApp.logicWithHint({'logic': 'safe_dealWithDefect', 'callback': 'javascript: HostApp.__this__.commitCallBack()',
            'data': this.deal, 'backresult':1
          })
        }
      },
      commitCallBack(jo){
        //tag
        //tag)
        if (jo.state =='ok'){
          let ress = JSON.parse(jo.result)
          if (ress.code == 200 ) {
            this.$showMessage(ress.msg)
            this.closeshowModal1()
          } else {
            this.$showMessage(ress.msg)
          }
        }else{
          this.$showMessage('本地服务调用失败')
        }
      },
      delfile(prop, fileName) {
        if (fileName == Vue.nopic)
          return
        else {
          HostApp.delfile(fileName)
          this.deal[prop] = Vue.nopic
        }
      },
      openshowModal(val){
        //tag
        //tag
        this.showimg=`${this.$androidUtil.getProxyUrl()}/rs/image/file/`+val
        this.showModal=true
      },
      closeshowModal(){
        this.showimg=''
        this.showModal=false
      },
      openshowModal1(val){
        var _this = this
        var pardate = {
          _this:_this,
          title:'安全检查',
          safe:true
        }
        _this.$dispatch('gotoson',pardate)
        _this.$goto('android-defect-deal-items', {id: val.id}, 'self',_this.callback)
      },
      callback(){
        let id = this.$androidUtil.getPreference('paper_id')
        if(!id){
          return
        }
        this.selfSearch()
        this.workBusy = true
        new HttpResetClass().load('post',`${this.$androidUtil.getProxyUrl()}/rs/sql/AndroidDealWith`,{
          data:{
            condition:`tcp.id = '${id}'`,
            f_filialeids:`${Vue.user.orgid}`
          }
        }).then(resp=>{
          this.workBusy = false
          if (resp.data.length>0){
            return this.$showMessage('隐患未全部处理')
          }
        }).catch(()=>{
          this.workBusy = false
        })
      },
      closeshowModal1(){
        this.deal={
          result: {},
          f_deal_path:'',
          f_deal_remark:'',
          f_dealsign_path:'', //签名
          f_dealer:Vue.user.name,
          f_dealer_id:Vue.user.id
        }
        this.showModal1=false
        // this.selfSearch()
      },
      cameraCallBack(prop, fileName) {
        HostApp.__this__.deal.f_deal_path = fileName
        HostApp.__callback__ = null
        HostApp.__this__ = null
      },
      takePic(prop, title) {
        HostApp.__callback__ = this.cameraCallBack
        HostApp.__this__ = this
        let fileName
        if (!this.deal.f_deal_path || this.deal.f_deal_path.includes("nopic.png")) {
          fileName = Util.guid() + '-' + prop + '.jpg'
        } else {
          fileName = Util.getFileName(this.deal.f_deal_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 + '时间：' + Util.toStandardTimeString() + '' + Vue.user.name
          }
        })
      },
      selfSearch () {

        let condition = "1=1 "
        if(this.$refs.paged.$refs.cri.model.f_user_name){
          if(this.$refs.paged.$refs.cri.model.f_user_name.toString().trim()){
            condition += " and tcp.f_user_name like '"+this.$refs.paged.$refs.cri.model.f_user_name+"%'"
          }
        }
        if(this.$refs.paged.$refs.cri.model.f_userinfo_code){
          if(this.$refs.paged.$refs.cri.model.f_userinfo_code.toString().trim()){
            condition += " and tcp.f_userinfo_code = '"+this.$refs.paged.$refs.cri.model.f_userinfo_code+"'"
          }
        }
        if(this.$refs.paged.$refs.cri.model.f_address){
          if(this.$refs.paged.$refs.cri.model.f_address.toString().trim()){
            condition += " and tcp.f_address like '%"+this.$refs.paged.$refs.cri.model.f_address+"%'"
          }
        }
        if(this.$refs.paged.$refs.cri.model.f_start_date){
          if(this.$refs.paged.$refs.cri.model.f_start_date.toString().trim()){
            condition += " and tcp.f_upload_date >= '"+this.$refs.paged.$refs.cri.model.f_start_date +"'"
          }
        }
        if(this.$refs.paged.$refs.cri.model.f_end_date){
          if(this.$refs.paged.$refs.cri.model.f_end_date.toString().trim()){
            condition += " and tcp.f_upload_date <= '"+this.$refs.paged.$refs.cri.model.f_end_date +"'"
          }
        }

        if(this.$refs.paged.$refs.cri.model.f_meternumber){
          if(this.$refs.paged.$refs.cri.model.f_meternumber){
            condition += " and uf.f_meternumber = '"+this.$refs.paged.$refs.cri.model.f_meternumber +"'"
          }
        }
        condition += ` and tcp.f_repaired = '未修' and tcp.f_defect_content like '%有隐患%' and tcp2.id is not null`
        this.model.search(condition)
      },

      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
    }
  }
</script>
