<template >
  <div class="flex" style="justify-content: space-between;">
    <div @keyup.enter="search" style="">
      <criteria-paged :model="model" v-ref:paged>
        <criteria @condition-changed='$parent.search' partial='criteria' v-ref:criteria>
          <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
            <div class="row">
              <div class="col-sm-2 form-group">
                <label class="font_normal_body">开始时间</label>
                <datepicker placeholder='开始时间' style="width:60%"
                            v-model="model.startTime"
                            :value.sync="model.startTime"
                            :format="'yyyy-MM-dd'"
                            :show-reset-button="true"
                            condition="f_signature_date >= '{} 00:00:00'">
                </datepicker>
              </div>
              <div class="col-sm-2 form-group" >
                <label class="font_normal_body">结束日期</label>
                <datepicker placeholder='结束日期' style="width:60%"
                            v-model="model.endTime"
                            :value.sync="model.endTime"
                            :format="'yyyy-MM-dd'"
                            :show-reset-button="true"
                            condition="f_signature_date <= '{} 23:59:59'">
                </datepicker>
              </div>

              <div style="float: right">
                <button @click="search()"  class="button_search" style="margin-right: 10px" v-el:cba>查询</button>
              </div>
            </div>


          </div>

        </criteria>
        <data-grid :model="model" class="list_area table_sy" class="list_area table_sy" 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>
              <th><nobr>合同签订时间</nobr></th>
              <th><nobr>合同签订人</nobr></th>
              <th><nobr>操&emsp;&emsp;作</nobr></th>
            </tr>
          </template>
          <template partial='body' partial='list' v-ref:grid>
            <tr >
              <td style="text-align:center">{{ row.f_userinfo_code }}</td>
              <td style="text-align:center">{{ row.f_user_name }}</td>
              <td style="text-align:center">{{ row.f_address }}</td>
              <td style="text-align:center">{{ row.f_contract_name }}</td>
              <td style="text-align:center">{{ row.f_signature_state }}</td>
              <td style="text-align:center">{{ row.f_signature_date }}</td>
              <td style="text-align:center">{{ row.f_user_name_not }}</td>
              <td style="text-align:center"><button type="button" name="button" class="btn btn-link" @click="$parent.$parent.$parent.showExplain(row)">合同预览</button></td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
    </div>
    <modal v-if="explainShow" :show.sync="explainShow" :title="titleL" style="height: 1000px" :width="1000" v-ref:model backdrop="false">
      <article slot="modal-body" class="modal-body">
        <iframe id="myIframe" :src="pdfPath" style="width: 100%;height: 500px"></iframe>
      </article>
      <div slot="modal-footer" class="modal-footer">
        <button type="button" class="btn btn-default"  @click="printPDF">打印</button>
        <button type="button" class="btn btn-default" @click="close()">关闭</button>
      </div>
    </modal>
  </div>

</template>

<script>
  import {PagedList} from 'vue-client'
  export default {
    title: '合同查看',
    data () {
      return {
        condition: `f_userinfo_id = '${this.row.f_userinfo_id}'`,
        model: new PagedList('rs/sql/getContractSigin', 20, {}),
        explainShow: false,
        pdfPath: null,
        prPdf: null,
        titleL: null
      }
    },
    props: ['row'],
    ready () {
      this.$refs.paged.$refs.criteria.search()
    },
    methods: {
      printPDF () {
        window.open(this.prPdf, '_blank')
      },
      async search () {
        this.condition = `f_userinfo_id = '${this.row.f_userinfo_id}'`
        this.model.search(this.condition, this.model)
      },
      showExplain (row) {
        this.pdfPath = row.f_visit_url + '#toolbar=0'
        this.prPdf = row.f_visit_url
        this.titleL = row.f_contract_name
        this.explainShow = true
      }
    },
    computed: {
    }
  }
</script>

