<template style="position: absolute;">
  <div >
    <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>
          <card-info-modal :show.sync="$parent.$parent.cardModal_show" :cardinfo="$parent.$parent.cardInfo"
                           v-ref:cardinfo></card-info-modal>
          <div class="row">
          <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()">
          </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()" condition="f_user_name like '%{}%'">
          </div>

            <div style="float:right">
              <read-card :read-card-param="$parent.$parent.readCardParam" @read-info="$parent.$parent.cardBtn" v-if="!$parent.$parent.noRead" v-ref:readcard></read-card>
              <button class="button_search" @click="search(), $parent.$parent.clean()" v-el:cx>查询</button>
              <button class="button_clear" @click="$parent.$parent.clear()">清空</button>
              <div style="float: right"  class="button_spacing" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"    @click="$parent.$parent.hidden()"></div>
            </div>
          </div>
            <div class="row" v-show="$parent.$parent.criteriaShow">
              <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">&nbsp;&nbsp;&nbsp;电话&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;表号&nbsp;&nbsp;&nbsp;</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 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%"
                        close-on-select></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_user_type"
                          placeholder='客户类型'
                          :value.sync="model.f_user_type"
                          :options='$parent.$parent.userTypes'
                          @change="$parent.$parent.userTypeChange"
                          condition="u.f_user_type = '{}'"
                          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">&nbsp;&nbsp;&nbsp;卡号&nbsp;&nbsp;&nbsp;</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_card_id" placeholder='卡号'
                       condition="f_card_id like '%{}%'">
              </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model"   partial='list' class="list_area table_sy" v-ref:grid v-if="!$parent.row">
        <template partial='head' >
          <tr>
            <th style="white-space: nowrap;" >序号</th>
            <!--<th>-->
              <!--<data-order field="f_userinfo_code" name="客户编号"-->
                          <!--:order.sync="$parent.$parent.$parent.orderFields.f_userinfo_code"></data-order>-->
            <!--</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>
          </tr>
        </template>
        <template partial='body'>
          <td  :class="{'bg-danger' : row.f_table_state === '停用' }" style="text-align: center;">{{$index + 1}}</td>
          <td  :class="{'bg-danger' : row.f_table_state === '停用' }"><nobr>
            <span @click="$parent.$parent.$parent.dealmsg(row)"><a>{{row.f_userinfo_code}}</a></span>
          </nobr> </td>
          <td style="white-space: nowrap;" :class="{'bg-danger' : row.f_table_state === '停用' }">{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone}}&nbsp;&nbsp;{{row.f_address}}</td>
          <td style="white-space: nowrap;" :class="{'bg-danger' : row.f_table_state === '停用' }">{{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;" :class="{'bg-danger' : row.f_table_state === '停用' }" style="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>
      <!--<meter-charge-record-query partial='list' v-if="$parent.row"  :searchdata="$parent.row"></meter-charge-record-query>-->
      <!--<data-grid :model="recordModel" class="list_area table_sy" partial='list' v-if="$parent.row"  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>-->
          <!--</tr>-->
        <!--</template>-->
        <!--<template partial='body' >-->
          <!--<tr >-->
            <!--<td style="text-align:center">{{row.fee}}</td>-->
            <!--<td style="text-align:center">{{row.gas}}</td>-->
            <!--<td style="text-align:center">{{row.type}}</td>-->
            <!--<td style="text-align:center">{{row.f_operator}}</td>-->
            <!--<td style="text-align:center">{{row.f_operate_date}}</td>-->
            <!--<td style="text-align:center">{{row.note}}</td>-->
          <!--</tr>-->
        <!--</template>-->
      <!--</data-grid>-->
    </criteria-paged>
  </div>
  <div class="basic-main flex" :model="model" v-if="row"  style="height: 250px;background:#E6E6FA;">
    <meter-charge-record-query  :searchdata="row" @dblclick="recordClick()"></meter-charge-record-query>
  </div>
</template>

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

  let cardBtnGen = async function (self, val) {
    self.cardInfo = val.data

    // 判断读卡是否需要卡密码
    console.log('读卡上的信息', self.cardInfo)
    if (self.cardInfo.NewParam) {
      if (self.cardInfo.NewParam.error) {
        if (self.cardInfo.NewParam.error === '0001') {
          // 需要重新读卡并传卡密码
          if (self.model.rows.length == 1 && self.model.rows[0].f_alias === self.cardInfo.Factory) {
            self.readCardParam = self.model.rows[0].f_card_password
            self.cardInfo = await self.$refs.paged.$refs.cri.$refs.readcard.readCard2(self.model.rows[0].f_card_password)
          } else {
            self.$showAlert('此卡需要先获取客户信息。请通过条件查询该客户信息之后进行读卡！！', 'warning', 2000)
            return
          }
        }
      }
    }

    if (val.data.CardID && val.data.Factory) {
      // 获取未写卡或者写卡失败记录
      let getUnWriteSell = await self.$SqlService.singleTable('t_sellinggas', `f_state = '有效' and f_write_card != '已写卡' and f_card_id = '${val.data.CardID}' and f_orgid = '${self.$login.f.orgid}'`)
      console.log('获取未写卡记录', getUnWriteSell)
      if (getUnWriteSell.data.length > 1) {
        self.$showAlert('此卡已缴费多次未写卡。请核实后处理！！', 'warning', 5000)
      }
      // 获取用户信息
      let getUser = await self.$resetpost('rs/sql/sale_getUser', {
        data: {
          condition: `f_meter_type in ('气量卡表', '金额卡表') and u.f_card_id='${val.data.CardID}' and u.f_filialeid = '${self.$login.f.orgid}' and f_alias='${val.data.Factory}' and f_whether_hairpin != '未发'`,
          orderitem: `${self.orderitem} Desc`
        }
      }, {resolveMsg: '读卡成功', rejectMsg: '读卡失败'})
      if (getUser.data.length === 0) {
        self.model.state = '错误'
        self.model.rows = null
        self.model.error = '没有符合条件的记录'
        self.cardModal_show = true
      } else if (getUser.data.length === 1) {
        getUser.data[0].unWriteSell = getUnWriteSell.data
        self.model.rows = getUser.data
        self.$dispatch('dblclick', getUser.data[0], 0, val.data) //这里的0是角标位置（暂无用）
      } else if (getUser.data.length > 1) {
        self.model.rows = getUser.data
        self.model.pageIndex = 1
        self.model.state = '正确'
        self.$dispatch('clean')
        self.$showAlert('该卡号出现重复，请确认该客户信息之后执行清零换表功能！！', 'warning', 5000)
      }
    }
  }

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

  export default {
    title: '收费',
    data () {
      return {
        model: new PagedList('rs/sql/sale_getUser', 30, {orderitem: '"' + this.orderitem + ' DESC"'}),
        isPager: true,
        rows: null,
        cardInfo: '',
        cardModal_show: false,
        bulkType: null, // 批量操作标识
        contract: [{label: '全部', value: ''},
          {label: '有', value: 'not null'},
          {label: '无', value: 'null'}],
        orderFields: {
          f_userinfo_id: 'no'
        },
        filiale: '',
        outlet: '',
        filialeName: [],
        outletsname: [],
        filialetype: '',
        jurisdiction: this.$login.r,
        tableStates: this.$appdata.getParam('气表状态') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('气表状态')] : [],
        userTypes: this.$appdata.getParam('用户类型') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('用户类型')] : [],
        gasproperties: [],

        meterbrand: [],
        criteriaShow:false,

        readCardNeedParam: false,
        readCardParam: {},


        // 流水记录显示
        recordModel: {rows: []}
      }
    },
    props: {
      orderitem: {
        type: String,
        default: 'f_userinfo_id desc'
      },
      defbtn: {
        type: String
      },
      noRead: {
        type: Boolean,
        default: false
      },
      row: {}
    },
    ready () {
      asyncReadyGen(this)
    },
    methods: {

      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] = []
        })
      },
      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.detailShow = false
        this.$dispatch('clean')
      },

      // 判断是不是卡表
      isCard (str) {
        return (str.includes('卡表'))
      },

      async selfSearch (args) {
        args.condition = `${args.condition} and u.f_filialeid = '${this.$login.f.orgid}'`
        if (this.defbtn === '发卡售气') {
          args.condition = `${args.condition} and f_whether_hairpin = '未发' and f_meter_classify like '%卡表%'`
        }
        this.isPager = true
        this.detailShow = false
        this.criteriaShow = false
        this.cardInfo = ''
        await this.model.search(args.condition, args.model)
        // if (this.readCardNeedParam) {
        //   console.log('查询完毕了，看看model', this.model.rows.length )
        //   if (this.model.rows.length == 1) {
        //     this.readCardParam.f_card_password = this.model.rows[0].f_card_password
        //   }
        // }

      },
      cardBtn (val) {
        cardBtnGen(this, val)
      },
      dealmsg (val) {
        this.$dispatch('deal-msg', val)
      },
      refreshRow (row) {
        this.isPager = false
        // 滚动条置顶
        // this.$refs.paged.$refs.grid.$el.scrollTop = 0
        // this.model.rows = [row]
      },
      userTypeChange () {
        this.gasproperties = []
        if (this.$refs.paged.$refs.cri.model.f_user_type.length === 1) {
          if (this.$refs.paged.$refs.cri.model.f_user_type[0]) {
            this.gasproperties = this.$appdata.getParam(this.$refs.paged.$refs.cri.model.f_user_type[0])
          } else {
            this.$refs.paged.$refs.cri.model.f_gasproperties = ''
          }
        }
      }
    },
    watch: {}
  }
</script>
<style>

</style>
