<template>

  <div class="auto app-text " style="margin-top: 5px;">
    <header class="head" >
      用户基本信息
    </header>
    <div class="panel" style="padding: 10px 10px 5px 10px;">
      <div class="panel-body panel-self">
        <div class="col-xs-12 col-sm-12 col-md-12 auto bg-white">
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left font">到达日期</p>
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left show-font">{{ data.f_start_time.substring(0,11) }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left font">到达时间</p>
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left show-font">{{ data.f_start_time.substring(11,19) }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left font">离开时间</p>
          <p class="panel-title col-xs-6 col-sm-6 col-md-6 text-left show-font">{{ data.f_end_time.substring(11,19)}}</p>
        </div>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-12 col-md-12">
        <!--<div class="col-xs-12 col-sm-6 col-md-6">-->
          <p class="panel-title col-xs-4 col-sm-2 col-md-2 text-left font">客户名称</p>
          <p class="panel-title col-xs-8 col-sm-4 col-md-4 text-left show-font">{{ model.f_user_name }}</p>
        <!--</div>-->
        <!--<div class="col-xs-12 col-sm-6 col-md-6 bg-white app-input">-->
          <label for="f_card_id" class="panel-title col-xs-4 col-sm-2 col-md-2 text-left font">卡号</label>
          <div class="col-xs-6  col-sm-3 col-md-3 ">
            <input type="number" id="f_card_id" class="form-control font " v-model="data.f_card_id">
          </div>
          <div class="col-sm-1 col-xs-2 col-md-1">
            <button type="button" name="button" class="btn btn-primary" @click="findUserByCardId(data.card_id)"
                   >查找
            </button>
          </div>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-12 col-md-12">
          <p class="panel-title col-xs-4 col-sm-2 col-md-2 text-left font">用气区域</p>
          <p class="panel-title col-xs-8 col-sm-4 col-md-4 text-left show-font">{{ model.f_gas_area }}</p>
        <!--</div>-->
        <!--<div class="row auto app-row col-xs-12 col-sm-6 col-md-6">-->
          <p class="panel-title col-xs-4 col-sm-2 col-md-2 text-left font">用气点</p>
          <p class="panel-title col-xs-8 col-sm-4 col-md-4 text-left show-font">{{ model.f_point_name }}</p>
        </div>
        <!--<div class="row auto app-row col-xs-12 col-sm-6 col-md-6">-->
          <!--<p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">档案名称</p>-->
          <!--<p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_customers}}</p>-->
        <!--</div>-->
        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6">
          <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">联系人</p>
          <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_linkname}}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6">
          <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">联系电话</p>
          <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_user_phone }}</p>
        </div>
        <!--<div class="row auto app-row col-xs-12 col-sm-6 col-md-6">-->
          <!--<p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">单位编码</p>-->
          <!--<p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_unitid }}</p>-->
        <!--</div>-->
        <div class="row auto app-row col-xs-12 col-sm-12 col-md-12">
          <p class="panel-title col-xs-4 col-sm-2 col-md-2 text-left font">客户地址</p>
          <p class="panel-title col-xs-8 col-sm-10 col-md-10 text-left show-font">{{ model.f_address
            }}{{model.f_address_detail}}</p>
        </div>
        <!--<div class="row auto app-row col-xs-12 col-sm-6 col-md-6">-->
          <!--<p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">客服档案地址</p>-->
          <!--<p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_customersarchives}}</p>-->
        <!--</div>-->

        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6">
          <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">用气设备</p>
          <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_devices_type }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6">
          <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">用户类型</p>
          <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_user_type }}</p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 auto bg-white">
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">安全等级</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_safelevel }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">网格编号</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_grid_code }}</p>
        </div>

        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">设备用途</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_ratedflow}}</p>
        </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 auto bg-white">
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">小时耗气量</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_consumption}}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">设备负荷</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_equipmentload }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-4 col-md-4">
          <p class="panel-title col-xs-4 col-sm-6 col-md-6 text-left font">日使用时长</p>
          <p class="panel-title col-xs-8 col-sm-6 col-md-6 text-left show-font">{{ model.f_daytime }}</p>
        </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 auto bg-white">
        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6">
          <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">开户时间</p>
          <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_createfile_date }}</p>
        </div>
        <div class="row auto app-row col-xs-12 col-sm-6 col-md-6 ">
            <p class="panel-title col-xs-4 col-sm-4 col-md-4 text-left font">点火时间</p>
            <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left show-font">{{ model.f_gas_date }}</p>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import Vue from 'vue'

  let getDataGen = function * (self, val) {

    yield self.$resetpost(Vue.handdataUrl + 'rs/sql/getUserInfo', {data:{
        condition:`card_id = '${self.data.f_card_id}'`
      }}, {resolveMsg: null, rejectMsg: null})
      .then((res) =>{
        console.log(JSON.stringify(res.data));
        if(res.data.length>0){
          self.data = Object.assign(self.data,res.data[0])
          self.model = Object.assign(self.model,res.data[0])
        }

      })
  }
  export default {
    title: '用户基本信息',
    props: {
      data: {
        type: Object
      },
      showmessage: true
    },
    data () {
      return {
        model: {
          f_start_time:'',
          f_end_time:'',
          f_start_date:'',
          f_user_name: '',
          f_card_id: '',
          f_gas_area: '',
          f_point_name: '',
          f_customers: '',
          f_linkname: '',
          f_user_phone: '',
          f_unitid: '',
          f_address: '',
          f_address_detail: '',
          f_customersarchives: '',
          f_safelevel: '',
          f_devices_type: '',
          f_grid_code: '',
          f_user_type: '',
          f_ratedflow: '',
          f_consumption: '',
          f_equipmentload: '',
          f_daytime: '',
          f_createfile_date: '',
          f_runtime: ''
        }
      }
    },
    methods: {
      getNow(){
        this.data.f_end_time = Util.toStandardTimeString()
      },
      findUserByCardId(){
          let gen = getDataGen(this)
          co(gen)
      }
    },
    ready () {
      this.model = Object.assign({}, this.model, this.data)
      this.data.f_start_time=this.data.f_start_time? this.data.f_start_time:Util.toStandardTimeString()
      if(!this.data.f_end_time){
        setInterval(this.getNow,1000)
      }
    },
    watch: {
      'data.id'(){
        console.log('开始获取数据')
        this.model = Object.assign({}, this.model, this.data)
      }
    },
    computed: {}
  }
</script>
<style lang="less" scoped>
  .class-erro {
    color: #a94442;
  }
.head{
  font-size: 1.25em;
  font-weight: bolder;
  padding: 0.5em;
}
  /*p{*/
  /*font-weight: bold;*/
  /*}*/
</style>

