<template>
  <div>
    <el-table :data="feeDetailFeeRuleInfo.rules" border style="width: 100%">
      <el-table-column prop="ruleId" :label="$t('feeDetailFeeRule.ruleId')" align="center"></el-table-column>
      <el-table-column :label="$t('feeDetailFeeRule.feeItem')" align="center">
        <template slot-scope="scope">
          {{ scope.row.feeTypeCdName }}>{{ scope.row.feeName }}
        </template>
      </el-table-column>
      <el-table-column prop="feeFlagName" :label="$t('feeDetailFeeRule.feeFlag')" align="center"></el-table-column>
      <el-table-column prop="startTime" :label="$t('feeDetailFeeRule.createTime')" align="center"></el-table-column>
      <el-table-column :label="$t('feeDetailFeeRule.validPeriod')" align="center">
        <template slot-scope="scope">
          {{ scope.row.endTime }}~{{ scope.row.maxTime }}
        </template>
      </el-table-column>
      <el-table-column prop="computingFormulaName" :label="$t('feeDetailFeeRule.formula')" align="center"></el-table-column>
      <el-table-column :label="$t('feeDetailFeeRule.price')" align="center">
        <template slot-scope="scope">
          {{ scope.row.computingFormula === '2002' ? '-' : scope.row.squarePrice }}
        </template>
      </el-table-column>
      <el-table-column prop="additionalAmount" :label="$t('feeDetailFeeRule.additionalFee')" align="center"></el-table-column>
      <el-table-column :label="$t('feeDetailFeeRule.status')" align="center">
        <template slot-scope="scope">
          {{ scope.row.state === '2008001' ? $t('common.valid') : $t('common.invalid') }}
        </template>
      </el-table-column>
      <el-table-column prop="curYearMonth" :label="$t('feeDetailFeeRule.billDay')" align="center"></el-table-column>
      <el-table-column :label="$t('feeDetailFeeRule.billCycle')" align="center">
        <template>按月</template>
      </el-table-column>
      <el-table-column :label="$t('common.operation')" align="center" v-if="hasPrivilege">
        <template slot-scope="scope">
          <el-button
            v-if="hasPrivilege('502020090427190001')"
            type="text"
            size="small"
            @click="_updateFeeRule(scope.row)"
          >
            {{ $t('common.edit') }}
          </el-button>
          <el-button
            v-if="hasPrivilege('502021070488970005')"
            type="text"
            size="small"
            @click="_finishFeeRule(scope.row)"
          >
            {{ $t('common.manualFinish') }}
          </el-button>
          <el-button
            v-if="hasPrivilege('502020090604200029')"
            type="text"
            size="small"
            @click="_deleteFeeRule(scope.row)"
          >
            {{ $t('common.cancel') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <edit-fee-rule ref="editFeeRule" @success="loadData"></edit-fee-rule>
    <finish-fee-rule ref="finishFeeRule" @success="loadData"></finish-fee-rule>
    <delete-fee ref="deleteFee" @success="loadData"></delete-fee>
  </div>
</template>

<script>
import { listPayFeeRule } from '@/api/fee/feeDetailFeeRuleApi'
import EditFeeRule from './editFeeRule'
import FinishFeeRule from './finishFeeRule'
import DeleteFee from './deleteFee'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'FeeDetailFeeRule',
  components: {
    EditFeeRule,
    FinishFeeRule,
    DeleteFee
  },
  props: {
    feeId: {
      type: String,
      default: ''
    },
    roomId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      feeDetailFeeRuleInfo: {
        rules: [],
        feeId: '',
        roomId: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
  },
  methods: {
    async loadData() {
      const params = {
        communityId: getCommunityId(),
        feeId: this.feeDetailFeeRuleInfo.feeId,
        payerObjId: this.feeDetailFeeRuleInfo.roomId,
        detailId: '-1',
        page: this.currentPage,
        row: this.pageSize
      }

      try {
        const res = await listPayFeeRule(params)
        if (res.code === 0) {
          this.feeDetailFeeRuleInfo.rules = res.data
          this.total = res.total
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadData()
    },
    _deleteFeeRule(fee) {
      this.$refs.deleteFee.open(fee)
    },
    _updateFeeRule(fee) {
      this.$refs.editFeeRule.open(fee)
    },
    _finishFeeRule(fee) {
      this.$refs.finishFeeRule.open(fee)
    },
    open(params) {
      // 这个方法用于接收参数并初始化组件
      if (params.feeId) {
        this.feeDetailFeeRuleInfo.feeId = params.feeId
      }
      if (params.roomId) {
        this.feeDetailFeeRuleInfo.roomId = params.roomId
      }
      this.loadData()
    }
  },
  watch: {
    feeId(newVal) {
      this.feeDetailFeeRuleInfo.feeId = newVal
      this.loadData()
    },
    roomId(newVal) {
      this.feeDetailFeeRuleInfo.roomId = newVal
      this.loadData()
    }
  }
}
</script>