<template>
  <div class="auto" style="background: #f8f8f8;">
    <div partial class="bg-white ">
      <div class="row app-row " style="margin-top: 10px">
        <div class="col-xs-4">
          <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
          <label  class="font ">表号：</label>
        </div>
        <div class="col-xs-8" >
          <input  class="search_input input-font" placeholder="请输入您要查询的表号" v-model="f_meternumber" />
        </div>
      </div>
      <div class="row app-row " style="margin-top: 10px">
        <div class="col-xs-4">
          <img src="../../assets/用户编号.png" style="width: 20px;margin-bottom: 5px" alt="">
          <label  class="font ">用户编号：</label>
        </div>
        <div class="col-xs-8" >
          <input  class="search_input input-font" placeholder="请输入用户编号" v-model="f_userinfo_code" />
        </div>
      </div>
      <div class="row text-center" style="padding-top: 10px;padding-bottom:10px;text-align: center">
        <button type="button" class="btn  btn-font" style="width: 25%;
      margin-right: 3%; background-color: #499edf;color:#FFFFFF;border-radius: 10px ;" @click="query(querytitle)">查询</button>
        <button type="button" class="btn  btn-font btn-color1" style="width: 25%;margin-right: 3%" @click="empty">清空</button>
        <button type="button" class="btn  btn-font btn-color1" style="width: 25%;margin-right: 3%" @click="Scanningtable">扫表号</button>
      </div>
    </div>
    <div class="meterinfo auto bg-white">
      <iot-meter-info :row="row"></iot-meter-info>
    </div>
    <div class="">
      <div class="row bg-white" style="padding: 10px;margin-bottom: 5px">
        <div class="col-sm-12 " >
          <img src="../../assets/caozuo.png" style="width: 20px;margin-bottom: 5px" alt="">
          <label  class="font ">操作</label>
          <button type="button" class="btn  btn-font btn-color" style="width: 20%" @click="OpenValve('1')">开阀</button>
          <button type="button" class="btn  btn-font btn-color" style="width: 20%" @click="valveShutoff('0')">关阀</button>
          <button type="button" class="btn  btn-font btn-color" style="width: 25%" @click="againOpening">重新开户</button>
        </div>
      </div>

    </div>
    <div class="bg-white" >
      <!--<div class="row" style="padding-left: 10px">-->
        <!--<label class="font_normal_body">信息查询</label>-->
      <!--</div>-->
      <div class="row  auto flex-row" style="justify-content: space-between">
        <div @click="setquery('基础')"  >
         <label :class="querytitle == '基础' ? 'text-center div_ul2' : 'text-center div_ul'">基础</label>
        </div>
        <div @click="setquery('指令查询')"  >
          <label :class="querytitle == '指令查询' ? 'text-center div_ul2' : 'text-center div_ul'">指令</label>
        </div>
        <div @click="setquery('抄表查询')"   >
        <label :class="querytitle == '抄表查询' ? 'text-center div_ul2' : 'text-center div_ul'">抄表</label>
        </div>
        <div @click="setquery('售气查询')" >
          <label  :class="querytitle == '售气查询' ? 'text-center div_ul2' : 'text-center div_ul'">售气</label>
        </div>
        <div @click="setquery('上报查询')"  >
         <label :class="querytitle == '上报查询' ? ' text-center div_ul2' : 'text-center div_ul'">上报</label>
        </div>
      </div>
      <div v-if="model.rows.length == 0 && querytitle !== '基础'" style="margin-top: 20px">
        <label class="font_normal_body"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;暂无记录...&nbsp;&nbsp;&nbsp;</b></label>
      </div>
      <div class="iotbaseinfo " v-if="querytitle == '基础'">
        <iot-base-info :row="row"></iot-base-info>
      </div>
      <list :model="model" partial='list' style="padding-bottom: 10px" v-if="querytitle == '指令查询'">
          <div partial>
            <div  class="auto app-text" style="margin-top: 5px; " @click="$parent.$parent.goto(row)">
              <div class="panel" style="padding: 10px 10px 5px 10px;">
                <div class="panel-body panel-self " style="border: 2px solid #499EDF; border-radius: 10px">
                  <div class="col-xs-12">
                    <p class="panel-title col-xs-5 text-left font" style="float: left"><b>指令类型:</b></p>
                    <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_instruct_type }}</p>
                  </div>
                  <div class="col-xs-12">
                    <p class="panel-title col-xs-5 text-left font" style="float: left"><b>指令标题:</b></p>
                    <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_instruct_title }}</p>
                  </div>
                  <div class="col-xs-12">
                    <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_instruct_state }}
                    </p>
                  </div>
                  <div class="col-xs-12">
                    <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_receive_state }}
                    </p>
                  </div>
                  <div class="col-xs-12">
                    <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_inputtor }}</p>
                  </div>
                  <div class="col-xs-12">
                    <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_instruct_date }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </list>
      <list :model="model" partial='list' style="padding-bottom: 10px" v-if="querytitle == '抄表查询'">
        <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" style="border: 2px solid #499EDF; border-radius: 10px">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>本次抄表底数:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_tablebase }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>上次抄表底数:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_last_tablebase }}</p>
                </div>
                <div class="col-xs-12">
                  <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_inputtor }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <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_input_date }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
      <list :model="model" partial='list' style="padding-bottom: 10px" v-if="querytitle == '售气查询'">
        <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" style="border: 2px solid #499EDF; border-radius: 10px">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>预购气量:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_pregas }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>预购金额:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_preamount }}</p>
                </div>
                <div class="col-xs-12">
                  <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_total_gas }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <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_total_fee }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <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_operate_date }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
      <list :model="model" partial='list' style="padding-bottom: 10px" v-if="querytitle == '上报查询'">
        <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" style="border: 2px solid #499EDF; border-radius: 10px">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>上报类型:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_upload_type }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>阀门状态:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_valvestate }}</p>
                </div>
                <div class="col-xs-12">
                  <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_price }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <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_tablebase }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <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_hand_date }}</p>
                </div>
                <div class="col-xs-12">
                  <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_insert_date }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </div>
    <modal :show.sync="showModal">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          {{modalTitle}}
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <div class="row" style="margin-top: 6px">
          <textarea id="el_ca_txt" v-model.trim="f_comments" style="border-radius:4px;width: 100%;" placeholder="请输入开关阀原因" >
          </textarea>
        </div>
      </div>
      <div slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default" @click="showModal = false">取消</button>
        <button type="button" class="btn btn-success" @click="openOrCloneValveMethod(istype)">{{istype}}</button>
      </div>
    </modal>

  </div>

