<template>
  <div class="flex">
    <form class="form-inline">
      <div class="form-group">
        <label for="c_plan_year">年份：</label>
        <v-select id="c_plan_year" :value.sync="c_plan_year"
        :options='c_year_list' close-on-select clear-button></v-select>
        <button type="button" class="btn btn-default" @click="search()">查询</button>
      </div>
      <div class="form-group">
        部门:
        <chooser :userid.sync='f.id' resource-type="organization" :width='200' :select-data.sync='model.chosenOrg'></chooser>
      </div>
      {{model.chosenOrg.fullname}}
    </form>
    <div class="span">
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>维修员</th>
            <th>已维修</th>
            <th>在维修</th>
            <th>未维修</th>
            <th></th>
          </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_repairman}}</td>
          <td>{{row.checked}}</td>
          <td>{{row.checking}}</td>
          <td>{{row.unchecked}}</td>
          <td v-on:click.stop.prevent='$parent.$parent.showDetail(row)'><span class="glyphicon glyphicon-option-horizontal"></span></td>
        </template>
      </data-grid>
    </span>
    <div style="height:50px;"></div>
  </div>
</template>

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

export default {
  title: '维修员年任务',
  props: ['f'],
  data() {
    let options = []
    let year = (new Date()).getFullYear()
    for(let i = year - 8; i <= year +1; i++ )
      options.push({label: i+'', value: i+''})
    let model = new PagedList('rs/sql/跟踪维修员年任务', 20, {id: 'this.id', org_id: 'this.chosenOrg.id', f_plan_year: 'this.f_plan_year', f_subcompany: 'this.f_subcompany'})
    model.chosenOrg = {id:0}
    return {
      c_plan_year: year + '',
      c_year_list: options,
      model: model
    }
  },
  ready () {
    this.model.id = this.f.id
    this.model.chosenOrg.id = this.f.parent.id
    this.model.f_plan_year = this.c_plan_year[0]
    this.model.f_subcompany = Vue.f_subcompany
    this.$watch('c_plan_year', function (val) {
        this.model.f_plan_year = val[0]
    })
  },
  methods: {
    showDetail (row) {
      this.$goto('repair-annual-detail', {f_plan_year: this.model.f_plan_year, f_repairman: row.f_repairman, f_subcompany: this.model.f_subcompany}, 'self')
    },
    search () {
      this.model.rows = []
      this.model.search()
    }
  }
}
</script>
