<template>
  <div>
    <div class="panel-heading" style="height: 35px">
      <h5 style="color: #5ac0d9 !important">抄表明细 &nbsp;时间:&nbsp;{{model.startDate}}~{{model.endDate}}</h5>
    </div>
    <div class="info-content" style="height: 95%;margin-top: 5px;">
      <criteria-paged :model="model" v-ref:paged>
        <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row" >
              <div class="col-sm-4">
                <label class="font_normal_body" style="line-height: 23px;">用户编号</label>
                <input type="text" class="form-control" v-model="model.f_userinfo_code"
                       placeholder='用户编号' style="width:60%"
                       condition="u1.f_userinfo_code = '{}'">
              </div>
              <div class="col-sm-4">
                <label class="font_normal_body" style="line-height: 23px;">用户姓名</label>
                <input type="text" class="form-control" v-model="model.f_user_name"
                       placeholder='用户姓名' style="width:60%"
                       condition="u1.f_user_name like '%{}%'">
              </div>
              <div class="col-sm-4" >
                <button type="button" name="button"
                        class="button_search button_spacing" @click="search()">查询</button>
                <export-excel   :data="$parent.$parent.searchData" btn-name="到Excel"
                                :field="$parent.$parent.excelHeaders"
                                sqlurl="api/af-safecheck/logic/exportfile" sql-name="safeCheckHanderAreaDetails"
                                :template-name='$parent.$parent.excelTitle'></export-excel>
                <div class="button_spacing" style = "float:right;"
                     :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom'
                     :!$parent.$parent.criteriaShow}"
                     @click="$parent.$parent.hidden()">
                </div>
              </div>
            </div>
            <div class="row" v-if="$parent.$parent.criteriaShow" style="margin-top:4px;">
              <div class="col-sm-4">
                <label class="font_normal_body" style="line-height: 23px;">用户手机</label>
                <input type="text" class="form-control" v-model="model.f_user_phone"
                       placeholder='用户手机' style="width:60%"
                       condition="u1.f_user_phone = '{}'">
              </div>
              <div class="col-sm-4">
                <label class="font_normal_body" style="line-height: 23px;">抄表状态</label>
                <v-select :value.sync="model.handstate" class="input-font"
                          condition="u2.f_userinfoid  {}"
                          :options='$parent.$parent.handstates' placeholder='请选择抄表状态' :value-single="true"
                          v-model="model.handstate" close-on-select clear-button></v-select>
              </div>
              <div class="col-sm-4">
                <label class="font_normal_body" style="line-height: 23px;">用户地址</label>
                <input type="text" class="form-control" v-model="model.address"
                       placeholder='用户地址' style="width:60%"
                       condition="u1.address like '%{}%'">
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
          <template partial='head'>
            <tr>
              <th><nobr>用户编号</nobr></th>
              <th><nobr>用户姓名</nobr></th>
              <th><nobr>手机号</nobr></th>
              <th><nobr>用户小区</nobr></th>
              <th><nobr>抄表状态</nobr></th>
              <th><nobr>用户地址</nobr></th>
              <th><nobr>本期底数</nobr></th>
              <th><nobr>剩余气量</nobr></th>
              <th><nobr>抄表员</nobr></th>
              <th><nobr>抄表时间</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align: center;white-space:nowrap;">{{row.f_userinfo_code}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_user_name}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_user_phone}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_residential_area}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.state}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.address}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_tablebase}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_surplus_gas}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_inputtor}}</td>
            <td style="text-align: center;white-space:nowrap;">{{row.f_hand_date}}</td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>
</template>

<script>
  import {PagedList} from "vue-client";
  import * as Util from "../Util";

  export default {
    title: "移动抄表各小区详情",
    props: ['check'],
    data() {
      let model = new PagedList('api/af-safecheck/sql/safeCheckHanderAreaDetails', 20, {
        startDate: 'this.startDate',
        endDate: 'this.endDate',
        f_residential_area: 'this.f_residential_area',
        f_user_type: 'this.f_user_type'
      })
      model.startDate = ''
      model.endDate = ''
      model.f_residential_area = ''
      model.f_user_type = ''
      return {
        model: model,
        criteriaShow:false,
        handstates: [{label:'全部',value:''},{label:'已抄表',value:'is not null'},{label:'未抄表',value:'is null'}],
        excelTitle:'安检抄表明细导出'+Util.toStandardTimeString().substring(11,19).replace(new RegExp( ':' , "g" ),""),
        excelHeaders:{
          'f_userinfo_code': '用户编号',
          'f_user_name': '用户姓名',
          'f_user_phone': '手机号',
          'f_residential_area': '用户小区',
          'state': '抄表状态',
          'address': '用户地址',
          'f_tablebase': '本期底数',
          'f_surplus_gas': '剩余气量',
          'f_inputtor': '抄表员',
          'f_hand_date': '抄表时间'
        },
        searchData: {
          condition:"1=1",
          startDate:this.$parent.$refs.arealist.model.startDate,
          endDate:this.$parent.$refs.arealist.model.endDate,
          f_residential_area:this.check.areaend,
          f_user_type: this.check.areaend == '非民用小区'? '非民用': '民用'
        }
      }
    },
    methods: {
      hidden(){
        this.criteriaShow = !this.criteriaShow;
      },
      selfSearch (args) {
        this.model.startDate = this.$parent.$refs.arealist.model.startDate;
        this.model.endDate = this.$parent.$refs.arealist.model.endDate;
        this.model.f_residential_area = this.check.areaend
        this.model.f_user_type =  this.check.areaend == '非民用小区'? '非民用': '民用'
        args.condition += ` AND u1.f_filialeid in ${this.$parent.$refs.arealist.model.f_filialeid_id}`

        this.searchData.startDate =  this.$parent.$refs.arealist.model.startDate;
        this.searchData.endDate = this.$parent.$refs.arealist.model.endDate;
        this.searchData.f_residential_area = this.check.areaend
        this.searchData.f_user_type = this.check.areaend == '非民用小区'? '非民用': '民用'
        this.searchData.condition = args.condition
        return this.model.search(args.condition, args.model)
      }
    },
    // this.item.f_total_gas - this.bottomOfTheCurrentPeriod - this.theRemainingAmount > this.$appdata.getSingleValue('气量异常差值允许误差')) {
    watch: {
      // 当当前选中的小区信息变化，就触发搜索
      'check' : function () {
        if (this.check) {
          this.$refs.paged.$refs.cri.search()
        }
      }
    },
    ready () {
      // 从父级兄弟组件中取开始时间和结束时间
      this.model.startDate = this.$parent.$refs.arealist.model.startDate;
      this.model.endDate = this.$parent.$refs.arealist.model.endDate;
      this.model.f_residential_area = this.check.areaend
      this.$refs.paged.$refs.cri.search()
    }
  }
</script>

<style scoped>

</style>
