<template>
  <div class="auto">
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">小区名称：</label>
              </div>
              <div class="col-xs-8" >
                <input style="width: 100%" class="search_input input-font" v-model="model.f_residential_area" placeholder="请输入用户小区（可模糊查询）" condition="f_residential_area like '%{}%'">
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">安检起始：</label>
              </div>
              <div class="col-xs-8" >
                <v-select class="input-font"
                          :value.sync="model.f_last_check_date_s"
                          v-model="model.f_last_check_date_s"
                          :options='$parent.$parent.options'
                          condition="f_last_check_date >= '{} 00:00:01'"
                          close-on-select clear-button></v-select>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">安检结束：</label>
              </div>
              <div class="col-xs-8" >
                <v-select class="input-font"
                          :value.sync="model.f_last_check_date_e"
                          v-model="model.f_last_check_date_e"
                          :options='$parent.$parent.options'
                          condition="f_last_check_date <= '{} 23:59:59'"
                          close-on-select clear-button></v-select>
              </div>
            </div>
            <div class="row 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 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">
                  <p class="panel-title col-xs-4 text-left font">小区名</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_residential_area }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户总数</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.count }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">入户数</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.count_rh }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">到访不遇数</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.count_dfby }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">拒检数</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.count_jj }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">入户率</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.check_bv }}%</p>
                </div>

              </div>
            </div>

          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'

  export default {
    title: '安检员B',
    data () {
      return {
        model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_singleTable_GroupBy`, 50, {
          items: '"f_residential_area,' +
            'COUNT ( 0 ) as count,' +
            'SUM ( CASE WHEN f_last_check_state = \'入户\' THEN 1 ELSE 0 END ) AS count_rh,' +
            'SUM ( CASE WHEN f_last_check_state = \'到访不遇\' THEN 1 ELSE 0 END ) AS count_dfby,' +
            'SUM ( CASE WHEN f_last_check_state = \'拒检\' THEN 1 ELSE 0 END ) AS count_jj,' +
            'SUM ( CASE WHEN f_last_check_state IS NULL THEN 1 ELSE 0 END ) AS count_wj,' +
            'CAST(SUM(CASE WHEN f_last_check_state = \'入户\' THEN 1 ELSE 0 END) * 100.0 / COUNT(*) AS DECIMAL(18, 2)) AS check_bv"',
          tablename: '"t_user_address "',
          groupitem: '"f_residential_area"'
        }),
      }
    },
    ready () {
      console.log(this.model)
    },
    computed: {
      reload(){
      },
    },
    methods:{
      selfSearch(args){
        this.model.search(args.condition)
      }
    },
    components: {
    }
  }
</script>
<style scoped>
  .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>
