<template>
  <!--表具管理页面-->
  <!--该页面用来管理多种类型的表，并非是用来管理一个物联网，物联网的数据采集与监控应该单独拿出来做一个页面-->
  <div class="flex-row">
    <meter-list class="flex" v-if="isShowThisFunction && !isShowBatchOperationValve && !isShowMonthUseGas"
                style="width:100%;"
                @select-changed="selected"></meter-list>
    <warning-statistics v-if="!isShowThisFunction && !isShowBatchOperationValve" style="width: 100%"
                        :msgParam="msg"></warning-statistics>
    <web-meter-batch-operation-valve v-if="isShowBatchOperationValve"
                                     style="width: 100%"></web-meter-batch-operation-valve>
    <web-meter-month-use-gas v-if="isShowMonthUseGas" style="width: 100%"></web-meter-month-use-gas>
    <!--表具面板-->
    <div style="width: 45%" v-if="showItem">
      <!--<meter-item v-if="showItem" :data="rowData"></meter-item>1-->
      <meter-brand-panel style="height: auto" :row="rowData"></meter-brand-panel>
      <!--参数面板-->
      <!--<parames style="height: 50%" :id="rowData.f_user_id" :type="1"></parames>-->
      <!--是否为物联网用户，如果是物联网用户则显示物联网操作面板-->
      <web-meter-operation-panel style="height: auto" v-if="isWebMeter" :data="rowData"></web-meter-operation-panel>
      <web-meter-instruct style="height: 49.5%" v-if="isWebMeter && isShowInstruct" :rowdata="rowData"
                          :user="false"></web-meter-instruct>
    </div>
  </div>
</template>

<script>

  import WebMeterBatchOperationValve from "./WebMeterBatchOperationValve";

  export default {
    components: {WebMeterBatchOperationValve},
    title: '表具管理页面',
    name: "MeterManageMain",
    data() {
      return {
        showItem: false,
        isWebMeter: false,
        isShowInstruct: false,
        rowData: {},
        isShowThisFunction: true,
        isShowBatchOperationValve: false,
        isShowMonthUseGas: false,
        msg: "",
        parames: undefined,
        handplan: {
          f_batterylevel: '未查询到该值',
          f_signal: '未查询到该值',
          f_valvestate: '未查询到该值',
          f_tablebase: '未查询到该值',
          f_last_tablebase: '未查询到该值',
          f_hand_date: '未查询到该值',
          f_insert_date: '未查询到该值'
        },
        network: {
          f_network_valve: '123'
        }
      }
    },
    ready() {

    },
    methods: {
      show() {
        this.showItem = this.showItem ? false : true
      },
      selected(row) {
        if (row.val.f_meter_type === '物联网表') {
          this.isWebMeter = true
        } else {
          this.isWebMeter = false
        }
        this.isShowInstruct = false
        this.rowData = row.val
        this.showItem = true
        //不知道怎么回事，Parames无法触发监控指令，所以出此下策
        if (this.parames) {
          this.parames.dataValue = this.rowData.f_user_id
          this.parames.typeSearch('')
        }
      },
      setParames(self) {
        this.parames = self
      }
    },
    watch: {
      'msg'(str) {
        this.msg = str
        if (str == "") {
          this.isShowThisFunction = true
          this.isShowBatchOperationValve = false
          this.isShowMonthUseGas=false
        } else if (str == 'batchOperationValve') {
          this.isShowThisFunction = true
          this.showItem = false
          this.isShowBatchOperationValve = true
        } else if (str=='webMeterMonthUseGas') {
          this.isShowThisFunction = true
          this.showItem = false
          this.isShowBatchOperationValve = false
          this.isShowMonthUseGas=true
        } else {
          this.isShowThisFunction = false
          this.showItem = false
        }
      }
    }
  }
</script>

<style scoped>

</style>
