<template>
  <div id="ChargeGroupList">
    <div class="flex" @keyup.enter="search" :style="{height:(oweShow?'auto':'100%')}">
      <criteria-paged :model="model" v-ref:paged :pager="!oweShow">
        <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="$parent.$parent.style">
                <label class="font_normal_body">组织机构</label>
                <res-select restype='organization'
                            @res-select="$parent.$parent.getorg"
                            :is-mul="false"
                            :initresid='$parent.$parent.curorgid'>
                </res-select>
              </div>
              <div :class="$parent.$parent.style">
                <label class="font_normal_body">客戶编码</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_customer"
                       condition="f_customer like '%{}%'" placeholder="客戶编码"/>
              </div>
              <div :class="$parent.$parent.style" v-show="!$parent.$parent.listShow">
                <label class="font_normal_body">客戶名称</label>
                <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
                       condition="f_user_name = '{}'" placeholder="客戶名称"/>
              </div>

              <div class="col-sm-3 form-group button-range">
                <button class="button_search button_spacing" @click="search()">查询</button>
                <button class="button_new button_spacing" style="width: max-content;" @click="$parent.$parent.add()" v-if="!$parent.$parent.chargeToChoose">建档
                </button>
                <button class="button_clear button_spacing" @click="clear">清空</button>
                <div style="float: right" class="button_spacing"
                     :class="{'button_shrink_top': criteriaShow,'button_shrink_bottom': !criteriaShow}"
                     @click="criteriaShow = !criteriaShow"></div>
              </div>
              <div class="row" v-show="criteriaShow">
                <div :class="$parent.$parent.style" v-show="$parent.$parent.listShow">
                  <label class="font_normal_body">客戶名称</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_user_name"
                         condition="f_user_name = '{}'" placeholder="客戶名称"/>
                </div>
                <div :class="$parent.$parent.style">
                  <label class="font_normal_body">客戶地址</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_address"
                         condition="f_address like '%{}%'" placeholder="客戶地址"/>
                </div>
                <div :class="$parent.$parent.style">
                  <label class="font_normal_body">客户电话</label>
                  <input type="text" class="input_search" style="width:60%" v-model="model.f_user_phone"
                         condition="f_user_phone like '%{}%'" placeholder="客户电话"/>
                </div>
                <div :class="$parent.$parent.style">
                  <label class="font_normal_body">是否欠费</label>
                  <v-select v-model="model.oughtfee"
                            :search="fasle"
                            placeholder='是否欠费'
                            :value.sync="model.oughtfee"
                            :options='$parent.$parent.oughtfee'
                            condition="f_oughtfee_all {}"
                            close-on-select style="width: 60%"></v-select>
                </div>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid :model="model" partial='list' class="list_area table_sy" v-ref:grid v-if="!$parent.oweShow" @dblclick="$parent.showOwe">
          <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>
              <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">
                <nobr>{{ $index + 1 }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_customer }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_user_name }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_balance }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_user_type }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_address }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>{{ row.f_user_phone }}</nobr>
              </td>
              <td style="text-align:center" v-if="!$parent.$parent.$parent.chargeToChoose">
                <button @click.stop="$parent.$parent.$parent.operate(row)"
                        class="btn btn-link"><b>{{ row.sumuserfiles }}</b>
                </button>
              </td>
              <td style="text-align:center" v-else>
                <nobr>{{ row.sumuserfiles }}</nobr>
              </td>
              <td style="text-align:center" v-else>
                <nobr>{{ row.f_oughtfee_all }}</nobr>
              </td>
              <td style="text-align:center">
                <nobr>
                  <button type="button" name="button" class="btn btn-link"
                          @click.stop="$parent.$parent.$parent.print(row)">打印明细
                  </button>
                  <button type="button" name="button" class="btn btn-link"
                          @click.stop="$parent.$parent.$parent.export(row)">导出明细
                  </button>
                </nobr>
              </td>
            </tr>
          </template>
          <template partial='foot'></template>
        </data-grid>
      </criteria-paged>
      <print-data :sum-field="getfield" :model="printModel" :field="getfield" :printview="true"
                  :defaultfield="defaultfield" titletable="团体欠费明细报表" v-ref:printdata>
      </print-data>
    </div>

    <export-excel
      :isshow="false" :data="getCondition" :field="getfield" :choose-col="true" v-ref:excel
      sqlurl="rs/logic/saleExport" sql-name="batchOweQuery" template-name='团体欠费明细导出'>
    </export-excel>

    <owe-record-query v-if="oweShow" :row="row" :f_civill_id="f_civill_id"></owe-record-query>
  </div>
</template>

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

