<template >
  <div class="auto">
  <div class="auto form-group-new row">
    <div class="col-sm-6" style="height:auto;width:49%;">
      <p style="font-weight: bold;margin: 0"><img src="./../../../static/mainicon/矩形1828.png"/>&nbsp;&nbsp;基本信息</p>
      <!--    第一行数据-->
        <div class="col-sm-4">
          <label class="font_normal_body_new">客户编号</label>
          <input  class="input-underline" style="width:60%" :value="row.f_userinfo_code" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">客户姓名</label>
          <input class="input-underline" style="width:60%" :value="row.f_user_name" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">用户状态</label>
          <input class="input-underline" style="width:60%" :value="row.f_user_state" readonly>
        </div>
        <div class="col-sm-8">
          <label class="font_normal_body_new">客户地址</label>
          <input class="input-underline" style="width:80%" :value="row.f_address" readonly>
         </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">客户电话</label>
          <input class="input-underline" style="width:60%" :value="row.f_user_phone" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">客户类型</label>
          <input class="input-underline" style="width:60%" :value="row.f_user_type" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">用气性质</label>
          <input class="input-underline" style="width:60%" :value="row.f_gasproperties" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">证件类型</label>
          <input class="input-underline" style="width:60%" :value="row.f_credentials" readonly>
        </div>
        <div class="col-sm-8">
          <label class="font_normal_body_new">证件号码</label>
          <input class="input-underline" style="width:80%" :value="row.f_idnumber" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">使用状态</label>
          <input class="input-underline" style="width:60%" :value="row.f_usestate" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">账户余额</label>
          <input class="input-underline" style="width:60%" :value="row.f_balance" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">人&ensp;口&ensp;数</label>
          <input class="input-underline" style="width:60%" :value="row.f_people_num" readonly>
        </div>

    </div>
    <div class="col-sm-6" style="height:auto;width:49%;">
      <p style="font-weight: bold;margin: 0"><img src="./../../../static/mainicon/矩形1828.png"/>&nbsp;&nbsp;表具信息</p>
        <div class="col-sm-4">
          <label class="font_normal_body_new">表&emsp;号&emsp;</label>
          <input class="input-underline" style="width:60%" :value="row.f_meternumber" readonly>
        </div>
        <div class="col-sm-4">
            <label class="font_normal_body_new">气表状态</label>
            <input class="input-underline" style="width:60%" :value="row.f_table_state" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">气表读数</label>
          <input class="input-underline" style="width:60%" :value="row.f_meter_base" readonly>
          </div>

        <div class="col-sm-4">
          <label class="font_normal_body_new">气表品牌</label>
          <input class="input-underline" style="width:60%" :value="row.f_meter_brand" readonly>
        </div>

        <div class="col-sm-4">
          <label class="font_normal_body_new">气价名称</label>
          <input class="input-underline" style="width:60%" :value="row.f_price_name" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">气价类型</label>
          <input class="input-underline" style="width:60%" :value="row.f_price_type" readonly>
          </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">价格详情</label>
          <input class="input-underline" style="width:60%" :value="row.f_detailprice" readonly>
        </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new" title="最后上报时间">上报时间</label>
        <input class="input-underline" style="width:60%" :value="row.f_meteread_date ? row.f_meteread_date : '暂无'" readonly>
      </div>
      <div v-if="row.f_collection_type == '按金额'"  class="col-sm-4">
        <label class="font_normal_body_new">累购金额</label>
        <input class="input-underline" style="width:60%" :value="row.total_fee" readonly>
      </div>
      <div v-if="row.f_collection_type == '按气量'">
        <div class="col-sm-4">
          <label class="font_normal_body_new">累购气量</label>
          <input class="input-underline" style="width:60%" :value="row.f_total_gas" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">最后结算时间</label>
          <input class="input-underline" style="width:45%" :value="row.f_hand_date  ? row.f_hand_date :'暂无'" readonly>
        </div>
      </div>
      <div v-if="row.f_meter_type.includes('物联网表')" >
        <div  class="col-sm-4">
          <label class="font_normal_body_new">表剩余金额</label>
          <input class="input-underline" style="width:55%" :value="row.f_balance_amount" readonly>
        </div>
        <div  class="col-sm-4">
          <label class="font_normal_body_new">阀门状态</label>
          <input class="input-underline" style="width:60%" :value="row.f_valvestate == 0 ? '已开阀' : '已关阀'" readonly>
        </div>
        <div class="col-sm-4">
          <label class="font_normal_body_new">累计上报次数</label>
          <input class="input-underline" style="width:45%" :value="row.f_meteread_number ? row.f_meteread_number : 0" readonly>
        </div>
        <div  class="col-sm-4">
          <label class="font_normal_body_new">是否自动阀控</label>

          <input class="input-underline" style="width:45%" :value="row.f_network_valve == '1' ? '否' : '是'" readonly>
        </div>
      </div>
      <div v-if="row.f_collection_type == '按气量'" >
        <div  class="col-sm-4">
          <label class="font_normal_body_new">表剩余气量</label>
          <input class="input-underline" style="width:55%" :value="row.f_balance_gas" readonly>
        </div>
        <div  class="col-sm-4">
          <label class="font_normal_body_new">累计用气金额</label>
          <input class="input-underline" style="width:45%" :value="row.f_total_usegas_amount" readonly>
        </div>
      </div>
    </div>
    <div class="auto" style="float: right;">
      <button class="button_clear " @click="cancelmain()" >返回</button>
      <button title="权限:开户" v-if="row.f_meter_type.includes('物联网表')" :disabled="!this.$login.r.includes('开户')"
              class="button_search" type="button" @click="openUser">开户</button>
      <button v-if="row.f_meter_type.includes('物联网表')"
              class="button_search" type="button" @click="valvecontrol">开关阀</button>
      <button title="权限:开关自动阀控" v-if="row.f_meter_type.includes('物联网表')" :disabled="!this.$login.r.includes('开关自动阀控')"
              class="button_search" type="button" @click="zdfk">开关自动阀控</button>
      <div
        :class="{'button_shrink_top':criteriaShow,'button_shrink_bottom':!criteriaShow}"
        @click="criteriaShow=!criteriaShow"
        class="button_spacing"
        style="float: right"></div>
    </div>
  </div>

  <div class="auto row">
    <div class="col-sm-6" style="width:49%;"></div>
    <div class="auto form-group-new">
    <div class="col-sm-6" style="height:auto;width:49%;" v-show="criteriaShow">
      <div class="col-sm-4">
        <label class="font_normal_body_new">气表型号</label>
        <input class="input-underline" style="width:60%" :value="row.f_meter_style" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">气表类型</label>
        <input class="input-underline" style="width:60%" :value="row.f_meter_type" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">初始底数</label>
        <input class="input-underline" style="width:60%" :value="row.f_initial_base" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">左&ensp;右&ensp;表</label>
        <input class="input-underline" style="width:60%" :value="row.f_aroundmeter" readonly>
      </div>
      <div  v-if="devices.length > 0" v-show="false" style="height: auto" >
        <p style="font-weight: bold;margin: 0">设备信息</p>
        <div class="panel-heading"  style="height: 30px">
          <h4 style="display:inline-block;margin-top: auto">设备信息</h4>
        </div>
        <div v-for="device in devices">

          <form class="form-horizontal">
            <div class="col-sm-4">
              <label class="font_normal_body_new">设备类型</label>
              <input class="input-underline" style="width:60%" :value="device.f_devices_type" readonly>
            </div>
            <div class="col-sm-4">
              <label class="font_normal_body_new">设备品牌</label>
              <input class="input-underline" style="width:60%" :value="device.f_brand" readonly>
            </div>
            <div class="col-sm-4">
              <label class="font_normal_body_new">设备型号</label>
              <input class="input-underline" style="width:60%" :value="device.f_devices_model" readonly>
            </div>
            <div class="col-sm-4">
              <label class="font_normal_body_new">设备数量</label>
              <input class="input-underline" style="width:60%" :value="device.f_devices_num" readonly>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!--阀控管理弹框-->
  <modal :show.sync="valve">
    <header slot="modal-header" class="modal-header">
      <button type="button" class="close" @click="close()"><span>&times;</span></button>
      <h4 class="modal-title" align="center">阀控管理</h4>
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="form-group " style="padding-left: 8px">
        <label  class="font_normal_body" >操作原因</label>
        <textarea class="form-control" style="width:80%" v-model="operateReason" rows="3" placeholder="请填写操作原因"></textarea>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button  type="button" class="button_search btn-ln fr"  @click='valveoperate(true)'>开阀</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button  type="button" class="btn btn-info btn-ln fr"  @click='valveoperate(false)'>关阀</button>
    </footer>
  </modal>
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  export default {
    title: '基本信息',
    props: ['row'],
    data () {
      return {
        criteriaShow: false,
        devices: [],
        valveLimit: false,
        // 开关阀操作原因
        operateReason: '',
        valve: false
      }
    },

    ready () {
      this.getDevice()
      this.valveLimit = this.$login.r.includes('开关阀权限')
    },
    methods: {
      // 发送请求去数据
      async getDevice () {
        if (this.row) {
          let http = new HttpResetClass()
          let condition = `f_userinfo_id = '${this.row.f_userinfo_id}'`
          let getDevices = await http.load('POST', 'rs/sql/sale_GetDevicesInfo', {data: {condition: condition}}, {rejectMsg: '获取设备信息出错！！', resolveMsg: null})
          this.devices = getDevices.data
        }
      },

      // 返回
      cancelmain () {
        this.$emit('cancel-main')
      },
      openUser () {
        let data = {
          f_userfiles_id: this.row.f_userfiles_id
        }
        this.$resetpost('rs/logic/startup',data)
      },
      // 阀控管理
      zdfk () {
        let data = {
          inputtor: Vue.$login.f.name,
          inputtorid: Vue.$login.f.id,
          meterBrandName: this.row.f_alias,
          f_userfiles_id: this.row.f_userfiles_id
        }
        console.log('55555',this.row.f_network_valve)
        if (this.row.f_network_valve !== '1') {
          this.$resetpost('rs/logic/openzdfk', data, {resolveMsg: '关闭自动阀控成功。', rejectMsg: '关闭自动阀控失败!!!'})
          this.row.f_network_valve = '1'
        } else {
          this.$resetpost('rs/logic/closezdfk', data, {resolveMsg: '开启自动阀控成功。', rejectMsg: '开启自动阀控失败!!!'})
          this.row.f_network_valve = null
        }
      },
      // 阀控管理
      valvecontrol () {
        if (this.$login.r.includes('开关阀')) {
          this.valve = true
        } else {
          this.$showAlert('您没有开关阀权限,请联系管理员！！', 'warning', 3000)
        }
      },
      close () {
        this.valve = false
        this.operateReason = ''
      },
      // 开关阀操作
      async valveoperate (oper) {
        let msg = oper ? '开阀' : '关阀'
        let datas = {
          instructType: '阀门控制',
          instructTitle: `手动${msg}`,
          condition: `t_userfiles.f_userfiles_id='${this.row.f_userfiles_id}'`,
          meterBrandName: this.row.f_alias,  // 气表别名
          f_instruct_state: '待发送',
          inputtor: Vue.$login.f.name,
          inputtorid: Vue.$login.f.id,
          reasonInfo: this.operateReason,   //操作原因
          meternumberf: this.row.f_meternumber,  //表号
          contentData: {isOpen: oper ? 1 : 0}  // oper 为true 时为开阀   false 为关阀
        }
        await this.$resetpost('rs/logic/iot_saveInstruct', {data: datas},
          {warnMsg: `确定要进行${msg}操作吗？`, resolveMsg: `${msg}成功`, rejectMsg: `${msg}失败`}).then(res => {
            this.valve = false
            this.operateReason = ''
          })
      }
    },
    watch: {
      'row' () {
        this.getDevice()
      }
    }
  }
</script>
<style scoped>
  .form-group-new > div {
    height: 3% !important;

  }

  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    height: auto;
    border-radius:15px;
  }

  .input-underline {
    border-bottom: 1px solid #dbdbdb;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
  }
  .font_normal_body_new {
    font-weight: 100;
    float: left;
    margin-top: 0px;
    font-size: 1.4rem !important;
    line-height: 30px;
  }

</style>
