<template>
  <div class="flex-row">
    <div class="basic-main">
    <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" style="width: 20%">
                <label class="font_normal_body">计划年月</label>
              <datepicker
                :value.sync="$parent.$parent.p_year_month"
                placeholder='起始月份' style="width:60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM'"
                :select-month="true"
                :show-rest-button="reset">
              </datepicker>
            </div>
              <div class="col-sm-3" style="width: 20%">
              <label class="font_normal_body text-red" style="color: red;">完成开始</label>
              <datepicker
                placeholder='完成开始' style="width:60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                :value.sync="$parent.$parent.f_check_start"

                condition="f_offsite_time >= '{} 00:00:00'">
              </datepicker>
            </div>
              <div class="col-sm-3" style="width: 20%">              <label class="font_normal_body text-red" style="color: red;">完成结束</label>
              <datepicker
                placeholder='完成结束' style="width:60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                :value.sync="$parent.$parent.f_check_end"

                condition="f_offsite_time >= '{} 23:59:59'">
              </datepicker>
            </div>
            <!--            <div class="col-sm-4" style="width: 20%">-->
            <!--              <label class="font_normal_body" style="margin-right: 2px">&nbsp;&nbsp;&nbsp;公司&nbsp;&nbsp;&nbsp;</label>-->
            <!--              <right-tree @re-res="$parent.$parent.getRes" :initresid="$parent.$parent.$login.f.orgid">-->
            <!--              </right-tree>-->
            <!--            </div>-->
            <div class="col-sm-6" style="width: 40%">
              <role-selector-safe
                role-name="安检员"
                role-lable="安&nbsp;检&nbsp;员&nbsp;"
                @re-res="$parent.$parent.getRes"
                :value.sync="$parent.$parent.f_checker_id"
                v-model="$parent.$parent.f_checker_id"
                condition="f_checker_name = '{}'">
              </role-selector-safe>
            </div>
            <!--            <div style="float: right;margin-left:10px" class="button_spacing"-->
            <!--                 :class="{'button_shrink_left':!$parent.$parent.$parent.isdetail,'button_shrink_right':$parent.$parent.$parent.isdetail}"-->
            <!--                 @click="$parent.$parent.hiddenr()"></div>-->
            <div class="span" style="float:right;margin-right: 100px">
              <button class="button_search" @click="$parent.$parent.search()">查询</button>
            </div>

          </div>

        </div>
      </criteria>

      <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid>
        <template partial='head'>
          <tr>
            <th>
              <nobr>序号</nobr>
            </th>
            <th>
              <nodr>安检员</nodr>
            </th>
            <th>
              <nodr>计划数</nodr>
            </th>
            <th>
              <nobr>未检</nobr>
            </th>
            <th>
              <nodr>计划内入户</nodr>
            </th>
            <th>
              <nodr>计划内到访</nodr>
            </th>
            <th>
              <nodr>计划内拒检</nodr>
            </th>
            <th>
              <nodr>计划外入户</nodr>
            </th>
            <th>
              <nodr>计划外到访</nodr>
            </th>
            <th>
              <nodr>计划外拒检</nodr>
            </th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td style="text-align:center">{{$index + 1}}</td>

            <td style="text-align:center">{{row.f_checker}}</td>
            <td style="text-align:center">{{row.plan_nums == null ? 0 : row.plan_nums}}</td>

            <td style="text-align:center">
              <nobr>{{row.plan_nums - row.untouch_nums - row.come_nums - row.reject_nums}}</nobr>
            </td>
            <td style="text-align:center">
              <nobr>{{row.untouch_nums == null ? 0 : row.untouch_nums}}</nobr>
            </td>
            <td style="text-align:center">{{row.come_nums == null ? 0 : row.come_nums}}</td>
            <td style="text-align:center">{{row.reject_nums == null ? 0 : row.reject_nums}}</td>
            <td style="text-align:center">{{row.out_untouch_nums == null ? 0 : row.out_untouch_nums}}</td>
            <td style="text-align:center">{{row.out_come_nums == null ? 0 : row.out_come_nums}}</td>
            <td style="text-align:center">{{row.out_reject_nums == null ? 0 : row.out_reject_nums}}</td>

            <!--<td style="text-align: center;">-->
            <!--<button class="btn btn-link" @click.stop="$parent.$parent.$parent.showhistory(row)">查看</button>-->
            <!--</td>-->
          </tr>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
  </div>
  </div>
