<template>
  <div @keyup.enter="search" class="flex-auto" style="flex:1;">
    <criteria-paged :model="model" v-ref:paged>
      <criteria @condition-changed='$parent.selfSearch' partial='criteria' v-ref:cri>
        <div class="form-horizontal select-overspread container-fluid auto" novalidate partial>
          <div class="row">
            <res-select-group :show-component="$parent.$parent.resshow" :initres="$parent.$parent.initres"
                              :cascade=true @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}">
              <label class="font_normal_body">用户编号</label>
              <input class="input_search" condition="f_userinfo_code like '%{}%'" placeholder="用户编号" style="width:60%"
                     style="width: 90px"
                     type="text" v-model="model.ename"
              />
            </div>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.$parent.isdetail">
              <label class="font_normal_body">用户姓名</label>
              <input  class="input_search" condition="f_user_name = '{}'" placeholder="用户姓名" style="width:60%" style="width: 90px"
                      type="text" v-model="model.name"
              />
            </div>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.downshow && !$parent.$parent.$parent.isdetail">
              <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">
              <import-excel v-if="$parent.$parent.blackImport === '黑名单导入'" template-name="黑名单用户导入模板" logic-name="BlackListImport" import-json="blacklist.json"></import-excel>
              <button @click="$parent.$parent.search()" class="button_search button_spacing" style="width:80px;margin-left:30px;" v-el:cx>查询</button>
              <button @click="$parent.$parent.add()" class="button_export button_spacing" style="width: max-content;"
                      v-el:cx>新增黑名单
              </button>
              <export-excel
                :data="$parent.$parent.getCondition"
                :field="$parent.$parent.getfield"
                sqlurl="rs/logic/saleExport" progress="saleGetExportProgress" sql-name="sale_getBlackList" 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">
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="$parent.$parent.$parent.isdetail">
              <label class="font_normal_body">用户姓名</label>
              <input  class="input_search" condition="f_user_name = '{}'" placeholder="用户姓名" style="width:60%" style="width: 90px"
                      type="text" v-model="model.name"
              />
            </div>


            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.downshow&&!$parent.$parent.$parent.isdetail">
              <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" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.downshow&&!$parent.$parent.$parent.isdetail">
              <label class="font_normal_body">用户类型</label>
              <v-select :value.sync="model.f_user_type" v-model="model.f_user_type"
                        :options='$parent.$parent.usertypes' placeholder='用户类型'
                        close-on-select
                        condition="f_user_type = '{}'"></v-select>
            </div>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.downshow&&!$parent.$parent.$parent.isdetail">
              <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" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!$parent.$parent.downshow&&!$parent.$parent.$parent.isdetail">
              <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" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!(!$parent.$parent.downshow && !$parent.$parent.$parent.isdetail)">
              <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" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}"
                 v-if="!(!$parent.$parent.downshow&&!$parent.$parent.$parent.isdetail)">
              <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" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}">
              <label class="font_normal_body">安检日期</label>
              <datepicker placeholder="开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_last_check_date"
                          :value.sync="model.f_last_check_date"
                          :format="'yyyy-MM-dd'"
                          condition="f_last_check_date >= '{} 00:00:00'"
              ></datepicker>
            </div>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}">
              <label class="font_normal_body">限购日期</label>
              <datepicker placeholder="开始日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_parameter_value"
                          :value.sync="model.f_parameter_value"
                          :format="'yyyy-MM-dd'"
                          condition="f_parameter_value >= '{} 00:00:00'"
              ></datepicker>
            </div>
            <div class="form-group" :class="{'col-sm-2':!$parent.$parent.$parent.isdetail, 'col-sm-3':$parent.$parent.$parent.isdetail}">
              <label class="font_normal_body">操&nbsp;作&nbsp;人</label>
              <input  :size="model.f_operator ? model.f_operator.length * 2 : 4" class="input_search" condition="f_operator like '%{}%'" placeholder='操作人' style="width:60%"
                      type="text"
                      v-model="model.f_operator">
            </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;" v-show='!$parent.$parent.$parent.$parent.isdetail'>表号</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>卡号</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>电话</th>
            <th style="text-align: center;">地址</th>
            <th style="text-align: center;">片区</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>安检日期</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>限购日期</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>操作人</th>
            <th style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>限购原因</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_type}}</td>
          <td style="text-align: center;">{{row.f_user_name}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_meternumber}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_card_id}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_user_phone}}</td>
          <td style="text-align: center;">{{row.f_address}}</td>
          <td style="text-align: center;">{{row.f_zones}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_last_check_date}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_parameter_value}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_operator}}</td>
          <td style="text-align: center;" v-show='!$parent.$parent.$parent.$parent.isdetail'>{{row.f_comments}}</td>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="selectShow" title="选择用户" v-ref:modal width="70%" backdrop="false">
      <article slot="modal-body" class="modal-body">
        <black-user-select
          v-if="selectShow"
          @select-changed="selected"
        ></black-user-select>
      </article>
      <footer slot="modal-footer">
      </footer>
    </modal>
  </div>
</template>

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

export default {
  data () {
    return {
      initres: {
        org: [this.$login.f.orgid]
      },
      resshow: ['company', 'slicearea'],
      orgCondtionStr: '',
      criteriaShow: false,
      selectShow: false,
      blackImport: '',
      model: new PagedList('rs/sql/sale_getBlackList', 20),
      getfield: {
        'f_userinfo_code': '用户编号',
        'f_user_name': '姓名',
        'f_meternumber': '表号',
        'f_card_id': '卡号',
        'f_user_phone': '电话',
        'f_address': '地址',
        'f_last_check_date': '安检日期',
        'f_parameter_value': '限购日期',
        'f_comments': '限购原因',
        'f_zones': '片区',
        'f_user_type': '用户类型'
      }
    }
  },
  props: {
    style: {
      type: String,
      default: 'form-group col-sm-2'
    },
    row: {},
    ispartial: false
  },
  ready () {
    this.getAuthority()
    this.search()
  },
  methods: {
    selected (row) {
      console.log(row)
      this.selectShow = false
      this.$dispatch('select-changed', row)
    },
    getAuthority () {
      if (this.$login.r.find(value => value == '黑名单导入')) {
        this.blackImport = '黑名单导入'
      }
    },
    async getRes (condition, obj) {
      this.orgCondtionStr = condition
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    search () {
      this.$refs.paged.$refs.cri.search()
      this.$dispatch('search')
    },
    selfSearch (args) {
      args.condition = `${args.condition} ` + this.orgCondtionStr
      this.model.search(args.condition, args.model)
    },
    add () {
      if (!this.$login.r.find(value => value == '新增黑名单')) {
        this.$showMessage('你没有新增黑名单的权限,请联系管理员!')
        return
      }
      this.style = 'col-sm-3'
      // this.$dispatch('add')
      this.selectShow = true
      this.$parent.isdetail = false
    },
    dblclick (val) {
      console.log(val)
      this.$emit('dblclick', val)
    }

  },
  watch: {
    'model.rows.length' (val) {
      if (val === 1) {
        this.$refs.paged.$refs.grid.select(this.model.rows[0])
      }
    }
  },
  computed: {
    usertypes () {
      return [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')]
    },
    getCondition () {
      return {condition: `${this.$refs.paged.$refs.cri.condition}` + this.orgCondtionStr}
    }
  }
}
</script>
