<template>
  <!--提供开关阀操作-->
  <!--提供表具详细信息查看操作-->
  <div class="flex text-center">

    <table border="1">
      <tr class="PanelTR">
        <td class="PanelTD"><label>用户编号:</label><br><label>{{data.f_user_id}}</label></td>
        <td class="PanelTD"><label>用户姓名:</label><br><label>{{data.f_user_name}}</label></td>
        <td class="PanelTD"><label>表号:</label><br><label>{{data.f_meternumber}}</label></td>
        <td class="PanelTD"><label>表别名:</label><br><label>{{data.f_alias}}</label></td>
      </tr>
      <tr class="PanelTR">
        <td class="PanelTD"><label>电压:</label><br><label>{{$parent.handplan.f_batterylevel}}</label></td>
        <td class="PanelTD"><label>信号强度:</label><br><label>{{$parent.handplan.f_signal}}</label></td>
        <td class="PanelTD"><label>最后通讯时间:</label><br><label>{{$parent.handplan.f_insert_date}}</label></td>
        <td class="PanelTD"><label>阀门状态:</label><br><label>{{$parent.handplan.f_valvestate}}</label></td>
      </tr>
      <tr class="PanelTR">
        <td class="PanelTD"><label>本次抄表底数:</label><br><label>{{$parent.handplan.f_tablebase}}</label></td>
        <td class="PanelTD"><label>上次抄表底数:</label><br><label>{{$parent.handplan.f_last_tablebase}}</label></td>
        <td class="PanelTD"><label>抄表日期:</label><br><label>{{$parent.handplan.f_insert_date}}</label></td>
        <td class="PanelTD"><label>强制阀门状态:</label><br><label>{{$parent.network.f_network_valve}}</label></td>
      </tr>
    </table>
    <table>
      <tr class="PanelTR">
        <td class="PanelTD"><button class="btn btn-primary width-100" @click="velve(true)">开阀</button></td>
        <td class="PanelTD"><button class="btn btn-danger width-100" @click="velve(false)">关阀</button></td>
        <td class="PanelTD"><button class="btn btn-success width-100" @click="showInstruct()">指令查看</button></td>
        <td class="PanelTD" v-if="$parent.network.f_network_valve!='否'"><button class="btn btn-success width-100" @click="updateNetWorkValve()">退出强制状态</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
  import vue from 'vue'

  export default {
    title: '物联网表操作面板',
    name: "WebMeterOperationPanel",
    props: ['data'],
    methods: {
      velve(val) {
        let isopen = val ? 1 : 0
        this.$resetpost('rs/logic/saveInstruct',
          {
            data: {
              instructType: '阀门控制',
              condition: `t_userfiles.f_user_id= \'${this.data.f_user_id}\'`,
              contentData: {isOpen: isopen},
              inputtor: vue.$login.f.name,
              meterBrandName: this.data.f_alias
            }
          }, {rejectMsg: null, resolveMsg: null}).then((res) => {
          this.$resetpost('rs/logic/updateNetWorkValve', {
            data: {
              f_user_id: this.data.f_user_id,
              f_userinfo_id: this.data.f_userinfo_id,
              state: 1
            }
          }, {rejectMsg: null, resolveMsg: null}).then((res) => {
            this.$showMessage("执行完成,请点击展开指令查看列表刷新获取执行结果")
          })
        }).catch((res) => {
          this.$showMessage("执行错误")
        })
      },
      /*指令查看*/
      showInstruct() {
        this.$parent.isShowInstruct = this.$parent.isShowInstruct ? false : true
      },
      /*退出强制阀控状态*/
      updateNetWorkValve() {
        this.$resetpost('rs/logic/updateNetWorkValve',
          {
            data: {
              f_user_id: this.data.f_user_id,
              f_userinfo_id: this.data.f_userinfo_id,
              state: 0
            }
          }, {rejectMsg: null, resolveMsg: null}).then((res) => {
          if (res.data > 0) {
            this.$showMessage("执行成功")
            this.$parent.network.f_network_valve = '否'
          } else {
            this.$showMessage("执行失败,请再试一次")
          }
        }).catch((res) => {
          this.$showMessage("执行错误")
        })
      }
    }
  }
</script>

<style scoped>
  .PanelTR {
    width: 100%;
    height: 75px;
  }

  .PanelTD {
    width: 25%
  }
</style>
