<template>
  <div @keyup.enter="search" :style="{height:(!criteriaShow?'auto':'100%')}">
    <criteria-paged :model="model" v-ref:paged :pager="isPager">
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div>
            <div class="form-group col-sm-4">
              <label class="font_normal_body">客户编号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code"
                     placeholder='客户编号'
                     condition="f_userinfo_code = '{}'" @keyup.enter="search(), $parent.$parent.clean()">
            </div>
            <div class="form-group col-sm-4">
              <label class="font_normal_body">客户名称</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name" placeholder='客户名称'
                     @keyup.enter="search(), $parent.$parent.clean()" condition="f_user_name = '{}'">
            </div>
            <!--<div class="row" >-->
            <div v-show="$parent.$parent.criteriaShow">
              <!--<div class="form-group col-sm-4"  v-if="$parent.$parent.clientWidth<1600">-->
              <!--<label class="font_normal_body">客户名称</label>-->
              <!--<input type="text" class="input_search" style="width:60%"  v-model="model.f_user_name" placeholder='客户名称'-->
              <!--@keyup.enter="search(), $parent.$parent.clean()" condition="f_user_name = '{}'">-->
              <!--</div>-->
              <div class="form-group col-sm-4">
                <label class="font_normal_body">旧客户号</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_olduserinfo_code"
                       placeholder='客户编号'
                       condition="f_olduserinfo_code = '{}'">
              </div>

              <div class="form-group col-sm-4">
                <label class="font_normal_body">电&emsp;&emsp;话</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_user_phone" placeholder='电话'
                       condition="f_user_phone like '%{}%'">
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">客户地址</label>
                <input type="text" class="input_search" style="width:60%" style="width:60%" v-model="model.f_address"
                       placeholder='客户地址'
                       condition="address.f_address like '%{}%'">
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">表&emsp;&emsp;号</label>
                <input type="text" class="input_search" style="width:60%" style="width:60%"
                       v-model="model.f_meternumber" placeholder='表号'
                       condition="f_meternumber like '%{}%'">
              </div>

              <!--<div class="form-group col-sm-4">-->
              <!--<label class="font_normal_body">档案状态</label>-->
              <!--<v-select v-model="model.f_file_state"-->
              <!--placeholder='档案状态'-->
              <!--:value.sync="model.f_file_state"-->
              <!--:options='$parent.$parent.fileStates'-->
              <!--condition="u.f_table_state = '{}'"-->
              <!--style="width: 60%"-->
              <!--close-on-select></v-select>-->
              <!--</div>-->

              <div class="form-group col-sm-4">
                <label class="font_normal_body">气表状态</label>
                <v-select id="f_paytype"
                          v-model="model.f_table_state"
                          placeholder='气表状态'
                          :value.sync="model.f_table_state"
                          :options='$parent.$parent.tableStates'
                          condition="f_table_state = '{}'"
                          style="width: 60%" value-single
                          close-on-select></v-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">气表类型</label>
                <v-select v-model="model.f_meter_classify"
                          placeholder='气表品牌'
                          :value.sync="model.f_meter_classify"
                          :options='$parent.$parent.meter_classify'
                          condition="f_meter_type = '{}'" value-single
                          close-on-select style="width: 60%"></v-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">气表品牌</label>
                <v-select id="f_meter_brand"
                          v-model="model.f_meter_brand"
                          placeholder='气表品牌'
                          :value.sync="model.f_meter_brand"
                          :options='$parent.$parent.meterbrand'
                          condition="f_meter_brand = '{}'"
                          close-on-select style="width: 60%"></v-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">用气性质</label>
                <v-select v-model="model.f_gasproperties"
                          placeholder='用气性质'
                          :value.sync="model.f_gasproperties"
                          :options='$parent.$parent.gasproperties'
                          condition="u.f_gasproperties = '{}'"
                          close-on-select style="width: 60%"></v-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">用户等级</label>
                <v-select v-model="model.f_user_level"
                          placeholder='用户等级'
                          :value.sync="model.f_user_level"
                          :options='$parent.$parent.userlevel'
                          condition="i.f_user_level = '{}'"
                          close-on-select style="width: 60%"></v-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">卡&emsp;&emsp;号</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_card_id" placeholder='卡号'
                       condition="f_card_id like '%{}%'">
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">组织机构</label>
                <res-select :initresid='$parent.$parent.curorgid'
                            @res-select="$parent.$parent.getorg"
                            class="select select_list"
                            restype='organization'
                            style="width: 60%">
                </res-select>
              </div>
              <div class="form-group col-sm-4">
                <label class="font_normal_body">使用类型</label>
                <v-select v-model="model.f_usetype"
                          placeholder='使用类型'
                          :value.sync="model.f_usetype"
                          :options='$parent.$parent.usetype'
                          condition="u.f_usetype = '{}'"
                          close-on-select style="width: 60%"></v-select>
              </div>
            </div>
          </div>
          <div class="form-group button-range col-sm-4" style="white-space: nowrap;">
