<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 :style="$parent.$parent.style" :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getorg" 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 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>
              <button @click="$parent.$parent.add()" class="button_export button_spacing" style="width: max-content;"
                      v-el:cx>新增黑名单
              </button>
              <button @click="$parent.$parent.batchAdd()" 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>
              <button class="button_search button_spacing"
                      @click="$parent.$parent.modelShow()" v-el:cx>
                黑名单用户导入
              </button>
              <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">卡&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}">
              <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}">
              <label class="font_normal_body">小&emsp;&emsp;区</label>
              <input :size="model.f_residential_area ? model.f_residential_area.length * 2 : 4" class="input_search" condition="f_residential_area like '%{}%'" placeholder='小区' style="width:60%"
                     type="text"
                     v-model="model.f_residential_area">
            </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">片&emsp;&emsp;区</label>
              <input :size="model.f_slice_area ? model.f_slice_area.length * 2 : 4" class="input_search" condition="f_slice_area like '%{}%'" placeholder='片区' style="width:60%"
                     type="text"
                     v-model="model.f_slice_area">
            </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_date1"
                          :value.sync="model.f_last_check_date1"
                          :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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <datepicker placeholder="截止日期"
                          style="width:60%"
                          class="datepicker"
                          v-model="model.f_last_check_date2"
                          :value.sync="model.f_last_check_date2"
                          :format="'yyyy-MM-dd'"
                          condition="f_last_check_date <= '{} 00:00:00'"
              ></datepicker>
            </div>
            <div class="form-group" v-show="$parent.$parent.isBlack[0] !== '否'" :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">是否黑名单</label>
              <v-select v-model="$parent.$parent.isBlack"
                        :options="$parent.$parent.isBlackSelect"
                        @change="$parent.$parent.isBlackChange"
                        :value.sync="$parent.$parent.isBlack"
                        close-on-select></v-select>
            </div>
          </div>

        </div>
      </criteria>
      <data-grid :model="model" class="list_area table_sy" partial='list' select-mode="multi" :optional="true" 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;" 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;">地址</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_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_residential_area}}</td>
          <td style="text-align: center;">{{row.f_slice_area}}</td>
          <td style="text-align: center;">{{row.f_address}}</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_comments}}</td>
        </template>
        <template partial='foot'></template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="handleBlacklistUsersImport" backdrop="false" width="45%" title="黑名单用户导入" v-ref:modal>
      <article slot="modal-body" class="modal-body">
        <file-upload class="my-file-uploader col-sm-8" name="UploadFile" class="btn btn-success" style="border-radius: 2px;"
                     action="rs/file/uploadFile" tagname="确定" v-ref:file :accept="accept">
        </file-upload>
        <button class="button_clear btn-gn"
                @click="downloadFiles()" style="margin-top: 10px;background-color: #6aa6e2;">
          导入模板下载
        </button>
      </article>
      <footer slot="modal-footer" class="modal-footer" style="text-align: right;border: 0">
        <button class="btn button_search" @click="handleBlacklistUsersImportCancel()">取消</button>
      </footer>
    </modal>
  </div>
