<template >
  <div class="auto">
  <div class="auto form-group-new">
    <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="驾驶证" readonly>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body_new">证件号码</label>
          <input class="input-underline" style="width:80%" :value="row.f_driver_no" 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-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="devices.f_meternumber" readonly>
        </div>
        <div class="col-sm-4">
            <label class="font_normal_body_new">汽车状态</label>
            <input class="input-underline" style="width:60%" :value="devices.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_initial_base" readonly>-->
        <!--</div>-->
        <div class="col-sm-4">
          <label class="font_normal_body_new">汽车品牌</label>
          <input class="input-underline" style="width:60%" :value="devices.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="devices.f_cyclinder_start_time" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">钢瓶到期时间</label>
        <input class="input-underline" style="width:60%" :value="devices.f_cyclinder_time" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">行驶证开始时间</label>
        <input class="input-underline" style="width:60%" :value="devices.f_license_start_time" readonly>
      </div>
      <div class="col-sm-4">
        <label class="font_normal_body_new">行驶证到期时间</label>
        <input class="input-underline" style="width:60%" :value="devices.f_license_time" readonly>
      </div>
    </div>
  </div>
  <div class="auto" style="float: right;">
      <button class="button_clear " @click="cancelmain()" >返回</button>
  </div>
  </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[0]
          console.log(this.devices)
        }
      },

      // 返回
      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>
  .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>
