<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' class="search_area" @condition-changed='$parent.search' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }">
              <label class="font_normal_body">小区名称</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_residential_area"
                     placeholder='小区名称' condition="ta.f_residential_area like '%{}%'" v-next-el="cx" v-el:qjmc>
            </div>
            <div
              class="form-group col-sm-3"
              style="float:right; padding-right: 25px">
              <div class="span" style="float:right;">
                <div class="button_spacing" style="float: right;margin-left:10px"
                     :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                     @click="$parent.$parent.hidden()">
                </div>
                <export-excel-safe :data="$parent.$parent.searchData" :field="$parent.$parent.excelHeaders"
                                   sqlurl="rs/logic/SafeExportExcel" sql-name="selectAreaReport" template-name='小区安检汇总'
                                   :choose-col="true">
                </export-excel-safe>
                <button id="btnaaa" style="float: right" class="button_search"
                        @click="search()"
                        v-el:cx>查询</button>
                <button id="cle" style="float: right" class="button_search" @click="$parent.$parent.cleamsg()"
                        v-el:cx>清空</button>
              </div>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">安检时间</label>
              <datepicker :value.sync="model.f_safe_start" placeholder='开始时间' style="width: 60%" condition="cp.f_offsite_time >= '{}'"
                          :disabled-days-of-week="[]" :format="'yyyy-MM-dd 00:00:00'" :show-rest-button="reset"
                          v-model="model.f_safe_start">
              </datepicker>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">安检时间</label>
              <datepicker :value.sync="model.f_safe_end" placeholder='结束时间' style="width: 60%" condition="cp.f_offsite_time <= '{}'"
                          :disabled-days-of-week="[]" :format="'yyyy-MM-dd 23:59:59'" :show-rest-button="reset"
                          v-model="model.f_safe_end">
              </datepicker>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">区&emsp;&emsp;域</label>
              <v-select :value.sync="model.f_quyu" :value-single="true" v-model="model.f_quyu" condition="ui.f_user_region = '{}'"
                        :options='$parent.$parent.quyus' placeholder='区域' class="select_list select" style="width: 60%"
                        @change="$parent.$parent.quyuChange" close-on-select>
              </v-select>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">营&ensp;业&ensp;厅</label>
              <v-select :value.sync="model.f_bumen" :value-single="true" v-model="model.f_bumen"
                        :options='$parent.$parent.bumens' placeholder='营业厅' @change="$parent.$parent.bumenChange" condition="ui.f_user_business_hall = '{}'"
                        class="select_list select" style="width: 60%" close-on-select>
              </v-select>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">小&emsp;&emsp;组</label>
              <v-select :value.sync="model.f_team" :value-single="true" v-model="model.f_team"
                        :options='$parent.$parent.teams' placeholder='小组' @change="$parent.$parent.teamChange"
                        class="select_list select" style="width: 60%" close-on-select>
              </v-select>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">安&ensp;检&ensp;员</label>
              <v-select :value.sync="model.f_checker_id" v-model="model.f_checker_id" :multiple="true"
                        class="select_list select" style="width: 60%" :options='$parent.$parent.checkers' placeholder='安检员'
                        condition="cp.f_checker_name in {}" close-on-select>
              </v-select>
            </div>
            <div
              :class="{ 'form-group col-sm-3': $parent.$parent.$parent.isdetail, 'form-group col-sm-2': !$parent.$parent.$parent.isdetail }"
              v-if="$parent.$parent.criteriaShow">
              <label class="font_normal_body">用户类型</label>
              <v-select :value.sync="model.f_check_type" v-model='model.f_check_type' :value-single="true"
                        style="width: 60%" class="select_list select" :options='$parent.$parent.checktype' placeholder='客户类型'
                        close-on-select condition="f_check_type = '{}'"></v-select>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
        <template partial='head'>
          <tr>
            <th>区域</th>
            <th>小区名称</th>
            <th>小区用户数</th>
            <th>计划内入户数</th>
            <th>无计划入户数</th>
            <th>计划内到访不遇数</th>
            <th>无计划到访不遇数</th>
            <th>计划内拒检数</th>
            <th>无计划拒检数</th>
            <th>计划内激光检测数</th>
            <th>无计划激光检测数</th>
            <th>入户数</th>
            <th>到访不遇数</th>
            <th>拒检数</th>
            <th>激光检测数</th>
            <th>入户率</th>
            <th>安检率</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center">{{ row.f_user_region }}</td>
          <td style="text-align: center">{{ row.f_residential_area }}</td>
          <td style="text-align: center">{{ row.area_num }}</td>
          <td style="text-align: center">{{ row.yjh_rh_num }}</td>
          <td style="text-align: center">{{ row.wjh_rh_num }}</td>
          <td style="text-align: center">{{ row.yjh_dfby_num }}</td>
          <td style="text-align: center">{{ row.wjh_dfby_num }}</td>
          <td style="text-align: center">{{ row.yjh_jj_num }}</td>
          <td style="text-align: center">{{ row.wjh_jj_num }}</td>
          <td style="text-align: center">{{ row.yjh_jgjc_num }}</td>
          <td style="text-align: center">{{ row.wjh_jgjc_num }}</td>
          <td style="text-align: center">{{ row.rh_num }}</td>
          <td style="text-align: center">{{ row.dfby_num }}</td>
          <td style="text-align: center">{{ row.jj_num }}</td>
          <td style="text-align: center">{{ row.jgjc_num }}</td>
          <td style="text-align: center">{{ row.rh_bv }}</td>
          <td style="text-align: center">{{ row.aj_bv }}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