<!--            <button class="button_new button_spacing" v-show="$parent.$parent.criteriaShow" @click="$parent.$parent.showGroupModal()">团体收费</button>-->
<!--            <button class="button_new button_spacing" v-show="$parent.$parent.criteriaShow" @click="$parent.$parent.showSelectData()">批量收费</button>-->
            <button class="button_search button_spacing" @click="search(), $parent.$parent.clean()">查询</button>
            <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid v-if="$parent.criteriaShow" optional @dblclick="$parent.showSelectData()">
        <template partial='head'>
          <th style="white-space: nowrap;">序号</th>
          <th style="white-space: nowrap;">客户编号</th>
          <th style="white-space: nowrap;">客户基本信息</th>
          <th style="white-space: nowrap;">表具信息</th>
          <th style="white-space: nowrap;">分类信息</th>
        </template>
        <template partial='body'>
          <td style="white-space: nowrap;text-align: center">{{ $index + 1 }}</td>
          <td style="white-space: nowrap;text-align: center"><span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{ row.f_userinfo_code }}</a></span></td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_user_name }}&nbsp;&nbsp;{{ row.f_user_phone }}&nbsp;&nbsp;{{ row.f_address }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_user_id }}&nbsp;&nbsp;{{row.f_gasproperties}}&nbsp;&nbsp;{{ row.f_meter_brand }}&nbsp;&nbsp;{{ row.f_meter_style }}&nbsp;&nbsp;{{ row.f_price_type }}&nbsp;&nbsp;{{ row.f_price_name }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_meter_type }}&nbsp;&nbsp;({{row.f_meter_type.includes('物联网表') ? row.f_table_state : row.f_whether_hairpin }})</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>

  <owe-record-query v-if="!criteriaShow" :searchdata="selectData" :f_civill_id="f_civill_id" @dblclick="recordClick()"></owe-record-query>

  <modal :show.sync="showBatch" v-ref:showbatch :backdrop="false" width="80%">
    <header slot="modal-header" class="modal-header text-center">
      <h4 class="modal-title">选中的用户</h4>
    </header>
    <article slot="modal-body" class="modal-body" style="height: 700px">
      <data-grid :model="selectDataArr" partial='list' class="list_area table_sy">
        <template partial='head'>
          <th style="white-space: nowrap;">序号</th>
          <th style="white-space: nowrap;">客户编号</th>
          <th style="white-space: nowrap;">客户基本信息</th>
          <th style="white-space: nowrap;">表具信息</th>
          <th style="white-space: nowrap;">分类信息</th>
          <th style="white-space: nowrap;">操作</th>
        </template>
        <template partial='body'>
          <td style="white-space: nowrap;text-align: center">{{ $index + 1 }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_userinfo_code }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_user_name }}&nbsp;&nbsp;{{ row.f_user_phone }}&nbsp;&nbsp;{{ row.f_address }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_user_id }}&nbsp;&nbsp;{{row.f_gasproperties}}&nbsp;&nbsp;{{ row.f_meter_brand }}&nbsp;&nbsp;{{ row.f_meter_style }}&nbsp;&nbsp;{{ row.f_price_type }}&nbsp;&nbsp;{{ row.f_price_name }}</td>
          <td style="white-space: nowrap;text-align: center">{{ row.f_meter_type }}&nbsp;&nbsp;({{row.f_meter_type.includes('物联网表') ? row.f_table_state : row.f_whether_hairpin }})</td>
          <td style="white-space: nowrap;text-align: center">
            <button @click.stop="$parent.$parent.$parent.selectDataRemove(row)"
                    class="btn btn-link"><b>移除</b>
            </button>
          </td>
        </template>
      </data-grid>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="button_search button_spacing" @click='determinePayment()' :disabled="selectDataArr.rows.length == 0">确定</button>
      <button type="button" class="button_clear button_spacing" @click='showBatch = !showBatch'>取消</button>
    </footer>
  </modal>

  <modal :show.sync="showGroup" v-ref:showgroup :backdrop="false" width="80%">
    <header slot="modal-header" class="modal-header text-center">
      <h4 class="modal-title">请选择团缴用户</h4>
    </header>
    <article slot="modal-body" class="modal-body" style="height: 700px">
      <archives-list v-ref:archiveslist charge-to-choose v-if="showGroup"></archives-list>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="button_search button_spacing" @click='determinePayment(true)'>确定</button>
      <button type="button" class="button_clear button_spacing" @click='showGroup = !showGroup'>取消</button>
    </footer>
  </modal>
