<template >
  <div class="auto" style="overflow-y: scroll;">
    <div class="row">
      <div style="float: left">
        <label class="font_normal_body">基本信息</label>
      </div>
      <div class="span" style="float: right;">
        <button class="button_search " @click="cancelmain()" >返回</button>
      </div>
    </div>
    <div class="panel panel-primary datapanel">
      <!--    第一行数据-->
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">客户编号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_userinfo_code}}</p>
          </div>
          <label class="col-sm-3 control-label">客户姓名</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_name}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">客户地址</label>
          <div class="col-sm-9">
            <p class="form-control-static">{{row.f_address}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">用户状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_state}}</p>
          </div>
          <label class="col-sm-3 control-label">客户电话</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_phone}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">证件类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_credentials}}</p>
          </div>

          <label class="col-sm-3 control-label">证件号码</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_idnumber}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">客户类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_type}}</p>
          </div>

          <label class="col-sm-3 control-label">用气性质</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_gasproperties}}</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-3 control-label">用户状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_user_state}}</p>
          </div>

          <label class="col-sm-3 control-label">账户余额</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_balance}}</p>
          </div>
        </div>
        <!--<div class="form-group">-->
          <!--<label class="col-sm-3 control-label">人&ensp;口&ensp;数</label>-->
          <!--<div class="col-sm-3">-->
            <!--<p class="form-control-static">{{row.f_people_num}}</p>-->
          <!--</div>-->
        <!--</div>-->
      </form>
    </div>
    <div class="row">
      <div  style="float: left">
        <label class="font_normal_body">车俩信息</label>
      </div>
    </div>
    <div class="panel panel-primary datapanel">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-3 control-label">车牌号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meternumber}}</p>
          </div>

          <label class="col-sm-3 control-label">汽车状态</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_table_state}}</p>
          </div>
        </div>
        <!--<div class="form-group">-->
          <!--<label class="col-sm-3 control-label">汽车读数</label>-->
          <!--<div class="col-sm-3">-->
            <!--<p class="form-control-static">{{row.f_meter_base}}</p>-->
          <!--</div>-->
          <!--<label class="col-sm-3 control-label">初始底数</label>-->
          <!--<div class="col-sm-3">-->
            <!--<p class="form-control-static">{{row.f_initial_base}}</p>-->
          <!--</div>-->

        <!--</div>-->
        <div class="form-group">
          <label class="col-sm-3 control-label">汽车品牌</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_brand}}</p>
          </div>

          <label class="col-sm-3 control-label">汽车型号</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_style}}</p>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">汽车类型</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_meter_type}}</p>
          </div>

<!--          <label class="col-sm-3 control-label">气价名称</label>-->
<!--          <div class="col-sm-3">-->
<!--            <p class="form-control-static">{{row.f_price_name}}</p>-->
<!--          </div>-->
        </div>
<!--        <div class="form-group">-->
<!--          <label class="col-sm-3 control-label">气价类型</label>-->
<!--          <div class="col-sm-3">-->
<!--            <p class="form-control-static">{{row.f_price_type}}</p>-->
<!--          </div>-->