</template>

<script>

  import {PagedList} from 'vue-client'
  import {HttpResetClass} from 'vue-client'

  export default {
    title: '安检考核',
    data() {

      return {
        model: new PagedList('rs/sql/getCheckPlanList', 20),
        f_filialeid: '(' + this.$login.f.orgid + ')',
        row: {},
        f_checker_id:'',
        f_orgid: '',
        groupNameForSql: '',
        p_year_month: null,
        listflag: false,
        f_check_start: '',
        f_check_end: '',
        condition: {},

        // model.f_filialeid = this.$login.f.orgid
      }
    },
    props: {
      row: {},
      config: {},
      ispartial: false,
      f_filialeid: {
        type: String
      }
    },
    ready() {

      this.search(this.f_check_start, this.f_check_end, this.p_year_month)

    },
    watch: {},
    created() {
      this.getCurrentMonthFirst()
      this.getCurrentMonthLast()

    },
    methods: {
      getRes(obj) {
        this.f_filialeid = this.$login.convertToIn(obj.resids);
        //tag
      },
      search(startTime, endTime,p_year_month) {
        if (!this.f_check_start) {
          this.$showMessage('请选择完成开始时间!')
          return
        }
        if (!this.f_check_end) {
          this.$showMessage('请选择完成结束时间!')
          return
        }
        //tag
        this.condition.pYearMonth = ''
        this.condition.outPYearMonth = ''
        this.condition.filialeid = ''
        this.condition.checkTime = ''
        this.condition.checker = ''
        if (this.p_year_month) {

          this.condition.pYearMonth += ` AND f_plan_year = ${this.p_year_month.substr(0, 4)} `
          this.condition.pYearMonth += ` AND f_plan_month = ${this.p_year_month.substr(5, 2)} `

          // this.condition.outPYearMonth += ` AND f_plan_year != ${this.p_year_month.substr(0,4)} `
          // this.condition.outPYearMonth += ` AND f_plan_month != ${this.p_year_month.substr(5,2)} `
        }

        if (this.f_check_start) {
          //tag
          this.condition.checkTime += " and f_offsite_time >= '" + this.f_check_start + "'"
        }
        if (this.f_check_end) {

          this.condition.checkTime += " and f_offsite_time <= '" + this.f_check_end + "'"
        }

        this.condition.filialeid += " and cp.f_filialeid in  " + (this.f_filialeids ? this.f_filialeids : `(${this.$login.f.orgid})`)
        if (this.f_checker_id) {
          this.condition.checker += " and cp.f_checker_id =  " + this.f_checker_id
        }

        //this.searchData.condition=this.condition
        //tag
        //tag
        return this.model.search(this.condition, this.model)
      }, getCurrentMonthFirst() {
        var date = new Date()
        date.setDate(1)
        var month = parseInt(date.getMonth() + 1)
        var day = date.getDate()
        if (month < 10) month = '0' + month
        if (day < 10) day = '0' + day
        this.p_year_month = date.getFullYear() + '-' + month
        this.f_check_start = date.getFullYear() + '-' + month + '-' + day + ' 00:00:00'
      }, getCurrentMonthLast() {
        var date = new Date()
        var month = parseInt(date.getMonth() + 1)
        var day = date.getDate()
        var year = date.getFullYear()
        if (month < 10) month = '0' + month
        if (day < 10) day = '0' + day
        var lastDateOfCurrentMonth = new Date(year, month, 0)
        this.f_check_end = year + '-' + month + '-' + lastDateOfCurrentMonth.getDate() + ' 23:59:59'
      }
    }
  }
</script>

<style scoped>

  .td-0 {
    border: 1px solid #000000;
  }

  .td-1 {
    border: none;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
  }

  .td-2 {
    border: none;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
  }

  .td-4 {
    border: none;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }

  .td-3 {
    border: none;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }
</style>
