<template>
  <el-dialog
    :title="$t('payFeeCoupon.title')"
    :visible.sync="dialogVisible"
    width="70%"
    @close="handleClose"
  >
    <el-card v-if="feeCoupons.length > 0">
      <div slot="header" class="clearfix">
        <span>{{ $t('payFeeCoupon.couponInfo') }}</span>
      </div>

      <el-table
        :data="feeCoupons"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="ruleName"
          align="center"
          :label="$t('payFeeCoupon.ruleName')"
        />
        <el-table-column
          prop="couponName"
          align="center"
          :label="$t('payFeeCoupon.couponName')"
        />
        <el-table-column
          prop="quantity"
          align="center"
          :label="$t('payFeeCoupon.quantity')"
        >
          <template slot-scope="scope">
            {{ scope.row.quantity }}{{ $t('payFeeCoupon.unit') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="toTypeName"
          align="center"
          :label="$t('payFeeCoupon.purpose')"
        />
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'PayFeeCoupon',
  data() {
    return {
      dialogVisible: false,
      feeCoupons: [],
      feeId: '',
      communityId: '',
      cycles: 1,
      endTime: ''
    }
  },
  methods: {
    open(params) {
      this.feeId = params.feeId
      this.cycles = params.cycles || 1
      this.endTime = params.endTime || ''
      this.listFeeCoupons()
      this.dialogVisible = true
    },
    close() {
      this.dialogVisible = false
    },
    async listFeeCoupons() {
      try {
        this.communityId = await getCommunityId()
        const params = {
          page: 1,
          row: 20,
          feeId: this.feeId,
          communityId: this.communityId,
          cycles: this.cycles,
          endTime: this.endTime
        }

        const response = await this.$http.get('/coupon.computePayFeeCoupon', { params })
        this.feeCoupons = response.data.data || []
      } catch (error) {
        console.error('查询优惠券信息失败:', error)
      }
    },
    handleClose() {
      this.feeCoupons = []
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
</style>