<template>
  <div id="unit" @keyup.enter="search" class="flex-row">
    <div class="basic-main" @keyup.enter="search">
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
            <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
              <div class="row">
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">用户编号</label>
                  <input class="input_search" condition="f_userinfo_code like '%{}%'" placeholder="用户编号" style="width:60%"
                         type="text" v-model="model.ename"
                  />
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">用户姓名</label>
                  <input  class="input_search" condition="f_user_name = '{}'" placeholder="用户姓名" style="width:60%"
                          type="text" v-model="model.name"
                  />
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">地&emsp;&emsp;址</label>
                  <input  :size="model.f_address ? model.f_address.length * 2 : 4" class="input_search" condition="f_address like '%{}%'" placeholder='用户地址' style="width:60%"
                          type="text"
                          v-model="model.f_address">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">电&emsp;&emsp;话</label>
                  <input :size="model.f_user_phone ? model.f_user_phone.length : 2" class="input_search" condition="f_user_phone = '{}'" placeholder='电话' style="width:60%"
                         type="text"
                         v-model="model.f_user_phone">
                </div>
                <div class="form-group col-sm-3 button-range" style="padding-right: 10px">
                  <button @click="$parent.$parent.search()" class="button_search button_spacing" style="width:80px;margin-left:30px;" v-el:cx>查询</button>
                  <export-excel
                    :data="$parent.$parent.getCondition"
                    :field="$parent.$parent.getfield"
                    sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="sale_blackRecordQuery" template-name='黑名单记录导出'
                    :choose-col="true">
                  </export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
                </div>
              </div>
              <div class="row" v-if="$parent.$parent.criteriaShow">
                <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getorg" v-ref:sel></res-select-group>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">表&emsp;&emsp;号</label>
                  <input  :size="model.f_meternumber ? model.f_meternumber.length * 2 : 4" class="input_search" condition="f_meternumber = '{}'" placeholder='表号' style="width:60%"
                          type="text"
                          v-model="model.f_meternumber">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">卡&emsp;&emsp;号</label>
                  <input  :size="model.f_card_id ? model.f_card_id.length * 2 : 4" class="input_search" condition="f_card_id = '{}'" placeholder='卡号' style="width:60%"
                          type="text"
                          v-model="model.f_card_id">
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">操作日期</label>
                  <datepicker placeholder="开始日期"
                              style="width:60%"
                              class="datepicker"
                              v-model="model.startDate"
                              :value.sync="model.startDate"
                              :format="'yyyy-MM-dd'"
                              condition="f_operate_date >= '{} 00:00:00'">
                  </datepicker>
                </div>
                <div class="form-group col-sm-2">
                  <label class="font_normal_body">操作日期</label>
                  <datepicker placeholder="结束日期"
                              style="width:60%"
                              class="datepicker"
                              v-model="model.endDate"
                              :value.sync="model.endDate"
                              :format="'yyyy-MM-dd'"
                              condition="f_operate_date <= '{} 23:59:59'">
                  </datepicker>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">操作类型</label>
                  <v-select :value.sync="model.f_operat_type"
                            v-model="model.f_operat_type"
                            style="width: 60%"
                            condition="f_operat_type = '{}'"
                            :options='$parent.$parent.operateType' placeholder='操作类型'
                            close-on-select>
                  </v-select>
                </div>
              </div>
            </div>
          </criteria>

          <data-grid :model="model" class="list_area table_sy" partial='list' v-ref:grid>
            <template partial='head'>
              <tr>
                <th style="text-align: center;">序号</th>
                <th style="text-align: center;">用户编号</th>
                <th style="text-align: center;">姓名</th>
                <th style="text-align: center;">表号</th>
                <th style="text-align: center;">卡号</th>
                <th style="text-align: center;">电话</th>
                <th style="text-align: center;">地址</th>
                <th style="text-align: center;">操作日期</th>
                <th style="text-align: center;">操作类型</th>
                <th style="text-align: center;">操作人</th>
                <th style="text-align: center;">操作原因</th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">{{$index+1}}</td>
              <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_meternumber}}</td>
              <td style="text-align: center;">{{row.f_card_id}}</td>
              <td style="text-align: center;">{{row.f_user_phone}}</td>
              <td style="text-align: center;">{{row.f_address}}</td>
              <td style="text-align: center;">{{row.f_operate_date}}</td>
              <td style="text-align: center;">{{row.f_operat_type}}</td>
              <td style="text-align: center;">{{row.f_operator}}</td>
              <td style="text-align: center;">{{row.f_comments}}</td>
            </template>
            <template partial='foot'></template>
          </data-grid>
        </criteria-paged>
      </div>
    </div>
  </div>
</template>

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

  export default {
    data () {
      return {
        initres: {
          org: [this.$login.f.orgid]
        },
        criteriaShow: false,
        model: new PagedList('rs/sql/sale_blackRecordQuery', 20),
        // 公司下拉
        curorgid: [this.$login.f.orgid],
        f_orgid: '',
        getfield: {
          'f_userinfo_code': '用户编号',
          'f_user_name': '用户姓名',
          'f_meternumber': '表号',
          'f_card_id': '卡号',
          'f_user_phone': '用户电话',
          'f_address': '用户地址',
          'f_operate_date': '操作日期',
          'f_operat_type': '操作类型',
          'f_operator': '操作人',
          'f_comments': '原因'
        },
        operateType: [{label: '全部', value: ''}, {label: '拉黑 ', value: '拉黑'}, {label: '取消拉黑', value: '取消拉黑'}]
      }
    },
    props: {
      row: {},
      ispartial: false
    },
    ready () {
      this.$refs.paged.$refs.cri.model.startDate = this.data ? this.data.startDate : this.$login.toStandardDateString()
      this.$refs.paged.$refs.cri.model.endDate = this.data ? this.data.endDate : this.$login.toStandardDateString()
      this.search()
    },
    methods: {
      async getRes (condition, obj) {
        console.log('condition =', condition)
        console.log('obj =', obj)
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      search () {
        this.$refs.paged.$refs.cri.search()
        this.$dispatch('search')
      },
      getorg (val) {
        this.f_orgid = val
      },
      selfSearch (args) {
        if (!this.f_orgid) {
          this.getorg('and f_orgid in' + '(\'' + [this.$login.f.orgid] + '\')')
        }
        console.log('查询。。。', this.f_orgid)
        if (this.f_orgid) {
          args.condition = `${args.condition}  ${this.f_orgid} `
        }

        this.model.search(args.condition, args.model)
      }
    },
    watch: {
      'model.rows.length' (val) {
        if (val === 1) {
          this.$refs.paged.$refs.grid.select(this.model.rows[0])
        }
      }
    },
    computed: {
      getCondition () {
        return {condition: `${this.$refs.paged.$refs.cri.condition}` + this.f_orgid}
      }
    }
  }
</script>
