<template>
  <div class="auto">
    <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/用户ID.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_userinfo_id" condition="ui.f_userinfo_id = '{}'" placeholder="请输入用户编号" />
              </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 class="font text-left">表号：</label>
              </div>
              <div class="col-xs-6" >
                <input class="search_input input-font"
                       v-model="model.f_meternumber" condition="uf.f_meternumber like '%{}%'" placeholder="请输入表号" />
              </div>
              <div class="col-xs-2">
                <button  type="button" class="btn btn-font btn-color" @click="$parent.$parent.scanCode()">扫码</button>
              </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 class="font text-left">基表号：</label>
              </div>
              <div class="col-xs-8" >
                <input class="search_input input-font"
                       v-model="model.f_base_meternumber" condition="uf.f_base_meternumber like '%{}%'" placeholder="请输入基表号" />
              </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 class="font text-left">NB号：</label>
              </div>
              <div class="col-xs-8" >
                <input class="search_input input-font"
                       v-model="model.f_meternumber2" condition="uf.f_meternumber like '%{}%'" placeholder="请输入NB号" />
              </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"
                       condition="ui.f_user_name like '%{}%'" v-model="model.f_username" placeholder="请输入用户名称（可模糊查询）">
              </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 style="width: 100%" class="search_input input-font"
                       condition="ui.f_address like '%{}%'" v-model="model.f_address" placeholder="请输入用户地址（可模糊查询）">
              </div>
            </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="search">查询
              </button>
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="$parent.$parent.sealScan">铅封识别
              </button>
            </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="row">
                  <p class="panel-title col-xs-4 text-left font">用户编号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_userinfo_id }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户名称</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_name }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">表号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">基表号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_base_meternumber }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">NB号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户地址</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_address }}</p>
                </div>
                <div class="row" v-if="!row.f_seal_uid">
                  <p class="panel-title col-xs-4 text-left font">施封信息</p>
                  <p class="panel-title col-xs-8 text-left input-font">暂无</p>
                </div>
                <div class="row" v-if="row.f_operate_name">
                  <p class="panel-title col-xs-4 text-left font">施封人员</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_operate_name }}</p>
                </div>
                <div class="row" v-if="row.f_operate_name">
                  <p class="panel-title col-xs-4 text-left font">施封时间</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_operate_date }}</p>
                </div>
                <div class="row" v-if="row.f_operate_name">
                  <p class="panel-title col-xs-4 text-left font">施封原因</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_cause }}</p>
                </div>
                <div class="col-xs-12">
                  <button type="button" name="button" class="btn btn-primary" style="background-color:#499edf;float: right" @click="$parent.$parent.$parent.toBind(row)">
                    {{row.f_seal_uid ? '重新施封' : '施封'}}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
      <div partial='emptyHint' style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 20px">
        <div style="color: steelblue; font-size: 19px">未查询到相关信息</div>
      </div>
    </criteria-paged>
  </div>
</template>

<script>
import {HttpResetClass, PagedList} from 'vue-client'
import Vue from 'vue'
import * as Util from '../Util'
import {isEmpty} from "../Util";

export default {
  title: '施封',
  data () {
    let model = new PagedList(
      `${this.$androidUtil.getProxyUrl()}/rs/sql/getSealInfo`, 20)
    return {
      model: model,
      row: null,
      sealSize: Number.parseFloat(this.$appdata.getSingleValue('铅封规模')),
    }
  },
  ready () {

  },
  computed: {

  },
  methods:{
    async scanCode () {
        console.log('===============扫码===================')
        HostApp.__this__ = this,
        HostApp.scanCode({callback: "javascript:HostApp.__this__.getCode();"})
    },
    async getCode () {
      this.$refs.paged.$refs.cri.model.f_meternumber=''
      let code = HostApp.getCode().data;
      this.$refs.paged.$refs.cri.model.f_meternumber=code
    },
    sealScan() {
      HostApp.__this__ = this
      HostApp.readNfc({
        'callback': 'javascript:HostApp.__this__.sealScanCallback()',
        // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
        // 执行回调方法传入key为backresult
        // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
        'backresult': 1
      })
    },
    async sealScanCallback() {
      console.log('sealScanCallback=========')
      let result = HostApp.getNfcUUID()
      console.log('result=', result)
      if (result.code == 200){
        const sealUID = result.data
        let res = await new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, {
          data: {
            items: '*',
            tablename: 't_seals_record',
            orderitem: 'f_creation_date desc',
            condition: `f_uid = '${sealUID}' and f_state = '有效'`
          }
        }, {resolveMsg: null, rejectMsg: null})
        if (res.data.length && res.data[0].f_userinfo_id){
          this.$refs.paged.$refs.cri.model.f_userinfo_id = res.data[0].f_userinfo_id
          this.$refs.paged.$refs.cri.search()
        }else {
          return this.$showMessage("该铅封未绑定用户！")
        }
      }else {
        return this.$showMessage("未识别到铅封信息，请重新尝试！")
      }
    },
    async toBind(row) {
      if(Number.parseFloat(row.f_rated_traffic) > this.sealSize){
        const result = await new HttpResetClass().load('post',`${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`,{data: {
            items: 'f_position',
            tablename: 't_seals_record',
            condition: `f_userinfo_id  = '${row.f_userinfo_id}' and f_state = '有效'`,
            orderitem: 'id'
          }},{
          resolveMsg: null,
            rejectMsg: `查询失败`
        })
        if (result.data.length != 0){
          row.f_position = result.data.filter(item => item.f_position !== null).map(item => item.f_position).join(';')
        }
        let pardate = {
          _this: this,
          title:'铅封绑定',
          safe:false
        }
        this.$dispatch('gotoson',pardate)
        this.$goto('seal-bind-non-civilian', {row: row}, 'self', this.reload)
      }else {
        if (row.f_seal_uid){
          let res = await this.$showMessage('该用户已施封，是否重新进行施封?', ['confirm', 'cancel'])
          if (res == 'cancel'){
            return
          }
        }
        let pardate = {
          _this: this,
          title:'铅封绑定',
          safe:false
        }
        this.$dispatch('gotoson',pardate)
        this.$goto('seal-bind', {row: row}, 'self', this.reload)
      }
    },
    reload(sealUID){
      console.log('sealUID=', sealUID)
      this.$refs.paged.$refs.cri.search()
    }
  },
}
</script>
<style scoped>
.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{
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
</style>