</template>

<script>
  import Vue from 'vue'
  import {HttpResetClass} from 'vue-client'
  import IotMeterInfo from "./IotMeterInfo";
    export default {
      components: {IotMeterInfo},
      title: '物联网监控',
      data () {
        return {
          f_meternumber: '',
          f_userinfo_code:'',
          querytitle: '基础',
          showModal: '',
          modalTitle: '', //开关阀标题
          f_comments: '', //开关阀原因
          istype: '', //
          row:{},
          model: {
             rows: [{}]
          }

        }
      },
      ready () {
        console.log('物联网监控')
      },
      methods: {
        openOrCloneValveMethod (msg) {
          if (this.f_comments=='') {
            return this.$showMessage("请输入开关阀原因")
          }
          var data = {
            instructType: '阀门控制',
            instructTitle: `手动${msg}`,
            condition: `t_userfiles.f_userfiles_id='${this.row.f_user_id}'`,
            meterBrandName: this.row.f_alias,  // 气表别名
            f_instruct_state: '待发送',
            inputtor: Vue.user.name,
            reasonInfo: this.f_comments,   //操作原因
            meternumberf: this.row.f_meternumber,  //表号
            contentData: {isOpen: msg=='开阀' ? 1 : 0},  // oper 为true 时为开阀   false 为关阀
          }
          this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/logic/iot_saveInstruct`, {data: data}).then((row) => {
            this.$showMessage(`${msg}指令发送成功，请等候2分钟进行查询`)
            this.istype = '';
            this.f_comments = '';
            this.showModal = false
          }).catch((e) => {
            this.$showMessage(`${msg}指令发送失败`)
          })
        },
        OpenValve () {
          this.modalTitle = '对表号为'+ this.row.f_meternumber+'开阀'
          this.istype = '开阀'
          this.showModal = true;

        },
        valveShutoff () {
          this.modalTitle = '对表号为'+ this.row.f_meternumber+'关阀'
          this.istype = '关阀'
          this.showModal = true;
        },
        goto(row){
        console.log(row)
        let _this=this
        var pardate = {
          _this:_this,
          title:'指令信息',
          safe:false
        }
        this.$dispatch('gotoson',pardate)
        this.$goto('instruct-message',{row:row}, 'self')
        },
        empty () {
          console.log('清空')
          this.f_meternumber = ''
          this.f_userinfo_code = ''
        },
        // 查询表别名
        queryAlias() {
          console.log('查询表别名'+JSON.stringify(this.f_meternumber))
          let data = {
            items: ' f_alias , f_user_id ',
            tablename: ' t_userfiles uf LEFT JOIN t_gasbrand gb ON uf.f_gasbrand_id = gb.id ',
            orderitem: 'gb.id desc',
            condition: ` f_meternumber = '${this.f_meternumber}'`
          }
          // console.log('查询条件'+ JSON.stringify(data))
          // this.$resetpost(`/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
            this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
            // console.log('查询返回'+JSON.stringify(row))
            return row.data[0]
          }).catch((e) => {
            this.$showMessage('表别名获取失败！')
            // console.log('错误信息+++++++'+JSON.stringify(e))
          })
        },
        againOpening () {
          console.log('重新开户')
          if (!this.f_meternumber) {
            this.$showMessage('请输入/扫描用户表号！')
            return
          }
          this.$showMessage(`您确认要重新开户吗？`, ['confirm', 'cancel']).then(async (res) => {
            if (res === 'confirm') {
              let http = new HttpResetClass()
              let condition = `f_meternumber = '${this.f_meternumber}'`
              console.log('修改条件===' + JSON.stringify(condition))
              http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/againOpenAccountnvm `, {data: {condition: condition}},{resolveMsg: null, rejectMsg: null}).then((row) => {
                // console.log('修改返回' + JSON.stringify(row))
                this.$showMessage('操作成功！将会在一段时间内重新生成开户指令！')
              }).catch((e) => {
                this.$showMessage('操作失败！请稍后重试！')
                console.log('错误信息+++++++'+JSON.stringify(e))
              })
            }
          })


        },
        query (title) {
          console.log('查询'+ JSON.stringify(title))
          if (!this.f_meternumber&&!this.f_userinfo_code) {
            this.$showMessage('请输入/扫描用户表号或输入用户编号！')
            return
          }
          let condition = this.f_meternumber!==''? `f_meternumber = '${this.f_meternumber}'`:`f_userinfo_code = '${this.f_userinfo_code}'`
          let data = {
            items: '*',
            tablename: 't_instruct',
            orderitem: 'f_instruct_date desc',
            f_meternumber: this.meternumber
          }
          if(title==='基础'){
            // let condition = `f_meternumber = '${this.f_meternumber}'`
            this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/getUserByMeter`, {data: {condition:condition}}).then((row) => {
              if(row.data.length===0)
                this.$showMessage('未查询到用户信息')
              // console.log('查询返回'+JSON.stringify(row))
            // this.f_meternumber = row.data[0].f_meternumber
            // this.f_userinfo_code = row.data[0].f_userinfo_code?row.data[0].f_userinfo_code:this.f_userinfo_code
            this.row = row.data[0]
          }).catch((e) => {
            console.log('错误信息+++++++'+JSON.stringify(e))
          })
          } else {
          if (title == '指令查询') {
            data = {
              items: '*',
              tablename: 't_instruct',
              orderitem: 'f_instruct_date desc',
              condition: condition
            }
          }else if (title == '抄表查询') {
            data = {
              items: '*',
              tablename: 't_handplan',
              orderitem: 'f_input_date desc',
              condition: condition
            }
          }else if (title == '售气查询') {
            if (!this.f_meternumber) {
              this.$showMessage('请输入/扫描用户表号！')
              return
            }
            data = {
              items: '*',
              tablename: 't_sellinggas',
              orderitem: 'f_operate_date desc',
              condition: condition
            }
          }else if (title == '上报查询') {
            if (!this.f_meternumber) {
              this.$showMessage('请输入/扫描用户表号！')
              return
            }
            data = {
              items: '*',
              tablename: 't_meteread',
              orderitem: 'f_hand_date  desc',
              condition: condition
            }
          }
          console.log('查询条件'+ JSON.stringify(data))
          // this.$resetpost(`/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
          this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/iot_singleTable_OrderBy`, {data: data}).then((row) => {
            console.log('查询返回'+JSON.stringify(row))
            this.model.rows = row.data
            // this.f_meternumber = row.data[0].f_meternumber
            // this.f_userinfo_code = row.data[0].f_userinfo_code?row.data[0].f_userinfo_code:this.f_userinfo_code
          }).catch((e) => {
            console.log('正在维护！')
            console.log('错误信息+++++++'+JSON.stringify(e))
          })
          }
        },
        setquery (msg) {
          console.log(msg)
          this.querytitle = msg
          // 查询
          this.query(msg)
        },
        Scanningtable() {
          console.log('扫表号6666666')
          HostApp.__this__ = this
          HostApp.scanCode({callback:"javascript:HostApp.__this__.getCode();"})
        },
        getCode () {
          var datapa = HostApp.getCode().data
          console.log(`扫码返回值${datapa}`)
          this.f_meternumber = datapa
          this.$showMessage(`扫码返回值为：${datapa}`)
        },

      }
    }
</script>

<style scoped>
  .btn-color{
    background-color: #499edf;
    border-radius: 10px ;
    border: 1px solid #499EDF;
    font:600 16px PingFang-SC-Bold;
    color: #FFFFFF;

  }
  .btn-color1{
    background-color: #FFFFFF;
    border-radius: 10px ;
    border: 1px solid #499EDF;
    font:600 16px PingFang-SC-Bold;
    color: #499EDF;
  }
  .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;
  }
  .div_ul {
    height: 36px;
    color:rgb(153,153,153);
    /*border-right: 1px solid royalblue;*/
    line-height: 36px;
  }
  .div_ul2 {
    height: 36px;
    /*border-right: 1px solid royalblue;*/
    line-height: 36px;
    color:#6eb0e3;
    border-bottom: 2px solid #6eb0e3;
  }
.meterinfo{
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
