<template>
  <div class="basic-main flex">
    <div style="height: 400px;background:#E6E6FA;">
      <data-grid :model="owe" class="table_sy" partial='list' 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>
            <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;white-space:nowrap;">{{$index+1}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_userinfo_code}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_user_name}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_meter_classify}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.c}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_hand_date}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_last_tablebase}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_tablebase}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtamount}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_debt_money}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee_new}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.overdue}}</td>
            <td style="text-align:center;white-space:nowrap;">{{row.f_oughtfee_all}}</td>
          </tr>
        </template>
      </data-grid>
    </div>
  </div>
  <div class="auto" style="margin-top: 1%;">
    <div style="height: auto" class="select-overspread">
      <div class="form-inline" style="height: auto">
        <div class="form-group" v-for="btn in operBtns">
          <button :id="btn.name" type="button" style="color:black" :class="[($index === 0) ? 'btn btn-click' : 'btn btn-un-click']" @click="business(btn)" >
            <span style="color:black">{{btn.name}}</span>
          </button>
        </div>
      </div>
      <div v-show="chargeShow" style="height: auto" class="select-overspread">
        <route v-ref:route></route>
      </div>
    </div>
  </div>
</template>

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

  export default {
    title: '批量欠费查询',
    data () {
      return {
        owe: {rows: []},
        model: {f_collection: 0},
        civill: null,
        chargeShow: false,
        operBtns: [
          {name: '团体缴费', value: {routeName: 'batch-charge'}},
          {name: '余额退款', value: {routeName: 'group-refund'}},
          {name: '补费扣费', value: {routeName: 'group-fee-deduction'}},
          {name: '制磁条卡', value: {routeName: 'show-citiao_card'}}
        ]
      }
    },
    props: ['searchdata', 'f_civill_id', 'row'],
    ready () {
      this.getsalerecord()
    },
    methods: {
      async getsalerecord () {
        let http = new HttpResetClass()
        if (this.f_civill_id) {
          this.condition = `p.f_civill_id = ${this.f_civill_id}`
        } else {
          let userfiles = Array.from(this.searchdata.keys())
          this.condition = `p.f_userfiles_id in (${userfiles})`
        }
        let record = await http.load('POST', 'rs/logic/batchOwe', {data: {condition: this.condition, f_civill_id: this.f_civill_id}}, {rejectMsg: '欠费查询出错！！', resolveMsg: null})
        this.owe.rows = record.data.owe
        this.model = Object.assign(this.model, record.data.model)
        this.civill = record.data.civill
        this.business(this.operBtns[0])
      },
      business (btn) {
        // 处理按钮样式
        this.styleChange(btn.name)
        this.chargeShow = true
        this.$refs.route.init(btn.value.routeName, {row: this.row, data: this.model, owe: this.owe, civill: this.civill})
      },
      styleChange (name) {
        this.operBtns.forEach((res) => {
          if (res.name === name) {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = '#6aa6e2'
              document.getElementById(res.name).style.color = 'white'
            }
          } else {
            if (document.getElementById(res.name)) {
              document.getElementById(res.name).style.backgroundColor = 'white'
              document.getElementById(res.name).style.color = 'black'
            }
          }
        })
      }
    },
    watch: {
      'searchdata' () {
        this.getsalerecord()
      }
    }
  }
</script>
