<template>
  <div class="flex">
    <section>
      <div class="basic-main row" style="height: 100%">
        <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-3 form-group form-input-group" style="width: 30%;">
                  <role-selector-safe
                    role-name="安检员"
                    role-lable="安&nbsp;检&nbsp;员&nbsp;"
                    @re-res="$parent.$parent.getRes"
                    :value.sync="model.f_checker_id"
                    v-model="model.f_checker_id"
                    condition="f_checker = '{}'">
                  </role-selector-safe>
                </div>
                <div class="form-group col-sm-3 form-input-group" style="width: 20%;">
                  <label class="font_normal_body">用户类型</label>
                  <v-select :value.sync="model.f_user_type" v-model='model.f_user_type'
                            :value-single="true" style="width: 60%"
                            class="select_list select"
                            :options='$parent.$parent.user_types' placeholder='用户类型'
                            close-on-select
                            condition="f_user_type = '{}'"></v-select>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%;float: right;">
                  <print-data-safe :sum-field="$parent.$parent.excelHeaders" :model="$parent.$parent.print_model"
                              :field="$parent.$parent.excelHeaders"
                              :defaultfield="$parent.$parent.defaultPrint"
                              :titletable="'安检员考核'" :starthead="$parent.$parent.getstart"
                  ></print-data-safe>
                  <export-excel-safe :data="$parent.$parent.searchData"
                                     :field="$parent.$parent.excelHeaders"
                                     sqlurl="rs/logic/SafeExportExcel"
                                     sql-name="SafecheckSummary"
                                     :template-name="$parent.$parent.excelTitle">
                  </export-excel-safe>

                  <button type="button" name="button" class="button_search" style="margin-left: 9px" @click="search">查询</button>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-sm-4">
                  <label class="font_normal_body">计划开始:</label>
                  <datepicker
                    placeholder='计划开始'
                    style="width:60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    :value.sync="model.start_time"
                    v-model="model.start_time"
                    condition="tcp.f_create_time >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-4">
                  <label class="font_normal_body">计划结束:</label>
                  <datepicker
                    placeholder='计划结束'
                    :disabled-days-of-week="[]"
                    style="width:60%"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    :value.sync="model.end_time"
                    v-model="model.end_time"
                    condition="tcp.f_create_time <= '{} 23:59:59'">
                  </datepicker>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4 form-group">
                  <label for="startDate" class="font_normal_body">安检开始:</label>
                  <datepicker id="startDate" placeholder="安检开始"
                              v-model="model.checkstart"
                              :value.sync="model.checkstart"
                              style="width: 60%;"
                              :disabled-days-of-Week="[]"
                              :format="'yyyy-MM-dd 00:00:00'"
                              condition="tcpi.f_last_check_date >= '{}'"
                              :show-reset-button="reset">
                  </datepicker>
                </div>
                <div class="col-sm-4 form-group">
                  <label for="endDate" class="font_normal_body">安检结束:</label>
                  <datepicker id="endDate" placeholder="安检结束"
                              v-model="model.checkend"
                              :value.sync="model.checkend"
                              :disabled-days-of-Week="[]"
                              style="width: 60%;"
                              condition="tcpi.f_last_check_date <= '{}'"
                              :format="'yyyy-MM-dd 23:59:59'"
                              :show-reset-button="reset">
                  </datepicker>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid :model="model" partial='list' class="list_area table_sy" id="tongchuan" 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>
                <th>
                  <nobr>总入户数</nobr>
                </th>
              </tr>
            </template>
            <template partial='body'>

              <td style="text-align: center">{{ $index + 1 }}</td>
              <td style="text-align: center">{{ row.checker }}</td>
              <td style="text-align: center"><a @click="$parent.$parent.$parent.modalShow(row,'1')">{{ row.data1 }}</a></td>
              <td style="text-align: center">{{ row.data2 }}</td>
              <td style="text-align: center">{{ row.data3 }}</td>
              <td style="text-align: center">{{ row.data4 }}</td>
              <td style="text-align: center">{{ row.data5 }}</td>
              <td style="text-align: center">{{ row.data6 }}</td>
              <td style="text-align: center">{{ row.data7 }}</td>
              <td style="text-align: center"><a @click="$parent.$parent.$parent.modalShow(row,'0')">{{ row.data8 }}</a></td>
              <td style="text-align: center">{{ row.data9 }}</td>
            </template>
            <template partial="foot">
              <td style="text-align: center" colspan="2"><span><b>合计：</b></span></td>
              <td style="text-align: center">{{ model.sums.data1 }}</td>
              <td style="text-align: center">{{ model.sums.data2 }}</td>
              <td style="text-align: center">{{ model.sums.data3 }}</td>
              <td style="text-align: center">{{ model.sums.data4 }}</td>
              <td style="text-align: center">{{ model.sums.data5 }}</td>
              <td style="text-align: center">{{ model.sums.data6 }}</td>
              <td style="text-align: center">{{ (model.sums.data3/model.sums.data1 * 100.0).toFixed(2)}}%</td>
              <td style="text-align: center">{{ model.sums.data8 }}</td>
              <td style="text-align: center">{{ model.sums.data9 }}</td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </section>
    <modal :show.sync="modal_show" backdrop="false"
           class="allQuotaRecordModalShow" width="80%">
      <header slot="modal-header" class="modal-header" style="text-align: center">
      </header>
      <article slot="modal-body" class="modal-body">
        <criteria-paged :model="modalModel" v-ref:paged2>
          <criteria partial='criteria' class="search_area" v-ref:criteria2>
            <div partial>
              <div class="row">
                <div class="form-group col-sm-4">
                  <label class="font_normal_body">开始时间</label>
                  <datepicker
                    placeholder='请选择'
                    style="width:60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    :value.sync="$parent.$parent.modalSearchData.start_time"
                    v-model="$parent.$parent.modalSearchData.start_time"
                  >
                  </datepicker>
                </div>
                <div class="form-group col-sm-4">
                  <label class="font_normal_body">结束时间</label>
                  <datepicker
                    placeholder='请选择'
                    :disabled-days-of-week="[]"
                    style="width:60%"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    :value.sync="$parent.$parent.$parent.modalSearchData.end_time"
                    v-model="$parent.$parent.$parent.modalSearchData.end_time">
                  </datepicker>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">用户编号</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_userinfo_code">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">用户名称</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_user_name">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">用户地址</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_address">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">用户电话</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_user_phone">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">小区</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_residential_area">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">安&nbsp;检&nbsp;员</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_checker">
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">安检状态</label>
                  <v-select :value.sync="$parent.$parent.$parent.modalSearchData.f_last_check_state" v-model='$parent.$parent.$parent.modalSearchData.f_last_check_state'
                            :value-single="true" style="width: 60%"
                            class="select_list select"
                            :options='$parent.$parent.$parent.last_check_states' placeholder='安检状态'
                            close-on-select
                  ></v-select>
                </div>
                <div class="form-group col-sm-4">
                  <label class="font_normal_body">用户类型</label>
                  <v-select :value.sync="$parent.$parent.$parent.modalSearchData.f_user_type" v-model='$parent.$parent.$parent.modalSearchData.f_user_type'
                            :value-single="true" style="width: 60%"
                            class="select_list select"
                            :options='$parent.$parent.$parent.user_types' placeholder='用户类型'
                            close-on-select
                  ></v-select>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="font_normal_body">到访次数</label>
                  <input style="width: 60%" class="input_search" v-model="$parent.$parent.$parent.modalSearchData.f_check_version">
                </div>
                <div style="float: right">
                  <button class="button_spacing button_search" @click="$parent.$parent.$parent.modalSearch()">查询</button>
                  <export-excel-safe :data="$parent.$parent.$parent.modalSearchExcelData"
                                     :field="$parent.$parent.$parent.modalExcelHeaders"
                                     progress="safeGetExportProgress"
                                     sqlurl="rs/logic/SafeExportExcel" sql-name="safe_singleTable_OrderBy" template-name='安检情况明细'
                                     :choose-col="true"></export-excel-safe>
                </div>
              </div>
            </div>
          </criteria>
          <data-grid class="list_area table_sy" :model="$parent.$parent.modalModel" v-ref:modalgrid partial='list'>
            <template partial='head'>
              <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>
              <th>
                <nobr>安检状态</nobr>
              </th>
            </template>
            <template partial='body'>
              <td style="text-align:center">{{row.f_userinfo_code}}</td>
              <td style="text-align:center">{{row.f_user_name }}</td>
              <td style="text-align:center">{{row.f_residential_area}}</td>
              <td style="text-align:center">{{row.f_address}}</td>
              <td style="text-align:center">{{row.f_user_phone}}</td>
              <td style="text-align:center">{{row.f_check_version}}</td>
              <td style="text-align:center">{{row.f_last_check_date}}</td>
              <td style="text-align:center">{{row.f_checker}}</td>
              <td style="text-align:center">{{row.f_plan_name}}</td>
              <td style="text-align:center">{{row.f_user_type}}</td>
              <td style="text-align:center">{{row.f_last_check_state}}</td>
            </template>
          </data-grid>
        </criteria-paged>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default" @click='modal_show = false'>关闭</button>
      </footer>
    </modal>
  </div>
