<template>
  <el-card v-if="payFeeDepositInfo.fees.length > 0" class="deposit-card">
    <div slot="header" class="clearfix">
      <span>{{ $t('payFeeDeposit.title') }}</span>
      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeDeposit">
        <i class="el-icon-refresh"></i>
        {{ $t('common.refresh') }}
      </el-button>
    </div>

    <el-table :data="payFeeDepositInfo.fees" border style="width: 100%" v-loading="loading">
      <el-table-column prop="payerObjName" :label="$t('payFeeDeposit.payerObj')" align="center"></el-table-column>
      <el-table-column prop="feeName" :label="$t('payFeeDeposit.feeItem')" align="center"></el-table-column>
      <el-table-column :label="$t('payFeeDeposit.timePeriod')" align="center" width="220">
        <template slot-scope="scope">
          {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="receivedAmount" :label="$t('payFeeDeposit.amount')" align="center"></el-table-column>
      <el-table-column prop="createTime" :label="$t('payFeeDeposit.payTime')" align="center"
        width="180"></el-table-column>
      <el-table-column :label="$t('common.operation')" align="center" width="120">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="_openRefundDeposit(scope.row)">
            {{ $t('payFeeDeposit.refund') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <refund-deposit-fee ref="refundDepositFee"></refund-deposit-fee>
  </el-card>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import { queryFeeDeposit } from '@/api/fee/batchPayFeeOrderApi'
import RefundDepositFee from './refundDepositFee'

export default {
  name: 'PayFeeDeposit',
  components: {
    RefundDepositFee
  },
  data() {
    return {
      loading: false,
      payFeeDepositInfo: {
        fees: [],
        payerObjId: '',
        payerObjType: '',
        ownerId: '',
        communityId: ''
      }
    }
  },
  created() {
    this.payFeeDepositInfo.communityId = getCommunityId()
  },
  methods: {
    async _listFeeDeposit(page = 1, rows = 20) {
      this.loading = true
      try {
        const params = {
          page,
          row: rows,
          payerObjId: this.payFeeDepositInfo.payerObjId,
          ownerId: this.payFeeDepositInfo.ownerId,
          communityId: this.payFeeDepositInfo.communityId,
          state: '1400'
        }

        const res = await queryFeeDeposit(params)
        if (res.code === 0) {
          this.payFeeDepositInfo.fees = res.data || []
        }
      } catch (error) {
        console.error('请求失败:', error)
      } finally {
        this.loading = false
      }
    },

    _queryPayFeeDeposit() {
      this._listFeeDeposit()
    },

    _openRefundDeposit(fee) {
      this.$refs.refundDepositFee.open(fee)
    },

    open(params) {
      this.payFeeDepositInfo = {
        ...this.payFeeDepositInfo,
        ...params
      }
      this._listFeeDeposit()
    },

    refresh() {
      this._listFeeDeposit()
    }
  }
}
</script>

<style lang="scss" scoped>
.deposit-card {
  margin-bottom: 20px;
}
</style>