<template>
  <el-card v-if="payFeeUserAccountInfo.accountList.length > 0" class="account-card">
    <div slot="header" class="flex justify-between">
      <span>{{ $t('payFeeUserAccount.title') }}</span>
      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeUserAccount">
        <i class="el-icon-refresh"></i>
        {{ $t('common.refresh') }}
      </el-button>
    </div>

    <el-table :data="payFeeUserAccountInfo.accountList" border style="width: 100%" v-loading="loading">
      <el-table-column width="55" align="center">
        <template slot-scope="scope">
          <el-radio v-model="payFeeUserAccountInfo.selectAccountIds" :label="scope.row.acctId"
            @change="_computeFeeUserAmount(scope.row)"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="acctTypeName" :label="$t('payFeeUserAccount.accountType')"
        align="center"></el-table-column>
      <el-table-column prop="acctName" :label="$t('payFeeUserAccount.accountName')" align="center"></el-table-column>
      <el-table-column :label="$t('payFeeUserAccount.accountAmount')" align="center">
        <template slot-scope="scope">
          {{ scope.row.amount }} {{ $t('payFeeUserAccount.yuan') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.operation')" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="_openAddUserAmountModal(scope.row)">
            <i class="el-icon-plus"></i>
            {{ $t('payFeeUserAccount.preSave') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

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

export default {
  name: 'PayFeeUserAccount',
  data() {
    return {
      loading: false,
      payFeeUserAccountInfo: {
        accountList: [],
        feeId: '',
        ownerId: '',
        communityId: '',
        quanAccount: false,
        selectAccountIds: [],
        integralAmount: '',
        cashAmount: '',
        couponAmount: ''
      }
    }
  },
  created() {
    this.payFeeUserAccountInfo.communityId = getCommunityId()
  },
  methods: {
    async _listUserAccount(page = 1, rows = 20) {
      this.loading = true
      try {
        const params = {
          page,
          row: rows,
          feeId: this.payFeeUserAccountInfo.feeId,
          ownerId: this.payFeeUserAccountInfo.ownerId,
          communityId: this.payFeeUserAccountInfo.communityId
        }

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

    _queryPayFeeUserAccount() {
      this._listUserAccount()
    },

    _openAddUserAmountModal(userAccount) {
      window.open(`/#/pages/owner/ownerDetail?ownerId=${userAccount.objId}&currentTab=ownerDetailAccount`)
    },

    _computeFeeUserAmount(acct) {
      let _totalUserAmount = 0.0
      let _selectAccount = []

      this.payFeeUserAccountInfo.accountList.forEach(item => {
        if (acct.acctId === item.acctId && item.amount != 0) {
          _totalUserAmount += parseFloat(item.amount)
          _selectAccount.push(item)
          this.payFeeUserAccountInfo.cashAmount = item.amount
        }
      })

      this.$emit('changeUserAmountPrice', {
        totalUserAmount: _totalUserAmount,
        accountList: this.payFeeUserAccountInfo.accountList,
        integralAmount: 0,
        cashAmount: this.payFeeUserAccountInfo.cashAmount,
        couponAmount: 0,
        selectAccount: _selectAccount
      })
    },

    open(params) {
      this.payFeeUserAccountInfo = {
        ...this.payFeeUserAccountInfo,
        ...params
      }
      this._listUserAccount()
    },

    refresh() {
      this._listUserAccount()
    },

    refreshAndChoose() {
      this.payFeeUserAccountInfo.accountList = []
      this.payFeeUserAccountInfo.selectAccountIds = []
      this._listUserAccount()
      setTimeout(() => {
        this.payFeeUserAccountInfo.accountList.forEach(item => {
          if (item.acctType === '2003') {
            this.payFeeUserAccountInfo.selectAccountIds.push(item.acctId)
          }
        })
      }, 2000)
    },

    clear() {
      this.payFeeUserAccountInfo.accountList = []
      this.payFeeUserAccountInfo.selectAccountIds = []
    }
  }
}
</script>

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