<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row" v-show="!$parent.$parent.$parent.showItem">
            <div :class="$parent.$parent.style2"  style="margin: 0">
              <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"
                :value-multiple="true"
                condition=" f_checker_name in {}">
              </role-selector-safe>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检起始</label>
              <datepicker
                :value.sync="$parent.$parent.startDate"
                placeholder='安检时间起始'
                :disabled-days-of-week="[]"
                style="width: 60%"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="$parent.$parent.startDate">
              </datepicker>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检结束</label>
              <datepicker
                :value.sync="$parent.$parent.endDate"
                placeholder='安检时间结束'
                style="width: 60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="$parent.$parent.endDate">
              </datepicker>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检年份</label>
              <v-select  placeholder='安检年份'
                         class="select select_list"
                         :value.sync="$parent.$parent.year"
                         :value-single="true"
                         :options='$parent.$parent.years'
                         v-model="$parent.$parent.year"
                         close-on-select clear-button></v-select>
            </div>
            <div :class="$parent.$parent.style" style="width: auto;margin-top:8px;float: right">
              <export-excel-safe :data="$parent.$parent.searchData"
                                 :field="$parent.$parent.excelHeaders"
                                 :choose-col="true"
                                 sqlurl="rs/logic/SafeExportExcel" sql-name="NoPlanSearchUser"
                                 template-name='无计划安检情况'></export-excel-safe>
              <button type="button" class="button_search button_spacing" @click="search()">查询</button>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_left':$parent.$parent.$parent.showItem,'button_shrink_right':!$parent.$parent.$parent.showItem}"
                   @click="$parent.$parent.hiddenr()"></div>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.hidden()">

              </div>
            </div>
          </div>
          <div class="row" v-show="$parent.$parent.$parent.showItem">
            <div :class="$parent.$parent.style2" style="margin: 0">
              <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"
                :value-multiple="true"
                condition=" f_checker_name in {}">
              </role-selector-safe>
            </div>
            <div :class="$parent.$parent.style" style="width: auto;margin-top:8px;float: right">
              <export-excel-safe :data="$parent.$parent.searchData"
                                 :field="$parent.$parent.excelHeaders"
                                 sqlurl="rs/logic/SafeExportExcel" sql-name="根据安检员查询用户档案"
                                 template-name='用户安检情况'></export-excel-safe>
              <button type="button" class="button_search button_spacing" @click="search()">查询</button>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_left':$parent.$parent.$parent.showItem,'button_shrink_right':!$parent.$parent.$parent.showItem}"
                   @click="$parent.$parent.hiddenr()"></div>
              <div style="float: right" class="button_spacing"
                   :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                   @click="$parent.$parent.hidden()">

              </div>
            </div>


          </div>
          <div class="row" v-show="$parent.$parent.$parent.showItem">
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检起始</label>
              <datepicker
                :value.sync="$parent.$parent.startDate"
                placeholder='安检时间起始'
                :disabled-days-of-week="[]"
                style="width: 60%"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="$parent.$parent.startDate">
              </datepicker>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检结束</label>
              <datepicker
                :value.sync="$parent.$parent.endDate"
                placeholder='安检时间结束'
                style="width: 60%"
                :disabled-days-of-week="[]"
                :format="'yyyy-MM-dd'"
                :show-rest-button="reset"
                v-model="$parent.$parent.endDate">
              </datepicker>
            </div>
            <div :class="$parent.$parent.style">
              <label class="font_normal_body">安检年份</label>
              <v-select  placeholder='安检年份'
                        class="select select_list"
                        :value.sync="$parent.$parent.year"
                        :value-single="true"
                        :options='$parent.$parent.years'
                        v-model="$parent.$parent.year"
                        close-on-select clear-button></v-select>
            </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>
              <nobr>用户名称</nobr>
            </th>
            <th>
              <nobr>用户电话</nobr>
            </th>

            <th>
              <nobr>小区名称</nobr>
            </th>
            <th style="padding: 0 40px">
              <nobr>地址</nobr>
            </th>
            <th>
              <nobr>安检员</nobr>
            </th>
          </tr>
        </template>
        <template partial='body'>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center;">{{ row.f_userinfo_code }}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center;">{{ row.f_user_name }}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center;">{{ row.f_user_phone }}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center">{{ row.f_residential_area }}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center">{{ row.f_address }}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center">{{ row.f_checker_name }}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>

</template>

<script>
import {PagedList} from 'vue-client'
import {HttpResetClass} from 'vue-client'
import co from 'co'
import * as Util from './../Util'
import Vue from 'vue'



export default {
  title: '用户安检情况',
  data() {
    let options = []
    let year = (new Date()).getFullYear()
    for (let i = year; i <= year + 3; i++)
      options.push({label: i + '', value: i + ''})
    let moptions = []
    for (let i = 1; i <= 12; i++)
      moptions.push({label: i + '', value: i + ''})

    return {
      searchData: {
        condition: {},
      },
      excelHeaders: {
        //用户编号	用户名称	用户电话	安检次数	用户类型	小区名称	地址	安检日期	安检状态	安检结果

        'f_userinfo_code': '用户编号',
        'f_user_name': '用户名称',
        'f_user_phone': '用户电话',
        'f_checker_name': '安检员',
        'f_residential_area': '小区名称',
        'f_address': '地址',
      },
      model: new PagedList('rs/sql/NoPlanSearchUser', 20, {
        startDate:"this.startDate",
        endDate:"this.endDate",
        year:"this.year"
      }),
      years:[],
      startDate:"",
      endDate:"",
      year:"2023",
      criteriaShow: false,
      showModal: false,
      checkedAll: false,
      checkrows: [],
      adjustables: [],
    }
  },
  props: {
    style: {
      type: String,
      default: 'col-sm-2 form-group'
    },
    style2: {
      type: String,
      default: 'col-sm-4 form-group'
    },
    checkplan: { // 传入一条安检计划信息
      type: Object
    },
    additemshow: {
      type: Boolean,
      default: false
    }
  },
  ready() {
    for (let i = 0; i < 10; i++) {
      this.years.push({
        label:(2022+i).toString(),
        value:(2022+i).toString(),
      })
    }
  },
  methods: {

    search(args) {
      let data = {
        condition:args.condition,
        startDate:this.startDate,
        endDate:this.endDate,
        year:this.year
      }
      this.searchData.condition = data
      return this.model.search(data)
    },
    hiddenr() {
      this.$parent.showItem = !this.$parent.showItem
    },
    hidden() {
      this.criteriaShow = !this.criteriaShow
    },

    cancel() {
      this.showModal = false
    },

    getRes(obj) {
      this.model.f_filialeids = this.$login.convertToIn(obj.resids);
    }
  },

  watch: {

  },
  computed: {
    selected() {
      return this.$refs.paged.$refs.grid.selected
    }
  }
}
</script>
<style scoped>
.newcolor {
  color: red;
}

.table th {
  background-color: #f2f6fa;
  color: black;
}
</style>
