<template>
  <div class="app-row">
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
        <div partial>
          <form>
            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
              <div class="col-xs-6 col-sm-6 col-md-6">
                <img src="../../assets/卡号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6" >
                <input class="search_input input-font"
                       v-model=model.f_card_id condition="f_card_id = '{}'" placeholder="请输入卡号" />
              </div>
            </div>
            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
              <div class="col-xs-6 col-sm-6 col-md-6">
                <img src="../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6" >
                <input class="search_input input-font"
                       v-model=model.f_meternumber condition="f_meternumber = '{}'" placeholder="请输入表号" />
              </div>
            </div>
            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
              <div class="col-xs-6 col-sm-6 col-md-6">
                <img src="../../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6" >
                <input class="search_input input-font" condition="f_user_name like '%{}%'" v-model="model.f_username" placeholder="请输入用户名称">
              </div>
            </div>
            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">
              <div class="col-xs-6 col-sm-6 col-md-6">
                <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">小区名称：</label>
              </div>
              <div class="col-xs-6 col-sm-6 col-md-6" >
                <input style="width: 100%" condition="f_residential_area like '%{}%'" class="search_input input-font" v-model="model.f_residential_area" placeholder="请输入用户小区（可模糊查询）">
              </div>
            </div>
<!--            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">-->
<!--              <div class="col-xs-6 col-sm-6 col-md-6">-->
<!--                <img src="../../assets/街道.png" style="width: 20px;margin-bottom: 5px" alt="">-->
<!--                <label class="font text-left">街&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;道：</label>-->
<!--              </div>-->
<!--              <div class="col-xs-6 col-sm-6 col-md-6" >-->
<!--                <input style="width: 100%" class="search_input input-font" condition="f_street like '{}%'" v-model="model.f_street" placeholder="请输入用户单元">-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="row col-xs-6 col-sm-6 col-md-6 app-row">-->
<!--              <div class="col-xs-6 col-sm-6 col-md-6">-->
<!--                <img src="../../assets/地址.png" style="width: 20px;margin-bottom: 5px" alt="">-->
<!--                <label class="font text-left">用户地址：</label>-->
<!--              </div>-->
<!--              <div class="col-xs-6 col-sm-6 col-md-6" >-->
<!--                <input style="width: 100%" condition="f_address like '%{}%'" class="search_input input-font" v-model="model.f_address" placeholder="请输入用户地址（可模糊查询）">-->
<!--              </div>-->
<!--            </div>-->
            <div class="row col-xs-6 col-sm-12 col-md-6 text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="search">查询</button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>

      <list :model="model" partial='list'>
        <div partial>
          <div @click="$parent.$parent.$parent.selectCheck(row)" class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="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">卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</p>
                  <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_card_id }}</p>
                </div>
                <div class="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">表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</p>
                  <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="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 input-font">{{ row.f_user_name }}</p>
                </div>
                <div class="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-8 text-left input-font">{{ row.f_meter_brand }}</p>
                </div>
                <div class="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 input-font">{{ row.f_user_phone }}</p>
                </div>

                <div class="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 input-font">{{ row.f_residential_area }}</p>
                </div>
                <div class="row col-xs-12 col-sm-6 col-md-6">
                  <p class="panel-title col-xs-4 col-sm-4 col-md-4-4 text-left font">用户地址</p>
                  <p class="panel-title col-xs-8 col-sm-8 col-md-8 text-left input-font">{{ row.f_address }}</p>
                </div>
                <div class="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 input-font">{{ row.f_lasttimecb }}</p>
                </div>

              </div>
            </div>

          </div>
        </div>
      </list>
    </criteria-paged>
<!--    <back-page :need-back='true'   @flag="$back()"></back-page>-->
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import Vue from 'vue'
import co from 'co'
let getDataGen = function * (val,self) {
  yield self.$resetpost(Vue.handdataUrl + 'rs/sql/getUserInfo', {data:{
      condition:`card_id = '${val.f_card_id}'`
    }}, {resolveMsg: null, rejectMsg: null})
    .then((res) =>{
      console.log(JSON.stringify(res.data))
      if(res.data.length>0){
        self.row = Object.assign(self.row,res.data[0])
      }
      console.log(self.row)
      self.row.id = self.row.f_download
      self.row.f_plan_type = '周检表计划'
      self.row.f_sign = '临时周检'
      self.row.f_card_id = self.row.card_id
      console.log(Vue.user)
      self.row.f_inputtor = Vue.user.name
      self.$dispatch('changepage', self.row, 'onlinecheck')
    })
}
export default {
  title: '临时周检',
  data () {
    let model = new PagedList(Vue.handdataUrl + 'rs/sql/getHandUserInfo', 20, {})
    return {
      model: model,
      row:{},
      showModal:false,
      selectRow:null
    }
  },
  ready () {
  },
  computed: {

    reload(){
      this.$refs.paged.loadPage(this.$refs.paged.model.pageIndex)
    },
    selected () {
      return this.$refs.paged.$refs.grid.selected
    }
  },
  methods:{
    selectCheck(info){
      console.log(info)
      let gen = getDataGen(info,this)
      co(gen)
    },
    ok(){

    },
    cancel(){
      this.showModal=false
      this.safecheckType='工商无计划安检'
    },
    search(args){
      console.log('args',args)
      console.log('this.model',this.model)
      this.model.search(args.condition, args.model)
    }
  }
}
</script>
<style>
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}
.search_input {
  border: 0;
  outline: none;
}
.font{
  font: 15px PingFang-SC-Medium;
  color: #666666;
}
.input-font{
  font: 15px PingFang-SC-Medium;
  color: #333333;
}
.btn-font{
  font:600 16px PingFang-SC-Bold;
  color: #499EDF;
}
.btn-color{
  background-color: #FFFFFF;
  border-radius: 10px ;
  border: 1px solid #499EDF;
}
.app-text {
  font-size: 12px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.yybtn-color{
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
.qxbtn-color{
  background-color: #FFFFFF;
  border-radius: 4px ;
  border: 1px solid #499EDF;
}
</style>
