<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;
}
</style>

<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <p align="center" style="color: maroon" v-if="!$parent.$parent.isHaveJiBiao">只限物联网表进行开关阀操作</p>
          <p align="center" style="color: maroon" v-if="$parent.$parent.isHaveJiBiao">只限物联网表和机表进行操作</p>
          <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="$parent.$parent.f_userinfo_code" />
              </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="$parent.$parent.f_meternumber" />
              </div>
            </div>
            <div class="row app-row" v-if="$parent.$parent.isHaveJiBiao">
              <div class="col-xs-4">
                <img src="../../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_meternumber" class="font text-left">气表类型：</label>
              </div>
              <div class="col-xs-8" >
                <v-select
                  class="input-font"
                  placeholder='请选择气表类型'
                  :value.sync="$parent.$parent.f_meter_type"
                  v-model="$parent.$parent.f_meter_type"
                  :options='$parent.$parent.meterTypeOptions'
                  close-on-select
                  clear-button>
                </v-select>
              </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="search">查询</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="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_userinfo_code }}</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_user_name }}</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_user_type }}
                  </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_user_phone }}
                  </p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title text-left font" style="float: left"><b>用户地址:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_address }}</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_meternumber }}</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_aroundmeter }}</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_meter_brand }}</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_meter_type }}</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_meter_base }}</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_balance_amount }}</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_batteryLevel2 }}</p>
                </div>
                <div class="col-xs-6" v-if="row.f_meter_type == '物联网表'">
                  <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_valve_state }}</p>
                </div>
                <div class="col-xs-6" v-if="row.f_meter_type == '物联网表'">
                  <button class="btn  btn-font btn-color"  type="button"  style="width: 28%;padding: 2px 5px;"  v-if="row.f_valve_state == '关阀'" @click="$parent.$parent.$parent.openvalve(row)">开阀</button>
                  <button class="btn  btn-font btn-color" type="button"  style="width: 28%;padding: 2px 5px;" v-if="row.f_valve_state == '开阀'" @click="$parent.$parent.$parent.clonevalve(row)">关阀</button>
                  <button class="btn  btn-font btn-color" type="button"  style="width: 28%;padding: 2px 5px;" v-if="row.f_meter_brand.includes('西美')"  @click="$parent.$parent.$parent.clearBarrier(row)">清除障碍</button>
                </div>
                <div class="col-xs-6" v-if="row.f_meter_type == '机表'">
                  <button class="btn  btn-font btn-color" type="button"  style="width: 50%;padding: 2px 5px;" @click="$parent.$parent.$parent.goVindicate(row)">档案维护</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
    <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 { PagedList } from 'vue-client'
import PhoneUpUserinfo from './PhoneUpUserinfo'


export default {
  title: '开关阀',
  data () {
    return {
      model: Vue.android ? new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/SwitchValveSeachUser`, 5) : new PagedList( 'AndroidRest/rs/sql/SwitchValveSeachUser',5),
      f_meternumber: '',
      f_userinfo_code: '',
      f_operator: Vue.user.name,
      filialeid: Vue.user.orgid,
      // f_operator: '温艺轩',
      // filialeid: '453',
      type: '',
      showModal: false,
      modalTitle: '', //开关阀标题
      f_comments: '', //开关阀原因
      istype: '', //
      thisOneData: '', //当前操作的用户
      f_meter_type: '',
      condition: '',
      isHaveJiBiao: false,
      meterTypeOptions: [{label: '全部', value: ''}, {label: '物联网表', value: '物联网表'}, {label: '机表', value: '机表'}]
    }
  },
  ready () {
    this.isHaveJiBiao = this.$appdata.getSingleValue('开关阀是否查询机表') === '是'
    if (this.isHaveJiBiao) {
      this.condition = " and f_meter_type in ('物联网表', '机表')"
    } else {
      this.condition = " and f_meter_type in ('物联网表')"
    }
  },
  methods: {
    clearBarrier(val){
      // 127.0.0.1:8445
      // 参数
      let datas =  {
        moduleName:"XiMeiSystem", // 固定值
        content:{
          tradeCode:"3015",// 固定值
          appid: "yysf", // 固定值
          partner: "cqsemay_bcts", // 固定值
          version:"v1", // 固定值
          tasked:this.getuuid(), // 任务id
          notifyUrl:"http://192.168.2.10:8445/webmeter/rs/logic/XiMeiSystemCallBack", // 固定值
          meterNo: val.f_meternumber,// 表号
          signType:" MD5" //固定值
        },
        title: "清除异常", // 固定值
        type: "清除异常", // 固定值
        inputtor:this.f_operator, // 操作人
        userId:val.f_userfiles_id,   // 表档案ID
        dataId: null // 操作记录ID
      }
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/webmeter/rs/logic/syncSaveSetParamsTemplate`, {data: datas},{resolveMsg: `清理成功`, rejectMsg: `清理失败`}).then(res => {
      })
    },
    getuuid(){
      let uuidA = '';
      var s = [];
      var hexDigits = '0123456789abcdef';
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = '4';
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = '-';
      uuidA = s.join('');
      return uuidA;
    },
    selfSearch () {
      //tag
      // let condition =  ` uf.f_filialeid = '${this.filialeid}'`
      let condition =  ` 1=1 `
      condition += this.condition
      condition += this.f_meternumber ? ` and uf.f_meternumber = '${this.f_meternumber}'` : ""
      condition += this.f_userinfo_code ? ` and f_userinfo_code = '${this.f_userinfo_code}'` : ""
      condition += this.f_meter_type != '' && this.f_meter_type != [] ? ` and f_meter_type = '${this.f_meter_type}'` : ""
      console.log(condition)
      //tag
      this.model.search(condition)
    },
    openvalve (val) {
      //tag
      this.modalTitle = '对表号为'+ val.f_meternumber+'开阀'
      this.istype = '开阀'
      this.showModal = true;
      this.thisOneData = val;
    },
    clonevalve (val) {
      //tag
      this.modalTitle = '对表号为'+ val.f_meternumber+'关阀'
      this.istype = '关阀'
      this.showModal = true;
      this.thisOneData = val;
    },
    openOrCloneValveMethod (msg) {
      if (this.f_comments=='') {
        return  this.$showMessage("请输入开关阀原因")
      }
      var data = {
        instructType: '阀门控制',
        instructTitle: `手动${msg}`,
        condition: `t_userfiles.f_userfiles_id='${this.thisOneData.f_userfiles_id}'`,
        meterBrandName: this.thisOneData.f_alias,  // 气表别名
        f_instruct_state: '待发送',
        inputtor: this.f_operator,
        reasonInfo: this.f_comments,   //操作原因
        meternumberf: this.thisOneData.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分钟进行查询`)
        //tag
        this.thisOneData = '';
        this.istype = '';
        this.f_comments = '';
        this.showModal = false
        this.selfSearch()
      })
    },
    //  档案维护
    goVindicate(row) {
      console.log(row)
      var pardate = {
        title:'档案维护',
        safe:true
      }
      this.$dispatch('gotoson',pardate)
      this.$goto('PhoneUpUserinfo', {f_userinfo_id: row.f_userinfo_id},'self')
    }
  },
  components: {
    'PhoneUpUserinfo': PhoneUpUserinfo
  }
}
</script>
