<template>
  <el-tooltip effect="dark" content="查看详情" placement="top">
    <i class="el-icon-info hand" @click="open"></i>
  </el-tooltip>
</template>

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

export default {
  name: 'ViewFeeConfigData',
  data() {
    return {
      configId: '',
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
  },
  methods: {
    open(params) {
      this.configId = params.configId
      this._loadFeeConfigData()
    },
    async _loadFeeConfigData() {
      try {
        const res = await listFeeConfigs({
          page: 1,
          row: 1,
          communityId: this.communityId,
          configId: this.configId
        })
        
        if (res.data && res.data.length > 0) {
          const feeConfig = res.data[0]
          const configData = {
            "费用项ID": feeConfig.configId,
            "费用类型": feeConfig.feeTypeCdName,
            "收费项目": feeConfig.feeName,
            "费用标识": feeConfig.feeFlagName,
            "催缴类型": feeConfig.billTypeName,
            "付费类型": feeConfig.paymentCd === '1200' ? this.$t('viewFeeConfigData.prepaid') : this.$t('viewFeeConfigData.postpaid'),
            "缴费周期": feeConfig.paymentCycle,
            "计费起始时间": feeConfig.startTime,
            "计费终止时间": feeConfig.endTime,
            "公式": feeConfig.computingFormulaName,
            "计费单价": feeConfig.computingFormula === '2002' ? '-' : feeConfig.squarePrice,
            "附加/固定费用": feeConfig.additionalAmount
          }
          
          this.$emit('openViewDataModal', {
            title: `${feeConfig.feeName} ${this.$t('viewFeeConfigData.feeItem')}`,
            data: configData
          })
        }
      } catch (error) {
        console.error('加载费用配置数据失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.hand {
  cursor: pointer;
  color: #409EFF;
  margin-left: 5px;
}
</style>