<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:criteria>
        <validator name='v' partial>
        <div  class="form-inline auto" >
          <div class="form-group">
            <div class="form-group" >
              <label for="f_subcompany">分公司：</label>
              <v-select id="f_subcompany"
              placeholder='请选择分公司'
              :value.sync="$parent.$parent.model.f_subcompany"
              :options='$parent.$parent.f_divisions'
              close-on-select clear-button></v-select>
            </div>
            <div class="form-group">
              <label for="f_check_type">用户类型：</label>
              <v-select id="f_check_type"
              placeholder='请选择用户类型'
              :value.sync="$parent.$parent.model.f_check_type"
              :options='$parent.$parent.user_types'
              close-on-select clear-button></v-select></v-select>
            </div>
            <div class="form-group">
              安检时间 从:
              <datepicker id="startdate"
                v-model='model.date1'
                :value.sync="model.date1"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                :show-reset-button="reset">
              </datepicker>
            </div>
            <div class="form-group">
              到:
              <datepicker id="startdate"
              v-model='model.date2'
              :value.sync="model.date2"
                :disabled-days-of-Week="[]"
                :format="'yyyy-MM-dd'"
                :show-reset-button="reset">
              </datepicker>
            </div>
            安检计划:
            <input type="text" class="form-control" v-model="$parent.$parent.model.f_check_plan.f_plan_name" @click="$parent.$parent.showChooser"  readonly="readonly">
            <button class="btn btn-default" @click="search()">查询</button>
            <modal :show.sync="$parent.$parent.showModal" v-ref:modal>
              <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">
                  选择计划
                </h4>
              </div>
              <div slot="modal-body" class="modal-body">
                <plan-chooser :f.sync="$parent.$parent.f"  v-ref:chooser></plan-chooser>
              </div>
              <div slot="modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" @click="$parent.$parent.ok">确认</button>
                <button type="button" class="btn btn-default" @click="$parent.$parent.cancel">取消</button>
              </div>
            <modal>
          </div>
        </div>
        </validator>
      </criteria>
      <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_user_name}}</td>
          <td>{{row.f_address}}</td>
          <td>{{row.f_offsite_time}}</td>
          <td>{{row.f_entry_status}}</td>
          <td>{{row.f_usage}}</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: '本期用气量查询',
  props: ['f'],
  data () {
    let model = new PagedList('api/af-safecheck/sql/本期用气量查询', 20,
      {date1: 'this.model.date1', date2: 'this.model.date2',
      f_check_type: 'this.f_check_type[0]',  f_subcompany: 'this.f_subcompany[0]', f_plan_id: 'this.f_check_plan.id'})
    model.f_subcompany = [Vue.f_subcompany]
    model.f_check_type = ['']
    model.date1 = ''
    model.date2 = ''
    model.f_check_plan = {f_plan_name: '', id: ''}
    model.f_defect = ['']
    return {
      model: model,
      f_divisions: Vue.f_subcompany != '' ? [{label: Vue.f_subcompany, value: Vue.f_subcompany}]: this.$appdata.getParam('安检系统用子公司'),
      user_types: this.$appdata.getParam('用户类型'),
      showModal: false
    }
  },
  methods: {
    showChooser () {
      this.showModal = true
    },
    ok () {
      this.showModal = false
      this.model.f_check_plan = this.$refs.paged.$refs.criteria.$refs.modal.$children[0].selectedRow
    },
    cancel () {
      this.showModal = false
      this.model.f_check_plan = {f_plan_name: '', id: ''}
    }
  }
}
</script>
