<style>
  .bg {
    background-color: blue;
    height: 1px;
    border: 0;
  }
  .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>

<template>
  <div class="app-bg auto">
    <criteria-paged :model="model" v-ref:apage>
      <criteria partial='criteria' @condition-changed='search' v-ref:acondition>
        <div partial>
          <form >
            <div class="form-group">
              <span for="f_keyword" class="col-xs-3 control-label text-right">小区：</span>
              <input class="form-control col-xs-4" id="f_keyword"
              v-model=model.f_keyword  condition="f_residential_area like '%{}%'" />
              <button type="button" class="btn btn-primary" @click="search">查询</button>
        </div>
          <!--  <button type="button" class="btn btn-default" @click="$parent.$parent.getVerify">更新审核信息</button>-->
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div @click="$parent.$parent.$parent.inspect(row)"  class="col-md-12 col-lg-12">
            <table class="table table-user-information table-self">
          <tr class="row">
            <td  class="col-xs-4 col-sm-4 col-md-4">小区</td>
            <td class="col-xs-4 col-sm-4 col-md-4">{{row.f_residential_area}}</td>
            <td class="col-xs-4 col-sm-4 col-md-4"></td>
          </tr>
          <tr class="row">
            <td  class="col-xs-4 col-sm-4 col-md-4">户数 {{row.n}}</td>
            <td  class="col-xs-4 col-sm-4 col-md-4">已检 {{row.checked}}</td>
            <td  class="col-xs-4 col-sm-4 col-md-4">未检 {{row.unchecked}}</td>
          </tr>
          <tr class="row">
            <td class="col-xs-4 col-sm-4 col-md-4"></td>
            <td class="col-xs-4 col-sm-4 col-md-4">已传 {{row.verified}}</td>
            <td class="col-xs-4 col-sm-4 col-md-4">未传 {{row.withdrawn}}</td>
          </tr>
              <tr class="row">
                <td class="col-xs-4 col-sm-4 col-md-4">入户 {{row.centry}}</td>
                <td class="col-xs-4 col-sm-4 col-md-4">拒检 {{row.cdeny}}</td>
                <td class="col-xs-4 col-sm-4 col-md-4">到访不遇 {{row.cabsent}}</td>
           </tr>
              </table>
          </div>
        </div>
      </list>
    </criteria-paged>
    <back-page :need-back='true'   @flag="$back()"></back-page>
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import { PagedList } from 'vue-client'

export default {
  title: '小区列表界面 ResidentialAreaList',
  props: ['f_plan_id'],
  data() {
    return {
      model: Vue.android ? new LocalPagedList('计划小区分组', 5, {f_plan_id: 'this.f_plan_id'}) : new PagedList( 'AndroidRest/api/af-safecheck/sql/计划小区分组', 5, {f_plan_id: 'this.f_plan_id'})
    }
  },
  methods: {
    refresh() {
      console.log("refresh items state")
      // hard code relationship
      this.$refs.apage.$refs.acondition.search()
    },
    inspect(row) {
      if(!row.f_residential_area) {
        row.f_residential_area = null
      }
      this.$goto('check-plan-items', {f_plan_id: this.f_plan_id, f_residential_area: row.f_residential_area}, 'self', this.refresh)
    },
    getVerify () {
      HostApp.__callback__ = this.callback
      HostApp.__this__ = this
      HostApp.refreshPaperApproval({f_plan_id: this.f_plan_id})
    },
    callback (flag) {
      if (flag) {
        HostApp.alert('更新成功！')
        this.$refs.apage.$refs.acondition.search()
      } else {
        HostApp.alert('更新失败！')
      }
    },
  },
  ready() {
      this.model.f_plan_id = this.f_plan_id
      this.refresh()
  },
}
</script>
<style>
  .form-control{
    width: 40%;
  }
  .table-self{
    border-radius: 10px;
    border:1px solid #499EDF;
    background-color: white;
  }

</style>