</template>

<script>
/**
 *用户档案查询列表以及添加操作组件
 */
import {PagedList} from 'vue-client'

let asyncReadyGen = async function (self) {
  // 获取营收参数
  await self.$LoadParams.loadParam()
  await self.initQueryParam()
  self.search()
}

export default {
  title: '收费',
  data () {
    return {
      // 选择的团缴用户id
      f_civill_id: null,
      // 批量缴费选中数据Map
      selectData: new Map(),
      // 批量缴费选中数据数组
      selectDataArr: {rows: []},
      showBatch: false,
      showGroup: false,
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      f_orgid: '',
      showCardError2: false,
      model: new PagedList('rs/sql/sale_getUser', 30, {orderitem: '"' + this.orderitem + ' DESC"'}),
      isPager: true,
      rows: null,
      cardInfo: '',
      excelCondition: '',
      cardModal_show: false,
      bulkType: null, // 批量操作标识
      contract: [{label: '全部', value: ''},
        {label: '有', value: 'not null'},
        {label: '无', value: 'null'}],
      orderFields: {
        f_userinfo_id: 'no'
      },
      filiale: '',
      outlet: '',
      fields: {
        'f_userinfo_code': '用户编号',
        'f_user_name': '用户姓名',
        'f_user_phone': '用户电话',
        'f_address': '用户地址',
        'f_credentials': '证件类型',
        'f_idnumber': '证件号码',
        'f_user_id': '表编号',
        'f_gasproperties': '用气性质',
        'f_meter_brand': '气表品牌',
        'f_meter_style': '气表型号',
        'f_price_type': '气价类型',
        'f_price_name': '气价名称',
        'fenleixinxi': '分类信息'
      },
      filialeName: [],
      outletsname: [],
      filialetype: '',
      jurisdiction: this.$login.r,
      tableStates: [{label: '正常', value: '正常'}],

      fileStates: this.$appdata.getParam('档案状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('档案状态')] : [],

      // userTypes: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
      gasproperties: this.$appdata.getParam('用气性质') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用气性质')] : [],
      meter_classify: [{label: '机表', value: '机表'}],
      meterbrand: [],
      userlevel: this.$appdata.getParam('用户等级') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户等级')] : [],
      usetype: this.$appdata.getParam('使用类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('使用类型')] : [],
      criteriaShow: true,

      // 读卡是否需要额外参数
      readCardNeedParam: false,
      readCardParam: {},
      systemTimes: '',
      userCode: '',
      userName: '',
      userAddress: '',

      // 当列表是一户的时候直接读卡，跳过判卡
      isSingleUser: null,

      // 默认不查询
      specialCondition: false,

      // 卡信息弹出框
      showCardInfo: false,

      // 流水记录显示
      recordModel: {rows: []},
      clientWidth: document.body.clientWidth,
      showCardError: false
    }
  },
  props: {
    orderitem: {
      type: String,
      default: 'f_userinfo_id desc'
    },
    defbtn: {
      type: String
    },
    noRead: {
      type: Boolean,
      default: false
    },
    row: {}
  },
  ready () {
    this.defaultCondition()
    asyncReadyGen(this)
  },
  methods: {
    // 显示团体缴费弹窗
    showGroupModal () {
      this.showGroup = true
    },
    // 确定批量缴费
    determinePayment (flag) {
      // 是团体缴费
      if (flag) {
        let rowData = this.$refs.archiveslist.$refs.paged.$refs.grid.getRowData()
        console.log(rowData)
        if (rowData.length != 1) {
          this.$showMessage('请选择一个团缴用户进行团体缴费!')
          return
        }
        this.f_civill_id = rowData[0].id
      }
      this.showGroup = false
      this.showBatch = false
      this.criteriaShow = false
      this.isPager = false
    },
    // 移除选中的全部用户
    selectDataRemoveAll () {
      this.selectData.clear()
      this.selectDataArr = {rows: []}
      this.f_civill_id = null
    },
    // 移除选中的用户
    selectDataRemove (row) {
      this.selectData.delete(row.f_userfiles_id)
      this.selectDataArr = {rows: []}
      for (let row of this.selectData.values()) {
        this.selectDataArr.rows.push(row)
      }
    },
    // 显示选中用户modal弹窗
    showSelectData () {
      this.getSelectData()
      this.showBatch = true
    },
    // 选中数据生成map和array
    getSelectData () {
      let rowData = this.$refs.paged.$refs.grid.getRowData()
      for (let row of rowData) {
        this.selectData.set(row.f_userfiles_id, row)
      }
      this.selectDataArr = {rows: []}
      for (let row of this.selectData.values()) {
        this.selectDataArr.rows.push(row)
      }
      this.$refs.paged.$refs.grid.selectInit()
    },
    // 默认查询条件
    defaultCondition () {
      this.$refs.paged.$refs.cri.model.f_table_state = '正常'
      this.$refs.paged.$refs.cri.model.f_meter_classify = '机表'
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.$parent.f_orgid = this.f_orgid
    },
    recordClick () {
      // DoNothing, 消除流水界面出发的双击事件
    },
    hidden () {
      this.criteriaShow = !this.criteriaShow
    },
    clear () {
      Object.keys(this.$refs.paged.$refs.cri.model).forEach((key) => {
        this.$refs.paged.$refs.cri.model[key] = ''
      })
      this.defaultCondition()
    },
    initQueryParam () {
      let arr = []
      this.$GetSaleParam.getGasbrand().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_meter_brand
        arr.push(temp)
      })
      this.meterbrand = [{label: '全部', value: ''}, ...arr]
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    clean () {
      this.cardInfo = ''
      // 清除批量操作
      // this.$refs.paged.$refs.grid.select(null)
      this.row = null
      this.$dispatch('clean')
    },
    async selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      if (this.f_orgid) {
        args.condition = `(u.f_civill_id is null or u.f_civill_id = '') and u.f_filialeid in ${this.f_orgid} and ${args.condition}`
      }
      this.excelCondition = args.condition
      args.condition = `${args.condition}`
      if (this.defbtn === '发卡售气') {
        args.condition = `${args.condition} and f_whether_hairpin = '未发' and f_meter_classify like '%卡表%'`
      }
      if (!this.criteriaShow) {
        this.selectDataRemoveAll()
      }
      this.isPager = true
      this.criteriaShow = true
      this.cardInfo = ''
      if (!this.specialCondition) {
        if (args.condition.includes('1!=1')) {
          args.condition = args.condition.replace('1!=1', '1=1')
        }
      }
      this.specialCondition = false
      await this.model.search(args.condition, args.model)
      this.getSelectData()
    },
    dealmsg (val) {
      this.$dispatch('deal-msg', val)
    }
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style>

</style>
