<template>
  <div class="flex-row">
    <div class="basic-main">
      <criteria-paged :model="model" v-ref:paged @sort="sort">
        <criteria partial='criteria' class="search_area" @condition-changed='$parent.selfSearch' v-ref:criteria>
          <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
            <div class="row">
              <div class="col-sm-4 form-group" style="margin: 0">
                <role-selector-safe
                  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-safe>
              </div>
              <div class="form-group col-sm-2"  >
                <label class="font_normal_body">用户地址</label>
                <input type="text" class="input_search" v-model="model.f_address"
                       style="width: 60%" placeholder="用户地址" condition="f_address like '%{}%'">
              </div>
              <div class="form-group col-sm-2"  >
                <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="f_upload_date >=  '{} 00:00:00'">
                </datepicker>
             </div>
              <div class="form-group col-sm-2"  >
                <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="f_upload_date <=  '{} 23:59:59'">
                </datepicker>
              </div>
              <div class="form-group col-sm-2" style="width: auto;margin-top:8px;float: right">

                <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 class="button_spacing button_search" @click="search()">查询</button>
<!--                <div style="float: right" class="button_spacing"-->
<!--                     :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"-->
<!--                     @click="$parent.$parent.hidden()"></div>-->
              </div>
            </div>
          </div>
        </criteria>
        <data-grid class="list_area table_sy" style="overflow: hidden" :model="model" partial='list' v-ref:grid>
          <template partial='head'>
            <tr>
              <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_address}}</td>
            <td style="text-align: center">{{row.f_checker_name}}</td>
            <td style="text-align: center">{{row.f_upload_date}}</td>
            <td style="text-align: center">{{row.f_comments}}</td>
            <td style="text-align: center">
              <button class="button_spacing button_search-1" @click='$parent.$parent.$parent.change(row)'>查看</button>
            </td>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
    <modal :show.sync="imgshow" v-ref:modal backdrop="true">
      <header slot="modal-header" class="modal-header">
        到访照片
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="from-group" style="display: flex">
          <img-self-plus v-if="imgRow.f_daofang1_path" :src="'rs/image/file/'+imgRow.f_daofang1_path" width="100" height="150"></img-self-plus>
          <img-self-plus v-if="imgRow.f_daofang2_path" :src="'rs/image/file/'+imgRow.f_daofang2_path" width="100" height="150"></img-self-plus>
          <img-self-plus v-if="imgRow.f_daofang3_path" :src="'rs/image/file/'+imgRow.f_daofang3_path" width="100" height="150"></img-self-plus>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-success" @click='imgclose'>关闭</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  import { PagedList } from 'vue-client'
  export default {
    title: '无计划到访查询',
    data() {
      return {
        imgshow:false,
        imgRow:{},
        model: new PagedList('rs/sql/safe_singleTable_OrderBy', 20, {items: '"*"', tablename: '"t_visit_paper"', orderitem: '"f_upload_date desc"'}),
        //searchData:searchData,
        excelHeaders: {
          'f_address': '地址',
          'f_checker_name': '安检员',
          'f_upload_date': '安检时间',
          'f_comments': '备注'
        },
        criteriaShow: false,
        showModal: false,

      }
    },
    methods: {
      getRes(obj) {
        this.model.f_filialeid = this.$login.convertToIn(obj.resids);
      },
      imgclose () {
        this.imgshow = false
      },
      hidden() {
        this.criteriaShow = !this.criteriaShow
      },
      change(row){
        console.log("933",row)
        this.imgRow = row
        this.imgshow = true
      },
      selfSearch(args) {
        ////tag
        this.model.search(args.condition, args.model, args.condValue)
      }
    },

    ready() {
    },
    computed :{
      searchData() {
        return {items: '*', tablename: 't_visit_paper', orderitem: 'f_upload_date desc',condition: this.model.condition}
      }
    },
    watch: {

    }

  }
</script>