</template>

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

  export default {
    data() {
      return {
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        criteriaShow: false,
        model: new PagedList('rs/sql/sale_getBlackList', 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_last_check_date': '安检日期',
          'f_parameter_value': '限购日期',
          'f_comments': '限购原因'
        },
        isBlackSelect: [{label: '是', value: '是'}, {label: '否', value: '否'}],
        isBlack: ['是'],
        handleBlacklistUsersImport: false,
        accept: ".xlsx,.xls",
      }
    },
    props: {
      style: {
        type: String,
        default: 'form-group col-sm-2'
      },
      row: {},
      list: [],
      ispartial: false
    },
    ready() {
      this.search()
    },
    methods: {
      handleBlacklistUsersImportCancel() {
        this.handleBlacklistUsersImport = false
      },
      modelShow() {
        this.handleBlacklistUsersImport = true
      },
      downloadFiles() {
        let downurl = 'rs/downloadfile/file?filename=黑名单用户导入模板';
        this.$downFile(downurl,'黑名单用户导入模板.xlsx')
      },
      isBlackChange(val) {
        if (val != undefined) {
          if (val == '是') {
            this.model = new PagedList('rs/sql/sale_getBlackList', 20)
          } else {
            this.model = new PagedList('rs/sql/getNormalUsersFiles', 20)
          }
        } else {
          this.isBlack = ['是']
          this.model = new PagedList('rs/sql/sale_getBlackList', 20)
        }
      },
      async getRes(condition, obj) {
        console.log('condition =', condition)
        console.log('obj =', obj)

        // //更新抄表册
        // this.meterbooks = [{label: '全部',value: ''}];
        // if(this.lastorgstr != condition){
        //   this.tempfalg = true;
        //   this.lastorgstr = condition;
        // }
        // if(this.tempfalg && condition != null && condition!=''  && condition.indexOf("(")>-1){
        //   this.tempfalg = false;
        //   let a = condition.substring(condition.indexOf("(")+2)
        // }
        // this.orgCondtionStr = condition
      },
      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} and s.f_filialeid  in ${this.f_orgid}`
          args.condition = `${args.condition}  ${this.f_orgid} `
        }

        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')
      },
      batchAdd() {
        if (!this.$login.r.find(value => value == '新增黑名单')) {
          this.$showMessage('你没有新增黑名单的权限,请联系管理员!')
          return
        }
        let dataArr = this.$refs.paged.$refs.grid.getRowData();
        if (dataArr.length === 0) {
          this.$showMessage('请选择要添加的用户')
          return
        }
        this.list = dataArr
        console.log('批量添加。。。')
        this.$dispatch('batchAdd')
      },
      dblclick(val) {
        console.log(val)
        this.$emit('dblclick', val)
      },

      // batchAdd() {
      //   let dataArr = this.$refs.paged.$refs.grid.getRowData();
      //   console.log('批量添加黑名单。。。', dataArr)
      //   if (dataArr.length === 0) {
      //     this.$showMessage('请选择要添加的用户')
      //     return
      //   }
      //   this.$dispatch('batchAdd')
      // let data = dataArr.map((value)=>{
      //   return {
      //     f_operat_type: '新增',
      //     f_state: '有效',
      //     f_user_id: value.f_user_id,
      //     f_user_name: value.f_user_name,
      //     f_comments: value.f_comments,
      //     f_operator: this.$login.f.name,
      //     f_operatorid: this.$login.f.id,
      //     f_orgid: this.$login.f.orgid,
      //     f_orgname: this.$login.f.orgs,
      //     f_depid: this.$login.f.depids,
      //     f_depname: this.$login.f.deps,
      //     f_operate_date: this.$login.toStandardTimeString(),
      //     f_describe: `${this.$login.f.name}在${this.$login.toStandardTimeString()}新增黑名单用户${value.f_user_name}`
      //     //     f_userinfo_id: {
      //     //       f_userinfo_id: this.value.f_userinfo_id,
      //     //       f_user_state: '正常',
      //     //       version: this.value.version
      //     //     },
      //     //     f_limit_times: 1,
      //     //     f_limit_amount: 3,
      //     //     f_limit_value: 3,
      //   }
      // })
      // // 遍历data
      // data.forEach((value, key, map) => {
      //   this.$resetpost('rs/logic/backlistOperate', data, {resolveMsg: `批量拉黑成功`, rejectMsg: `批量拉黑失败，请重试`})
      // })
    },

    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}
      },
    },
    events: {
      onFileUpload: function (file, res) {
        let data = {
          filepath: res.f_downloadpath,
          f_operat_type: '拉黑',
          f_state: '有效',
          f_operator: this.$login.f.name,
          f_operatorid: this.$login.f.id,
          f_orgid: this.$login.f.orgid,
          f_orgname: this.$login.f.orgs,
          f_depid: this.$login.f.depids,
          f_depname: this.$login.f.deps,
          f_operate_date: this.$login.toStandardTimeString()
        }
        this.$resetpost('rs/FuGuBlackListUsers/importExcel', data, {resolveMsg: null, rejectMsg: '导入失败'})
          .then((res) => {
            if (res.data.code === 200) {
              this.$showAlert(res.data.msg, 'info', 3000)
              this.search()
            } else {
              this.$showAlert(res.data.msg, 'warning', 3000)
            }
            this.handleBlacklistUsersImport = false
          })
      }
    }
  }
</script>