export default {
  data () {
    return {
      interval: null,
      searchTime: this.$appdata.getSingleValue('磁条卡读卡间隔') ? this.$appdata.getSingleValue('磁条卡读卡间隔') : 2,
      oughtfee: [{label: '全部', value: ''}, {label: '是', value: '> 0'}, {label: '否', value: '<= 0'}],
      model: new PagedList('rs/sql/ncarchivesQuery', 20),
      // 公司下拉
      curorgid: [this.$login.f.orgid],
      f_orgid: '',
      f_civill_id: null,
      oweShow: false,
      getCondition: null,
      getfield: null,
      config: {
        // 导出列
        excelHeaders: {
          'f_userinfo_code': '客户编号',
          'f_user_name': '客户姓名',
          'f_meter_classify': '气表类型',
          'c': '欠费期数',
          'f_hand_date': '欠费区间',
          'f_last_tablebase': '上期底数',
          'f_tablebase': '本期底数',
          'f_oughtamount': '用气量',
          'f_oughtfee': '用气金额',
          'f_debt_money': '已交金额',
          'f_oughtfee_new': '应交气费',
          'overdue': '违约金',
          'f_oughtfee_all': '合计欠费'
        }
      },
      defaultfield: [],
      printModel: new PagedList('rs/sql/batchOweQuery', 20),
      row: null
    }
  },
  title: '档案查询',
  props: {
    f_filialeids: {
      type: String
    },
    style: {
      type: String,
      default: 'col-sm-3 form-group'
    },
    // 控制在修改数据时显示少的查询条件,剩余隐藏
    listShow: {
      type: Boolean,
      default: false
    },
    // 收费时的展示控制
    chargeToChoose: {
      type: Boolean,
      default: false
    }
  },
  ready () {
    this.getfield = this.config.excelHeaders
    this.search()
    this.readCiTiaoCard()
  },
  destroyed () {
    clearInterval(this.interval)
  },
  watch: {
    'oweShow' (val) {
      if (val) {
        clearInterval(this.interval)
      } else {
        this.readCiTiaoCard()
      }
    }
  },
  methods: {
    async readCiTiaoCard () {
      console.log('读磁条卡，开始，不停的循环')
      let data = {}
      let getUser = {data: []}
      let forgid = this.$login.convertToIn([this.$login.f.orgid])
      try {
        // let res = {data:{Factory : 'CiTiao',CardID : '00000009'}}
        let http = new HttpResetClass()
        this.interval = setInterval(async () => {
          // 1秒一轮回
          http.load('POST', 'http://127.0.0.1:8003/ReadCard_HEC', data, {
            resolveMsg: null,
            rejectMsg: null
          }).then(async res => {
            if (res.data.CardID !== '') {
              if (res.data.Err === null && res.data.Exception) {
                this.$showAlert(res.data.Exception, 'danger', 2000)
                // clearInterval(interval)
              } else {
                if (res.data.Factory === 'CiTiao') {
                  // 获取用户信息
                  getUser = await this.$resetpost('rs/sql/ncarchivesQuery', {
                    data: {
                      condition: `f_orgid  in ${forgid} and f_card_id='${res.data.CardID}'`,
                      orderitem: `f_userinfo_id`
                    }
                  }, {resolveMsg: null, rejectMsg: '读卡失败'})
                  this.showOwe(getUser.data[0])
                  clearInterval(this.interval)
                }
              }
            }
          })
        }, this.searchTime * 1000)
      } catch (error) {
        console.log('捕获到异常', error)
        // this.$showAlert(error.data, 'danger', 2000)
      }
    },
    // 打印
    async print (row) {
      let condition = `p.f_civill_id = ${row.id}`
      await this.printModel.search(condition)
      this.$refs.printdata.printData()
    },
    // 导出
    export (row) {
      this.getCondition = {condition: `p.f_civill_id = ${row.id}`}
      this.$refs.excel.exportExcel()
    },
    showOwe (row) {
      if (this.chargeToChoose) {
        this.f_civill_id = row.id
        this.row = row
        this.oweShow = true
      }
    },
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    add () {
      if (this.f_filialeids) {
        this.$refs.paged.$refs.grid.selectStore.selected = null
        this.$dispatch('add')
      } else {
        this.$showAlert('请先选择左上角的所在分公司', 'warning', 2000)
      }
    },
    operate (val) {
      this.$dispatch('operate', val)
    },
    selfSearch (args) {
      if (!this.f_orgid) {
        this.getorg([this.$login.f.orgid])
      }
      args.condition = `${args.condition} and f_orgid in ${this.f_orgid}`
      this.oweShow = false
      this.model.search(args.condition, args.model)
      if (this.$refs.paged.$refs.grid) this.$refs.paged.$refs.grid.selectInit()
      this.$dispatch('newsearch')
    },
    getorg (val) {
      this.f_orgid = this.$login.convertToIn(val)
      this.f_filialeids = val[0]
    }
  }

}
</script>
<style lang="less">
  #ChargeGroupList {
    .button_export {
      display: none;
    }
  }
</style>
