<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-3 form-group form-input-group" style="width: 20%">
                  <label class="font_normal_body" style="width: 40%">回访人</label>
                  <input type="text" class="input_search" v-model="model.f_visitman" placeholder='回访人'
                         condition="sv.f_visitor like '%{}%'"
                         :size="model.f_visitman ? model.f_visitman.length : 8">
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%">
                  <label class="font_normal_body" style="width: 40%">电话号码</label>
                  <input type="text" class="input_search" v-model="model.f_phone" placeholder='电话号码'
                         condition="sv.f_phone like '%{}%'">
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%">
                  <label class="font_normal_body" style="width: 40%">开始时间</label>
                  <datepicker placeholder="开始时间"
                              v-model="model.comingtime"
                              :value.sync="model.comingtime"
                              condition="sv.f_visit_date >= '{}'"
                              :format="'yyyy-MM-dd 00:00:00'"
                  ></datepicker>
                </div>
                <div class="col-sm-3 form-group form-input-group" style="width: 20%">
                  <label class="font_normal_body" style="width: 40%">结束时间</label>
                  <datepicker placeholder="结束时间"
                              v-model="model.endtime"
                              :value.sync="model.endtime"
                              condition="sv.f_visit_date <= '{}'"
                              :format="'yyyy-MM-dd 23:59:59'"
                  ></datepicker>
                </div>
                <div style="float: right;" class="form-group span">
                  <button type="button" name="button" style="background-color: #5ac0d9;border-radius: 4px;"
                          class="button_spacing button_search" @click="$parent.$parent.clearmsg">置空
                  </button>
                  <button type="button" name="button"
                          class="button_search button_spacing" @click="$parent.$parent.search">查询
                  </button>
                  <export-excel-safe :data="$parent.$parent.searchData"
                                    :field="$parent.$parent.excelHeaders"
                                    sqlurl="rs/logic/SafeExportExcel" sql-name="safe_singleTable_OrderBy"
                                    :template-name="$parent.$parent.excelTitle"></export-excel-safe>
                </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>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center">
                <nobr>{{ $index + 1 }}</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_defect_text }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_visitor }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_visit_date }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_phone }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_remarks }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_bz }}</nobr>
              </td>
              <td style="text-align: center">
                <nobr>{{ row.f_visit }}</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: "'sv.*, cp.f_user_name, cp.f_address, cp.f_defect_text'", tablename: "'t_safe_visit sv left join t_check_paper cp on sv.f_paper_id = cp.id'",
          orderitem: "'sv.f_visit_date desc'"
        }),
        row: null,
        show: false,
        wavflie: '',
        orderMan: '',
        msgs: [],
        service: Object,
        pendingCount: 0,
        serobj: Object,
        criteriaShow: false,
        excelHeaders: {
          'f_user_name': '客户姓名',
          'f_address': '客户地址',
          'f_defect_text': '隐患明细',
          'f_visitor': '回访人',
          'f_visit_date': '回访时间',
          'f_phone': '电话号码',
          'f_remarks': '客户意见',
          'f_bz': '备注',
          'f_visit': '是否完成',
        },
        searchData: {
          condition: "1=1",
          items: "sv.*, cp.f_user_name, cp.f_address, cp.f_defect_text",
          tablename: 't_safe_visit sv left join t_check_paper cp on sv.f_paper_id = cp.id',
          orderitem: 'sv.f_visit_date desc'
        },
        excelTitle: '回访记录',
      }
    },
    ready() {
      this.$refs.paged.$refs.criteria.model.comingtime = Util.toStartDateString() + ' 00:00:00'
    },
    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
      }
    },
    computed: {
      types() {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('回访类型')]
      }
    }
  }
</script>
<style scoped>
  label {
    width: 80px;
  }
  #pc-finduser-page .form-input-group {
    margin: 5px 0px;
    height: auto;
  }
</style>