<!--          <label class="col-sm-3 control-label">价格详情</label>-->
<!--          <div class="col-sm-3">-->
<!--            <p class="form-control-static">{{row.f_detailprice}}</p>-->
<!--          </div>-->
<!--        </div>-->
        <!--<div class="form-group">-->
          <!--<label class="col-sm-3 control-label">左&ensp;右&ensp;表</label>-->
          <!--<div class="col-sm-3">-->
            <!--<p class="form-control-static">{{row.f_aroundmeter}}</p>-->
          <!--</div>-->
          <!--<label class="col-sm-3 control-label" title="最后上报时间">上报时间</label>-->
          <!--<div class="col-sm-3">-->
            <!--<p class="form-control-static">{{row.f_meteread_date ? row.f_meteread_date : "暂无"}}</p>-->
          <!--</div>-->
        <!--</div>-->
        <div v-if="row.f_collection_type == '按金额'" class="form-group">
            <label class="col-sm-3 control-label">累购金额</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_total_fee}}</p>
            </div>
        </div>
        <div v-if="row.f_collection_type == '按气量'" class="form-group">
          <label class="col-sm-3 control-label">累购气量</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_total_gas}}</p>
          </div>
          <label class="col-sm-3 control-label">最后结算时间</label>
          <div class="col-sm-3">
            <p class="form-control-static">{{row.f_hand_date  ? row.f_hand_date : "暂无"}}</p>
          </div>
        </div>
        <div v-if="row.f_meter_type.includes('物联网表')">
          <div class="form-group" >
              <label class="col-sm-3 control-label">该车剩余金额</label>
              <div class="col-sm-3">
                <p class="form-control-static">{{row.f_balance_amount}}</p>
              </div>
              <!--<label class="col-sm-3 control-label">阀门状态</label>-->
              <!--<div class="col-sm-3">-->
                <!--<p class="form-control-static">-->
                  <!--{{row.f_valvestate == 0 ? '已开阀' : '已关阀'}}-->
                  <!--<button class="btn btn-link" type="button" style="margin-left: 20%" @click="valvecontrol">{{row.f_valvestate == 0 ? '关阀' : '开阀'}}</button>-->
                <!--</p>-->
              <!--</div>-->
          </div>
          <!--<div class="form-group" >-->
            <!--<label class="col-sm-3 control-label">累计上报次数</label>-->
            <!--<div class="col-sm-3">-->
              <!--<p class="form-control-static">{{row.f_meteread_number ? row.f_meteread_number : 0}}</p>-->
            <!--</div>-->
            <!--<label class="col-sm-3 control-label">是否自动阀控</label>-->
            <!--<div class="col-sm-3">-->
              <!--<p class="form-control-static">-->
                <!--{{row.f_network_valve == null ? '否' : '是'}}-->
                <!--<button class="btn btn-link" type="button" style="margin-left: 20%" @click="zdfk">{{row.f_network_valve == null ? '开启' : '关闭'}}</button>-->
              <!--</p>-->
            <!--</div>-->
          <!--</div>-->
        </div>
          <div v-if="row.f_collection_type == '按气量'"  class="form-group">
            <label class="col-sm-3 control-label">该车剩余气量</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_balance_gas}}</p>
            </div>
            <label class="col-sm-3 control-label">累计用气金额</label>
            <div class="col-sm-3">
              <p class="form-control-static">{{row.f_total_usegas_amount}}</p>
            </div>
          </div>
      </form>
    </div>
    <div  v-if="devices.length > 0" style="height: auto" >
      <div class="row">
        <div   style="float: left">
          <label class="font_normal_body" >设备信息</label>
        </div>
      </div>
      <div v-for="device in devices" class="panel panel-primary datapanel">

        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label">设备类型</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_type}}</p>
            </div>

            <label class="col-sm-2 control-label">设备品牌</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_brand}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">设备型号</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_model}}</p>
            </div>

            <label class="col-sm-2 control-label">设备数量</label>
            <div class="col-sm-4">
              <p class="form-control-static">{{device.f_devices_num}}</p>
            </div>
          </div>
        </form>
      </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" 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" v-show="row.f_valvestate != 0 " @click='valveoperate(true)'>开阀</button>-->
      <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
      <!--<button  type="button" class="btn btn-info btn-ln fr" v-show="row.f_valvestate == 0" @click='valveoperate(false)'>关阀</button>-->
    <!--</footer>-->
  <!--</modal>-->
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  import vue from 'vue'
  export default {
    title: '基本信息',
    props: ['row'],
    data () {
      return {
        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')
      },
      // 阀控管理
      zdfk () {
        let data = {
          f_userfiles_id: this.row.f_userfiles_id
        }
        if (this.row.f_network_valve == null) {
          this.$resetpost('rs/logic/openzdfk', data, {resolveMsg: '开启自动阀控成功。', rejectMsg: '开启自动阀控失败!!!'})
        } else {
          this.$resetpost('rs/logic/closezdfk', data, {resolveMsg: '关闭自动阀控成功。', rejectMsg: '关闭自动阀控失败!!!'})
        }
      },
      // 阀控管理
      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,
          reasonInfo: this.operateReason,
          meternumberf: this.row.f_meternumber,
          contentData: {isOpen: oper ? 1 : 0}
        }
        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>
  .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;
  }
</style>