</template>
<script>
import {PagedList, HttpResetClass} from 'vue-client'
import * as Util from '../../Util'

export default {
  title: '安检员考核',
  data () {
    let model = new PagedList('rs/sql/SafecheckSummary', 20, {
      f_filiale_id: 'this.f_filiale_id'
    },{data1:'',data2:'',data3:'',data4:'',data5:'',data6:'',data8:'',data9:''})
    model.f_filiale_id = `('${this.$login.f.orgid}')`
    return {
      modal_show:false,
      modalModel: new PagedList('rs/sql/safe_singleTable_OrderBy', 15, {
        items: '"tcpi.*,tcp.f_checker,tcp.f_plan_name"',
        tablename: '"t_check_plan_item tcpi left join t_check_plan tcp on tcpi.f_plan_id = tcp.id"',
        orderitem: '"1"'
      }),
      modalModel2: new PagedList('rs/sql/safe_singleTable_OrderBy', 15, {
        items: '"*,f_offsite_time as f_last_check_date,f_checker_name as f_checker,f_check_type as f_user_type,f_entry_status as f_last_check_state"',
        tablename: '"t_check_paper"',
        orderitem: '"1"'
      }),
      modalSearchData:{},
      modalSearchExcelData:{
        items: "tcpi.*,tcp.f_checker,tcp.f_plan_name",
        tablename: "t_check_plan_item tcpi left join t_check_plan tcp on tcpi.f_plan_id = tcp.id",
        orderitem: "f_userinfo_code"
      },
      modalExcelHeaders:{
        'f_userinfo_code': '用户编号',
        'f_user_name': '用户名称',
        'f_residential_area': '小区',
        'f_address': '地址',
        'f_user_phone': '客户电话',
        'f_check_version': '到访不遇次数',
        'f_last_check_date': '安检时间',
        'f_checker': '安检员',
        'f_plan_name':"计划名称",
        'f_user_type': '用户类型',
        'f_last_check_state': '安检状态'
      },
      type:'',
      modalRow:{},
      last_check_states:[{label:'全部',value:''},{label:'入户',value:'入户'},{label:'拒检',value:'拒检'},{label:'到访不遇',value:'到访不遇'}],
      user_types: [{label:'全部',value:''},{label:'民用',value:'民用'},{label:'非民用',value:'非民用'}],
      f_filiale_id: `('${this.$login.f.orgid}')`, // 分公司id
      model: model,
      source: 'tool.getFullTree(this.getRights().where(row.getType() != $zone$).where(row.getType() == $organization$))', //获取公司参数
      userid: this.$login.f.id,
      orgname: '',
      // checker:{},
      searchData: {
        condition: {
          condition1 : '1=1',
          condition2 : `1=1 and f_entry_status = '入户'`
        },
        f_filiale_id: ''
      },
      print_model:{},
      excelHeaders: {
        'checker': '安检员',
        'data1': '计划安检总户数',
        'data2': '未检户数',
        'data3': '已检户数',
        'data4': '入户户数',
        'data5': '三次到访不遇户数',
        'data6': '拒检户数',
        'data7': '安检率',
        'data8': '申请安检户数',
        'data9': '总入户数'
      },
      defaultPrint: ['checker','data1','data2','data3','data4','data5','data6','data7','data8','data9'],

    }
  },
  methods: {
    async modalShow (row,type) {
      this.type = type
      this.modalRow = row
      this.modal_show = true
      this.modalSearchData = {}
      await this.modalSearch(row)
    },
    modalSearch () {
      this.modalModel = new PagedList('rs/sql/safe_singleTable_OrderBy', 15, {
        items: '"tcpi.*,tcp.f_checker,tcp.f_plan_name"',
        tablename: '"t_check_plan_item tcpi left join t_check_plan tcp on tcpi.f_plan_id = tcp.id"',
        orderitem: '"1"'
      })
      let modalCondition = '1=1'
      if (this.type == '0') {
        modalCondition = this.$refs.paged.model.condition.condition2
        modalCondition += ` and f_checker_name = '${this.modalRow.checker}'`
        modalCondition += ` and f_no_checkplan='无计划安检'`
        if (this.modalSearchData.f_user_name){
          modalCondition += ` and f_user_name = '${this.modalSearchData.f_user_name}'`
        }
        if (this.modalSearchData.f_residential_area){
          modalCondition += ` and f_residential_area = '${this.modalSearchData.f_residential_area}'`
        }
        if (this.modalSearchData.f_user_type){
          modalCondition += ` and f_check_type = '${this.modalSearchData.f_user_type}'`
        }
        if (this.modalSearchData.start_time){
          modalCondition += ` and f_offsite_time >= '${this.modalSearchData.start_time}'`
        }
        if (this.modalSearchData.end_time){
          modalCondition += ` and f_offsite_time <= '${this.modalSearchData.end_time}'`
        }
        if (this.modalSearchData.f_userinfo_code){
          modalCondition += ` and f_userinfo_code = '${this.modalSearchData.f_userinfo_code}'`
        }
        if (this.modalSearchData.f_address){
          modalCondition += ` and f_address = '${this.modalSearchData.f_address}'`
        }
        if (this.modalSearchData.f_user_phone){
          modalCondition += ` and f_user_phone = '${this.modalSearchData.f_user_phone}'`
        }
        if (this.modalSearchData.f_checker){
          modalCondition += ` and f_checker_name = '${this.modalSearchData.f_checker}'`
        }
        this.modalModel = this.modalModel2
        this.modalModel.search(modalCondition, this.modalModel)
      }else {
        modalCondition = this.$refs.paged.model.condition.condition1
        modalCondition += ` and f_checker = '${this.modalRow.checker}'`
        if (this.modalSearchData.f_last_check_state){
          modalCondition += ` and tcpi.f_last_check_state = '${this.modalSearchData.f_last_check_state}'`
        }
        if (this.modalSearchData.f_residential_area){
          modalCondition += ` and f_residential_area = '${this.modalSearchData.f_residential_area}'`
        }
        if (this.modalSearchData.f_user_name){
          modalCondition += ` and tcpi.f_user_name = '${this.modalSearchData.f_user_name}'`
        }
        if (this.modalSearchData.f_user_type){
          modalCondition += ` and tcpi.f_user_type = '${this.modalSearchData.f_user_type}'`
        }
        if (this.modalSearchData.start_time){
          modalCondition += ` and tcp.f_create_time >= '${this.modalSearchData.start_time}'`
        }
        if (this.modalSearchData.end_time){
          modalCondition += ` and tcp.f_create_time <= '${this.modalSearchData.end_time}'`
        }
        if (this.modalSearchData.f_userinfo_code){
          modalCondition += ` and tcpi.f_userinfo_code = '${this.modalSearchData.f_userinfo_code}'`
        }
        if (this.modalSearchData.f_address){
          modalCondition += ` and tcpi.f_address = '${this.modalSearchData.f_address}'`
        }
        if (this.modalSearchData.f_user_phone){
          modalCondition += ` and tcpi.f_user_phone = '${this.modalSearchData.f_user_phone}'`
        }
        if (this.modalSearchData.f_checker){
          modalCondition += ` and tcp.f_checker = '${this.modalSearchData.f_checker}'`
        }
        if (this.modalSearchData.f_check_version){
          modalCondition += ` and tcpi.f_check_version = '${this.modalSearchData.f_check_version}'`
        }
        this.modalModel.search(modalCondition, this.modalModel)
      }
      this.modalSearchExcelData.condition = modalCondition
    },
    getRes (obj) {
      this.f_filiale_id = this.$login.convertToIn(obj.resids)
      this.orgname = obj.res[0]
      this.$set('orgname', obj.res[0])
    },
    async selfSearch (args) {
      if (!this.f_filiale_id) {
        return this.$showMessage("请选择公司进行查询！！！")
      }
      this.model.f_filiale_id = this.f_filiale_id // 只有选择了下面的条件才会变化
      let condition = {
        condition1 : args.condition,
        condition2 : `1=1 and f_entry_status = '入户'`
      }
      if (args.model.f_checker_id){
        condition.condition2 += ` and f_checker_name = '${args.model.f_checker_id}'`
      }
      if (args.model.f_user_type){
        condition.condition2 += ` and f_check_type = '${args.model.f_user_type}'`
      }
      if (args.model.checkstart){
        condition.condition2 += ` and f_offsite_time >= '${args.model.checkstart}'`
      }
      if (args.model.checkend){
        condition.condition2 += ` and f_offsite_time <= '${args.model.checkend}'`
      }
      this.searchData.f_filiale_id = this.f_filiale_id //导出
      this.searchData.condition=args.condition //导出
      await this.model.search(condition, args.model)
      this.searchData.condition = condition
      this.sumsmodel = this.$refs.paged.$refs.grid.model.sums;
      this.print_model = JSON.parse(JSON.stringify(this.$refs.paged.$refs.grid.model))
      this.print_model.rows.push({
        checker: '合计',
        data1: this.sumsmodel.data1,
        data2: this.sumsmodel.data2,
        data3: this.sumsmodel.data3,
        data4: this.sumsmodel.data4,
        data5: this.sumsmodel.data5,
        data6: this.sumsmodel.data6,
        data7: `${(this.sumsmodel.data3/this.sumsmodel.data1*100.0).toFixed(2)}%`,
        data8: this.sumsmodel.data8,
        data9: this.sumsmodel.data9
      })
      this.print_model.totalPage = 0
    }
  },
  computed: {
    excelTitle() {
      return `${this.orgname }安检员考核`
    },
    getstart() {
      return `开始时间：${this.$refs.paged.$refs.cri.model.startDate} 结束时间：${this.$refs.paged.$refs.cri.model.endDate}`
    },
  },
  watch: {
  },
  ready () {
    this.orgname = this.$login.f.orgs
    //tag)
    //tag
    this.$refs.paged.$refs.cri.model.startDate=Util.toStartDateString() +' 00:00:00'
    this.$refs.paged.$refs.cri.model.endDate=Util.toEndDateString() +' 23:59:59'

  }

}
</script>

<style lang="less" >
.tableinfo {
  text-align: center;
  background-color: #00A3F0;
  color: #0c2e4d;
  font-size: 26px;
}
</style>
