<template>
  <div style="flex:1;" class="flex">
    <button class="btn btn-xs" v-show="!criteriaShow" @click="this.show()">
      <span class="glyphicon glyphicon-chevron-down" style="color: #000;"></span>
    </button>
    <criteria-paged :model="model"  v-ref:paged>
      <criteria partial='criteria' v-show="$parent.criteriaShow" @condition-changed='search' v-ref:criteria>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_residential_area" id="f_districtname"
                   placeholder="小区" condition="f_residential_area like '%{}%'">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_address" id="f_address"
                   placeholder="地址" condition="f_address like '%{}%'">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_building" id="f_building"
                   placeholder="楼号" condition="f_building like '%{}%'">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_unit" id="f_unit"
                   placeholder="单元" condition="f_unit like '%{}%'">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_floor" id="f_floor"
                   placeholder="楼层" condition="f_floor like '%{}%'">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" v-model="model.f_room" id="f_room"
                   placeholder="门牌号" condition="f_room like '%{}%'">
          </div>

          <!--<td>-->
          <!--<label for="f_keyin">是否录入：</label>-->
          <!--<v-select id="f_keyin"-->
          <!--placeholder='请选择档案状态'-->
          <!--:value.sync="$parent.$parent.model.f_sign"-->
          <!--:options='$parent.$parent.signs'-->
          <!--close-on-select clear-button></v-select>-->
          <!--</td>-->
          <div class="form-group">
            <v-select id="f_usertype"
                      placeholder='用户类型'
                      :value.sync="model.f_usertype"
                      :options='$parent.$parent.usertypes'
                      condition="f_user_type = '{}'"
                      v-model="model.f_usertype"
                      close-on-select clear-button> </v-select>
          </div>
          <!--<label for="f_yytdate">建档时间：</label></td></tr>-->
          <div class="form-group">
            <datepicker
              :value.sync="model.f_inputdatestart"
              placeholder='开始建档时间'
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd'"
              :show-rest-button="reset"
              v-model = "model.f_inputdatestart"
              condition="f_createfile_date > ='{}'">
            </datepicker>
          </div>
          <div class="form-group">
            <datepicker
              :value.sync="model.f_inputdateend"
              placeholder='结束建档时间'
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd'"
              :show-rest-button="reset"
              v-model = "model.f_inputdateend"
              condition="f_createfile_date <=  '{} 23:59:59'">
            </datepicker>
          </div>
          <div class="form-group">
            <input type="number" class="form-control"
                   placeholder='安检期限超过(月)'
                   v-model="$parent.$parent.model.month">
          </div>
          <!-- <chooser :userid.sync='$parent.$parent.$parent.f.id' resource-type="user" :width='300' :select-data.sync='$parent.$parent.model.chosenOrg'></chooser> -->
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()">查询</button>
          </div>
          <button class="btn" @click="$parent.$parent.hidden()">
            <span class="glyphicon glyphicon-chevron-up"></span>
          </button>
        </div>
      </criteria>
      <data-grid :model="model" partial="list" 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>
          </tr>
        </template>
        <template partial='body'>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center;">{{row.f_username}}</td>
          <td v-bind:class="{newcolor:row.code=='1'}" style="text-align: center">{{row.f_usertype}}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center">{{row.f_districtname}}</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_last_check_date}}</td>
          <td v-bind:class="{newcolor:row.code==1}" style="text-align: center">{{row.f_last_check_state}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import { PagedList } from 'vue-client'
  import Vue from 'vue'
  import AppData from '../../stores/AppData'
  export default {
    title: '安检员B',
    data () {
      let model = new PagedList('rs/sql/根据安检员查询用户档案',50, { orderitem: '"f_districtname"',
        f_filialeid:'this.f_filialeid', f_checker_id: 'this.chosenOrg.id',month:'this.month'})
      model.month = ''
      return {
        criteriaShow: true,
        model:model,
        usertypes: this.$appdata.getParam('用户类型'),
        userstates: this.$appdata.getParam('用户状态'),
      }
    },
    ready () {
      this.model.chosenOrg = {id:0}
      //tag
      this.model.f_filialeid  = this.$login.f.orgid
      // this.model.f_filiale = this.$login.f.f_fengongsi
      this.model.f_OrgStr = this.$login.f.orgpathstr
    },
    methods:{
      show(){
        this.criteriaShow = true
      },
      hidden(){
        this.criteriaShow = false
      },
    },
    computed: {
      selected () {
        return this.$refs.paged.$refs.grid.selected
      }
    }
  }
</script>
<style scoped>
  .newcolor{
    color:red;
  }
</style>
