<template>
  <criteria-paged :model="model" v-ref:paged>
    <criteria partial='criteria' v-ref:criteria @condition-changed='$parent.selfSearch'>
      <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
        <div class="row">
          <div class="col-sm-3 form-group">
            <label class="font_normal_body">用户编号</label>
            <input type="text" class="input_search"
                   style="width:60%"
                   v-model="model.f_userinfo_code"
                   condition="f_userinfo_code = '{}'"
                   placeholder="用户编号"/>
          </div>
          <div class="col-sm-3 form-group">
            <label class="font_normal_body">旧用户姓名</label>
            <input type="text" class="input_search"
                   style="width:60%"
                   v-model="model.f_user_name"
                   condition="f_user_name = '{}'"
                   placeholder="用户姓名"/>
          </div>
          <div class="col-sm-2 form-group">
            <label class="font_normal_body">处理状态</label>
            <v-select v-model="model.f_order_state" style="width:60%"
                      placeholder='处理状态'
                      :value.sync="model.f_order_state"
                      :options='$parent.$parent.getState'
                      :value-single="true"
                      close-on-select value-single>
            </v-select>
          </div>
          <div class="span col-sm-3 form-group button-range" style="float: right">
            <button class="button_search button_spacing" @click="search()" v-el:cx>查询</button>
            <button class="button_clear button_spacing" @click="clear">清空</button>
            <div style="float: right" class="button_spacing"
                 :class="{'button_shrink_top': criteriaShow,'button_shrink_bottom': !criteriaShow}"
                 @click="criteriaShow = !criteriaShow"></div>
          </div>
          <div class="row" v-show="criteriaShow">
            <div class="col-sm-3 form-group">
              <label class="font_normal_body">旧联系电话</label>
              <input type="text" class="input_search"
                     style="width:60%"
                     v-model="model.f_user_phone"
                     condition="f_user_phone = '{}'"
                     placeholder="联系电话"/>
            </div>
            <div class="col-sm-4 form-group">
              <label class="font_normal_body">起始时间</label>
              <datepicker placeholder='预约时间'
                          v-model="model.f_orderdate_start"
                          :value.sync="model.f_orderdate_start"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="f_order_date >= '{}'">
              </datepicker>
            </div>
            <div class="col-sm-4 form-group">
              <label class="font_normal_body">结束时间</label>
              <datepicker placeholder='预约时间'
                          v-model="model.f_orderdate_end"
                          :value.sync="model.f_orderdate_end"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="f_order_date <= '{}'">
              </datepicker>
            </div>
          </div>
        </div>
      </div>
    </criteria>
    <data-grid :model="model" partial='list' class="list_area table_sy" 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>备注信息</nobr>
          </th>
          <th>
            <nobr>预约类型</nobr>
          </th>
          <th>
            <nobr>预约时间</nobr>
          </th>
          <th>
            <nobr>处理状态</nobr>
          </th>
          <th>
            <nobr>处理时间</nobr>
          </th>
          <th>
            <nobr>处&ensp;理&ensp;人</nobr>
          </th>
        </tr>
      </template>
      <template partial='body'>
        <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_user_phone}}</td>
          <td style="text-align:center">{{ row.f_idnumber }}</td>

          <td style="text-align:center">{{ row.f_newuser_name }}</td>
          <td style="text-align:center">{{ row.f_newuser_phone}}</td>
          <td style="text-align:center">{{ row.f_newidnumber }}</td>

          <td style="text-align:center">{{ row.f_comments }}</td>
          <td style="text-align:center">{{ row.f_operate_type }}</td>
          <td style="text-align:center">{{ row.f_order_date }}</td>
          <td style="text-align:center">{{ row.f_order_state ? row.f_order_state : '待处理' }}</td>
          <td style="text-align:center">{{ row.f_operate_date }}</td>
          <td style="text-align:center">{{ row.f_dispose_operator }}</td>
        </tr>
      </template>
      <template partial='foot'></template>
    </data-grid>
  </criteria-paged>


</template>

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

export default {
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 20,
        {
          tablename: '"t_transfer_midorder"',
          items: '"*"',
          orderitem: '"f_order_date desc"'
        }),
      criteriaShow: false
    }
  },
  ready () {
    // 默认查询待处理状态预约
    this.search()
  },
  methods: {
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeids = val[0]
      this.initAreas(this.f_filialeids)
    },
    search () {
      this.$refs.paged.$refs.criteria.search()
    },
    selfSearch (args) {
      if (this.$refs.paged.$refs.criteria.model.f_order_state) {
        if (this.$refs.paged.$refs.criteria.model.f_order_state === '待处理') {
          args.condition += ` and f_order_state = '待处理 '`
        }
        if (this.$refs.paged.$refs.criteria.model.f_order_state === '预约成功') {
          args.condition += ` and   f_order_state = '预约成功' `
        }
        if (this.$refs.paged.$refs.criteria.model.f_order_state === '预约失败') {
          args.condition += ` and   f_order_state = '预约失败' `
        }
      }
      args.condition = `${args.condition} and f_operate_type='预约过户' and f_state = '有效'`
      this.model.search(args.condition, args.model)
    }
  },
  computed: {
    getState () {
      return [{label: '全部', value: ''}, {label: '待处理', value: ''}, {
        label: '预约成功',
        value: '预约成功'
      }, {label: '预约失败', value: '预约失败'}]
    },
    orderType () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('预约类型')]
    }
  },
  watch: {
    'sliceArea' () {
      this.model.model.f_slice_area = ''
    }
  }
}
</script>
<style lang="less">
</style>
