<template>
  <div class="flex-row">
    <div id="pc-finduser-page" class="flex bg-white p-10 basic-main">
      <div class="span">
        <criteria-paged :model="model" v-ref:paged v-if="!show">
          <criteria partial='criteria' v-ref:criteria @condition-changed='search'>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row">
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" class="input_search" v-model="model.f_userinfoid" placeholder='客户编号'
                         condition="cp.f_userinfoid = '{}'" style="width: 60%">
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户姓名</label>
                  <input type="text" class="input_search" v-model="model.f_user_name" placeholder='客户姓名'
                         condition="cp.f_user_name like '{}%'" style="width: 60%">
                </div>
                <div class="col-sm-2 form-group" >
                  <label class="font_normal_body">客户地址</label>
                  <input type="text" class="input_search" v-model="model.f_address" placeholder='客户地址'
                         condition="cp.f_address like '%{}%'" style="width: 60%">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">客户类型</label>
                  <v-select :value.sync="model.f_check_type" v-model='model.f_check_type'
                            :value-single="true" style="width: 60%"
                            :options="[{label:'全部',value:''},{label:'民用',value:'民用'},{label:'非民用',value:'非民用'}]" placeholder='请选择'
                            close-on-select
                            condition="cp.f_check_type = '{}'"></v-select>
                </div>
                <div class="col-sm-2 form-group" style="margin: 0">
                  <role-selector-safe
                    role-name="新安检员"
                    role-lable="安&nbsp;检&nbsp;员&nbsp;"
                    :value.sync="model.f_checker_id"
                    v-model="model.f_checker_id"
                    :value-multiple="true"
                    :value-close="false"
                    condition="cp.f_checker_name in {}">
                  </role-selector-safe>
                </div>
                <div class="form-group col-sm-2" style="width: auto;margin-top:8px;">
                  <export-excel-safe :data="$parent.$parent.searchData"
                                     :field="$parent.$parent.excelHeaders"
                                     progress="safeGetExportProgress"
                                     sqlurl="rs/logic/SafeExportExcel"
                                     sql-name="safe_singleTable_OrderBy"
                                     template-name='安检设备'></export-excel-safe>
                  <button style="margin-left: 4px" class="button_search button_spacing" @click="$parent.$parent.search()">查询</button>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()"></div>
                </div>
                <div class="form-group col-sm-2"  v-show="$parent.$parent.criteriaShow">
                  <label class="font_normal_body">安检起始</label>
                  <datepicker
                    :value.sync="model.f_check_start"
                    placeholder='安检起始时间' style="width: 60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    v-model="model.f_check_start"
                    condition="cp.f_onsite_time >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2"  v-show="$parent.$parent.criteriaShow">
                  <label class="font_normal_body">安检结束</label>
                  <datepicker
                    :value.sync="model.f_check_end"
                    placeholder='安检结束时间' style="width: 60%"
                    :disabled-days-of-week="[]"
                    :format="'yyyy-MM-dd'"
                    :show-rest-button="reset"
                    v-model="model.f_check_end"
                    condition="cp.f_onsite_time <= '{} 23:59:59'">
                  </datepicker>
                </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>
                <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>
                <th>
                  <nobr>购气折所用设备是否登记</nobr>
                </th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center">
                <nobr>{{ $index + 1 }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_userinfoid }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_user_name }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_address }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_check_type }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_checker_name }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_onsite_time }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_devices_type }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_brand }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_devices_num }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_power }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_install_date }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_certificate }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_register }}</nobr>
              </td>
            </template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

<script>
  import {PagedList} from 'vue-client'
  import * as Util from '../Util'

  export default {
    title: '安检设备',
    data() {
      return {
        model: new PagedList('rs/sql/safe_singleTable_OrderBy', 20, {
          items: "'sd.*, cp.f_checker_name, cp.f_address, cp.f_check_type, cp.f_user_name, cp.f_userinfoid, cp.f_onsite_time'",
          tablename: "'t_safecheck_devices sd left join t_check_paper cp on sd.f_paper_id = cp.id'",
          orderitem: "'cp.f_onsite_time desc'"
        }),
        row: null,
        show: false,
        wavflie: '',
        orderMan: '',
        msgs: [],
        service: Object,
        pendingCount: 0,
        serobj: Object,
        criteriaShow: false,
        excelHeaders: {
          'f_userinfoid': '客户编号',
          'f_user_name': '客户姓名',
          'f_address': '客户地址',
          'f_check_type': '客户类型',
          'f_checker_name': '安检员',
          'f_onsite_time': '安检时间',
          'f_devices_type': '设备类型',
          'f_brand': '设备品牌',
          'f_devices_num': '设备数量',
          'f_power': '设备功率',
          'f_install_date': '安装日期',
          'f_certificate': '验收合格证',
          'f_register': '购气折所用设备是否登记',
        },
        searchData: {
          condition: "1=1",
          items: "sd.*, cp.f_checker_name, cp.f_address, cp.f_check_type, cp.f_user_name, cp.f_userinfoid, cp.f_onsite_time",
          tablename: "t_safecheck_devices sd left join t_check_paper cp on sd.f_paper_id = cp.id",
          orderitem: "'cp.f_onsite_time desc'"
        },
      }
    },
    ready() {
      this.$refs.paged.$refs.criteria.model.f_check_start = Util.toStartDateString()
    },
    methods: {
      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
      //置空 查询条件
      clearmsg() {
        this.$refs.paged.$refs.criteria.model = {}
      },
      playWav(val) {
        this.wavflie = val;
        this.show = true
      },
      closemodel() {
        this.wavflie = '';
        this.show = false
      },
      search() {
        this.model.rows = []
        this.$refs.paged.$refs.criteria.search()
        this.searchData.condition = this.model.condition
      }
    },
  }
</script>
<style scoped>
  label {
    width: 80px;
  }
  #pc-finduser-page .form-input-group {
    margin: 5px 0px;
    height: auto;
  }
</style>
