<template>

  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' class="search_area" @condition-changed='$parent.search' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>

    <div class="row">

      <div :class="{'col-sm-4':$parent.$parent.$parent.showItem,'col-sm-3':!$parent.$parent.$parent.showItem}" v-if="!$parent.$parent.$parent.showItem">
        <label class="font_normal_body">年份月份</label>
        <datepicker
          placeholder='年份月份' style="width:60%"
          :format="'yyyy-MM'"
          :show-rest-button="reset"
          v-model="$parent.$parent.year_month"
          :value.sync="$parent.$parent.year_month"
        >
        </datepicker>
      </div>

      <div :class="{'col-sm-8':$parent.$parent.$parent.showItem,'col-sm-6':!$parent.$parent.$parent.showItem}">
        <role-selector
          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_name = '{}'">
        </role-selector>
      </div>

      <div :class="{'col-sm-4':$parent.$parent.$parent.showItem,'col-sm-3':!$parent.$parent.$parent.showItem}">
      <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>
    </div>


    <div class="row" v-if="$parent.$parent.criteriaShow">
    <div :class="{'col-sm-4':$parent.$parent.$parent.showItem,'col-sm-3':!$parent.$parent.$parent.showItem}" v-if="!$parent.$parent.$parent.showItem">
      <label class="font_normal_body">年份月份</label>
      <datepicker
        placeholder='年份月份' style="width:60%"
        :format="'yyyy-MM'"
      >
      </datepicker>
    </div>

    <div :class="{'col-sm-4':$parent.$parent.$parent.showItem,'col-sm-3':!$parent.$parent.$parent.showItem}">
      <role-selector
        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_name = '{}'">
      </role-selector>
    </div>
    </div>

  </div>
  </criteria>
      <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy">
        <template partial='head'>
          <tr>
            <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;white-space:nowrap;">{{row.f_plan_name}}</td>
       <td style="text-align: center;white-space:nowrap;">{{row.f_plan_year}}</td>
       <td style="text-align: center;white-space:nowrap;">{{row.f_plan_month}}</td>
       <td style="text-align: center;white-space:nowrap;">{{row.f_checker}}</td>
       </template>
      </data-grid>
    </criteria-paged>


  </div>



</template>

<script>
  import {PagedList} from 'vue-client'


    export default {
        title: "散户计划",


      data(){
          let model = new PagedList('api/af-safecheck/sql/getRetailplan',20,{
            f_filialeids: 'this.f_filialeids',

          })

        model.f_filialeids = '(' + this.$login.f.orgid + ')'
        model.year = ''
        model.month = ''
       return{
         model:model,
         f: this.$login.f,
         headData: ['计划名称','计划年份','计划月份','安检员'],
         bodyData: ['f_plan_name','f_plan_yaer','f_plan_month','f_checker'],
         showModal: false,
         year_month:null,
         year:null,
         month:null

       }
      },
      methods: {
        hiddenr() {

          this.$parent.showItem = !this.$parent.showItem

        },
        search(args) {
          if (this.year_month != null) {
            this.model.year = this.year_month.substring(0,4)
            this.model.month = this.year_month.substring(5)
            args.condition += `and f_plan_year = '${this.model.year}' and f_plan_month ='${this.model.month}'`
          }
          this.model.search(args.condition, args.model)
        },
        getRes(obj) {
          this.model.f_filialeids = this.$login.convertToIn(obj.resids);
          console.log(this.model.f_filialeids)
        },
        showChooser() {
          this.showModal = true
        }
      },
      computed: {
        selected() {
          return this.$refs.paged.$refs.grid.selected
        }
      }
    }
</script>

