<template>
  <div class="flex-row">
    <div class="basic-main">
      <criteria-paged v-ref:paged :model="model">
        <criteria v-ref:criteria class="search_area" partial='criteria' @condition-changed='$parent.selfSearch'>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">抽查人</label>
                <input v-model="model.f_spot_check_person" class="input_search"
                       condition="f_spot_check_person like '{}%'"
                       placeholder="抽查人" style="width: 60%" type="text">
              </div>
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">抽查时间</label>
                <datepicker
                  v-model="model.f_check_start"
                  :disabled-days-of-week="[]"
                  :format="'yyyy-MM-dd'" :show-rest-button="reset"
                  :value.sync="model.f_check_start"
                  class="select_list select"
                  condition="f_spot_check_date > ='{} 00:00:00'"
                  placeholder='抽查开始时间'
                  style="width: 60%">
                </datepicker>
              </div>
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">抽查时间</label>
                <datepicker
                  v-model="model.f_check_end"
                  :disabled-days-of-week="[]" :format="'yyyy-MM-dd'"
                  :show-rest-button="reset"
                  :value.sync="model.f_check_end"
                  condition="f_spot_check_date <=  '{} 23:59:59'"
                  placeholder='抽查结束时间'
                  style="width: 60%">
                </datepicker>
              </div>
              <div class="col-sm-4" style="width: auto;margin-top:8px;float: right">
                <button class="button_spacing button_search" @click="search()">查询</button>
              </div>
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">工单编号</label>
                <input v-model="model.f_check_id" class="input_search" condition="f_check_id like '{}%'"
                       placeholder="工单编号" style="width: 60%" type="text">
              </div>
            </div>
            <div class="row">
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">抽查类型</label>
                <v-select id="f_entry"
                          v-model='model.f_check_type'
                          :options='$parent.$parent.spotCheckTypes' :value-single="true"
                          :value.sync="model.f_check_type"
                          class="select_list select"
                          clear-button
                          close-on-select
                          condition="f_check_type = '{}'"
                          placeholder='抽查类型' style="width: 60%"></v-select>
              </div>
              <div class="col-sm-4" style="width: 20%">
                <label class="font_normal_body">抽查状态</label>
                <v-select id="f_entry"
                          v-model='model.f_spot_check_state'
                          :options='$parent.$parent.spotCheckStates' :value-single="true"
                          :value.sync="model.f_spot_check_state"
                          class="select_list select"
                          clear-button
                          close-on-select
                          condition="f_spot_check_state = '{}'"
                          placeholder='抽查状态' style="width: 60%"></v-select>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid v-ref:grid :model="model" class="list_area table_sy" partial='list' style="overflow: hidden">
          <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>
              <th>
                <nobr>抽查人所属公司</nobr>
              </th>
              <th>
                <nobr>抽查状态</nobr>
              </th>
              <th>
                <nobr>备注</nobr>
              </th>
            </tr>
          </template>
          <template partial='body'>
            <td style="text-align: center">{{ row.f_spot_check_person }}</td>
            <td style="text-align: center">{{ row.f_spot_check_date }}</td>
            <td style="text-align: center">{{ row.f_spot_check_org_id }}</td>
            <td style="text-align: center">{{ row.f_check_id }}</td>
            <td style="text-align: center">{{ row.f_check_type }}</td>
            <td style="text-align: center">{{ row.f_check_upload_org_id }}</td>
            <td style="text-align: center">{{ row.f_check_upload_date }}</td>
            <td style="text-align: center">{{ row.f_spot_check_state }}</td>
            <td style="text-align: center">{{ row.f_spot_check_remark }}</td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>

</template>

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

export default {
  title: '工单抽查记录',
  data() {
    return {
      model: new PagedList('api/af-safecheck/sql/safe_singleTable_OrderBy', 5, {
        items: '"tsh.*,to1.name as spot_check_org_name,to2.name as check_upload_org_name"',
        tablename: '"t_spot_check tsh LEFT JOIN t_organization to1 ON to1.id = tsh.f_spot_check_org_id LEFT JOIN t_organization to2 ON to2.id = tsh.f_check_upload_org_id"',
        orderitem: '"tsh.id"'
      }),
      spotCheckTypes: [{value: '全部', label: ''}, {value: '安检单', label: '安检单'}, {
        value: '报修单',
        label: '报修单'
      }, {
        value: '置换单',
        label: '置换单'
      }],
      spotCheckStates: [{value: '全部', label: ''}, {value: '通过', label: '通过'}, {value: '不通过', label: '不通过'}]
    }
  },
  methods: {
    selfSearch(args) {
      this.model.search(args.condition, args.model, args.condValue)
    }
  },
  ready() {

  }

}
</script>
