<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;
}

table {
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  width: 50%;
  border-collapse: collapse;
  margin: 20px 0;
  margin: auto;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #f5f5f5;
}
</style>
<template>
  <div style="height: auto;width: 100%">
    <criteria-paged :model="model" v-ref:paged :pager="false">
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_userinfo_code" class="search_input input-font"
                       v-model=model.f_userinfo_code condition="f_userinfo_code like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_name" class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_name" class="search_input input-font"
                       v-model=model.f_user_name condition="f_user_name like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_phone" class="font text-left">用户电话：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_phone" class="search_input input-font"
                       v-model=model.f_user_phone condition="f_user_phone like '%{}%'" />
              </div>
            </div>
            <div class="row app-row" >
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">表&emsp;&emsp;号：</label>
              </div>
              <div class="col-xs-5">
                <input class="search_input input-font" v-model=model.f_meter_no
                       condition="f_meter_no like '%{}%'" />
              </div>
              <div class="col-xs-3">
                <button type="button" class="btn btn-lg btn-font btn-color"
                        @click="$parent.$parent.scan()">扫码</button>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">楼栋：</label>
              </div>
              <div class="col-xs-8">
                <input id="f_userinfo_code" class="search_input input-font" v-model=model.f_building
                       condition="f_building like '%{}%'" />
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="search">查询</button>
              <img @click="$parent.$parent.getNewOrder" src="../../assets/shuaxindaiban1.png"
                   style="float: right;margin-right: 3%;width: 40px;padding: 5px; float:right">
            </div>
            <div class="col-sm-12">
            </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" @click="$parent.$parent.$parent.gotoUserinfoSelect(row)">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>小区名称:</b></p>
                  <p class="panel-title col-xs-5 text-left input-font" style="width: 74%">{{
                      $parent.$parent.$parent.row.f_residential_area }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>小区地址:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{
                      $parent.$parent.$parent.row.f_area_address }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>楼栋:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{
                      row.f_building }}</p>
                </div>
                <div class="col-xs-12">
                  <table>
                    <tr>
                      <td style="color: #00A3F0">{{ row.jihuazongshu }}</td>
                      <td style="color: #3CC51F">{{ row.yijian }}</td>
                      <td style="color: coral">{{ row.weijian }}</td>
                      <td style="color: red">{{ row.daofangbuyu }}</td>
                    </tr>
                    <tr>
                      <th>计划总户数</th>
                      <th>已检户数</th>
                      <th>未检户数</th>
                      <th>到访不遇户数</th>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>
import LocalPagedList from '../../plugins/LocalPagedList'
export default {
  title: 'building-select',
  props: ['row', 'f_plan_id'],
  data() {
    return {
      model: new LocalPagedList('androidGetuserinfo', 20, { condition: 'this.condition' }),
    }
  },
  ready() {
    this.$refs.paged.$refs.cri.search()
  },
  methods: {
    scan() {
      HostApp.__this__ = this,
        HostApp.scanCode({ callback: "javascript:HostApp.__this__.getCode();" })
    },
    getCode() {
      const datapa = HostApp.getCode().data;
      this.$refs.paged.$refs.cri.model.f_meter_no = datapa

    },
    getNewOrder() {
      HostApp.__this__ = this
      HostApp.logicWithHint({
        'logic': 'SafeCheckServiceTimeOut',
        'callback': 'javascript:HostApp.__this__.getNewOrderCallBack()',
        'data': { params: '' },
        'backresult': 1
      })
      HostApp.logicWithHint({
        'logic': 'FreshPlanItem',
        'callback': 'javascript:HostApp.__this__.getNewOrderCallBack()',
        'data': { params: '' },
        'backresult': 1
      })
    },
    getNewOrderCallBack() {
      this.model.search()
    },
    gotoUserinfoSelect(row) {
      let _this = this
      _this.$dispatch('gotoson', {
        _this: _this,
        title: '用户',
        safe: false
      })
      _this.$goto('userinfo-select', { row: { f_plan_id: this.f_plan_id, f_residential_area: this.row.f_residential_area, f_area_address: this.row.f_area_address, f_building: row.f_building } })
    },
    search(args) {
      this.model.rows = []
      args.condition += ` and f_plan_id = '${this.f_plan_id}' and f_residential_area = '${this.row.f_residential_area}'`
      let criteria = {
        items: `case when tcpi.f_building is null or tcpi.f_building = '' then '' else tcpi.f_building end as f_building,COUNT(tcpi.id) as jihuazongshu,sum( CASE WHEN tcpi.f_state = '未检' THEN 1 ELSE 0 END ) as weijian,sum( CASE WHEN tcpi.f_state = '已检' THEN 1 ELSE 0 END ) as yijian,sum( CASE WHEN tcpi.f_last_check_state = '到访不遇' THEN 1 ELSE 0 END ) as daofangbuyu`,
        tablename: 't_check_plan_item tcpi ',
        condition: args.condition,
        groupitem: `case when tcpi.f_building is null or tcpi.f_building = '' then '' else tcpi.f_building end`
      }
      let result = HostApp._executeTask({ 'type': 'sql', 'data': { 'alias': 'safe_singleTable_GroupBy', 'criteria': criteria } })
      this.model.rows = result.data.rows
    },
  }
}
</script>