import { PagedList } from 'vue-client'


export default {
  title: '小区安检汇总',
  data() {
    let model = new PagedList('rs/sql/selectAreaReport', 20)
    return {
      excelHeaders: {
        'f_user_region': '区域',
        'f_residential_area': '小区',
        'area_num': '小区用户数',
        'yjh_rh_num': '计划内入户数',
        'wjh_rh_num': '无计划入户数',
        'yjh_dfby_num': '计划内到访不遇数',
        'wjh_dfby_num': '无计划到访不遇数',
        'yjh_jj_num': '计划内拒检数',
        'wjh_jj_num': '无计划拒检数',
        'yjh_jgjc_num': '计划内激光检测数',
        'wjh_jgjc_num': '无计划激光检测数',
        'rh_num': '入户数',
        'dfby_num': '到访不遇数',
        'jj_num': '拒检数',
        'jgjc_num': '激光检测数',
        'rh_bv': '入户率',
        'aj_bv': '安检率',
      },
      checktype: this.$appdata.getParam('用户类型')?[{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]:[{label: '全部', value: ''}],
      quyus: [{label: '请选择', value: ''}, ...this.$appdata.getParam('区域')],
      bumens: [{label: '请选择', value: ''}],
      teams: [{label: '请选择', value: ''}],
      checkers:[{label: '请选择', value: ''}],
      searchData: {
        condition: "1=1"
      },
      criteriaShow:false,
      model: model,
    }
  },
  methods: {
    quyuChange(val) {
      if (val) {
        this.bumens = this.$appdata.getParam(val) ? [{
          label: '请选择',
          value: ''
        }, ...this.$appdata.getParam(val)] : [{label: '请选择', value: ''}]
      }else {
        this.checkers = this.allCheckers
      }
    },
    teamChange(val) {
      if (val) {
        this.checkers = this.$appdata.getParam(val) ? [...this.$appdata.getParam(val)] : [{label: '请选择', value: ''}]
      }else {
        this.checkers = this.allCheckers
      }
    },
    bumenChange(val) {
      if (val) {
        this.teams = this.$appdata.getParam(`工单-` + val) ? [{
          label: '请选择',
          value: ''
        }, ...this.$appdata.getParam(`工单-` + val)] : [{label: '请选择', value: ''}]
      }else {
        this.checkers = this.allCheckers
      }
    },
    cleamsg(){
      this.$refs.paged.$refs.cri.model= {}
    },
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },
    search(args) {
      this.searchData.condition = args.condition
      this.model.search(args.condition, args.model)
    },
  },
  ready() {
  },
}
</script>
