<template>
  <div>
    <el-row class="margin-top-lg">
      <el-col :span="2" >
        <el-select v-model="simplifyRoomFeeInfo.feeTypeCd" @change="changeSimplifyRoomFeeFeeTypeCd" size="small"
          :placeholder="$t('simplifyRoomFee.selectFeeType')">
          <template v-for="item in simplifyRoomFeeInfo.feeTypeCds">
            <el-option :key="item.statusCd" :label="item.name" :value="item.statusCd"
              v-if="item.statusCd != '888800010008'"></el-option>
          </template>
        </el-select>
      </el-col>
      <el-col :span="2" >
        <el-select v-model="simplifyRoomFeeInfo.configId" @change="changeSimplifyRoomConfigId" size="small"
          :placeholder="$t('simplifyRoomFee.selectFeeItem')">
          <el-option v-for="item in simplifyRoomFeeInfo.feeConfigs" :key="item.configId" :label="item.feeName"
            :value="item.configId"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" >
        <el-select v-model="simplifyRoomFeeInfo.state" @change="changeSimplifyRoomConfigId" size="small"
          :placeholder="$t('simplifyRoomFee.selectStatus')">
          <el-option :label="$t('simplifyRoomFee.valid')" value="2008001"></el-option>
          <el-option :label="$t('simplifyRoomFee.feeEnd')" value="2009001"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" >
        <el-select v-model="simplifyRoomFeeInfo.ownerFee" @change="changeSimplifyRoomConfigId" size="small">
          <el-option :label="$t('simplifyRoomFee.currentRoom')" value="N"></el-option>
          <el-option :label="$t('simplifyRoomFee.currentOwner')" value="Y"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" v-if="simplifyRoomFeeInfo.roomId && simplifyRoomFeeInfo.state == '2008001'">
        <el-select v-model="simplifyRoomFeeInfo.showFlag" @change="changeSimplifyRoomShowFlag" size="small">
          <el-option :label="$t('simplifyRoomFee.default')" value="DEFAULT"></el-option>
          <el-option :label="$t('simplifyRoomFee.monthly')" value="MONTH"></el-option>
        </el-select>
      </el-col>
      <el-col :span="2" v-else></el-col>
      <el-col :span="13" class="text-right">
        <el-button type="primary" size="small" v-if="hasPrivilege('502020082314267912')"
          @click="openBatchPayRoomFeeModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.batchPayment') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502022073007100003')"
          @click="openTempImportRoomFeeModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.tempFee') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502022073049300004')" @click="openProxyFeeModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.quantityPayment') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502022073042960005')"
          @click="openAddMeterWaterSimplifyModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.waterElectricity') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502022073006890006')"
          @click="openRoomCreateFeeComboModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.feePackage') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502022073096990007')"
          @click="openRoomCreateFeeAddModal">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.createFee') }}
        </el-button>
        <el-button type="primary" size="small" v-if="hasPrivilege('502020080570210194')" @click="toOwnerPayFee">
          <i class="el-icon-plus"></i>
          {{ $t('simplifyRoomFee.arrearsPayment') }}
        </el-button>
      </el-col>
    </el-row>

    <div class="margin-top" v-show="simplifyRoomFeeInfo.showFlag == 'DEFAULT'">
      <el-table :data="simplifyRoomFeeInfo.fees" style="width: 100%" border stripe>
        <el-table-column prop="feeName" :label="$t('simplifyRoomFee.feeItem')" align="center">
          <template slot-scope="scope">
            <span class="hand" @click="viewRoomFeeConfig(scope.row)">
              {{ scope.row.feeName }}{{ getSimplifyRoomFeeRoomName(scope.row) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="feeFlagName" :label="$t('simplifyRoomFee.feeFlag')" align="center"></el-table-column>
        <el-table-column prop="feeTypeCdName" :label="$t('simplifyRoomFee.feeType')" align="center"></el-table-column>
        <el-table-column prop="amountOwed" :label="$t('simplifyRoomFee.receivableAmount')"
          align="center"></el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.accountTime')" align="center">
          <template slot-scope="scope">
            {{ scope.row.startTime }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.receivablePeriod')" align="center">
          <template slot-scope="scope">
            {{ getEndTime(scope.row) }}~<br />{{ getDeadlineTime(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.description')" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.preDegrees') }}</span>{{ scope.row.preDegrees }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.curDegrees') }}</span>{{ scope.row.curDegrees }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ getOnePrice1(scope.row) }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390006') }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
              <span>{{ $t('simplifyRoomFee.algorithm') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390005') }}
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390003') }}
            </div>
            <div v-else>
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
            </div>
            <div v-if="scope.row.feeFlag == '1003006'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else>
              <span>{{ $t('simplifyRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stateName" :label="$t('simplifyRoomFee.status')" align="center"></el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.operation')" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
              @click="payFee(scope.row)">
              {{ $t('simplifyRoomFee.payment') }}
            </el-button>
            <el-button type="text" @click="payFeeHis(scope.row)">
              {{ $t('simplifyRoomFee.paymentHistory') }}
            </el-button>
            <el-dropdown
              v-if="hasPrivilege('502020090604200029') || hasPrivilege('502021070488970005') || hasPrivilege('502020090427190001')">
              <span class="el-dropdown-link">
                {{ $t('simplifyRoomFee.moreOperations') }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="hasPrivilege('502020090604200029')" @click.native="deleteFee(scope.row)">
                  {{ $t('simplifyRoomFee.cancelFee') }}
                </el-dropdown-item>
                <el-dropdown-item v-if="hasPrivilege('502021070488970005')" @click.native="finishFee(scope.row)">
                  {{ $t('simplifyRoomFee.manualEnd') }}
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
                  @click.native="editFee(scope.row)">
                  {{ $t('simplifyRoomFee.feeChange') }}
                </el-dropdown-item>
                <el-dropdown-item>
                  <a target="_blank" :href="'/#/views/fee/feeDetail?feeId=' + scope.row.feeId">
                    {{ $t('simplifyRoomFee.details') }}
                  </a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
        layout="total, prev, pager, next" :total="total" class="pagination text-right"></el-pagination>
    </div>

    <div class="margin-top" v-show="simplifyRoomFeeInfo.showFlag == 'MONTH'">
      <el-table :data="simplifyRoomFeeInfo.monthFees" style="width: 100%" border stripe>
        <el-table-column prop="feeName" :label="$t('simplifyRoomFee.feeItem')" align="center">
          <template slot-scope="scope">
            <span class="hand" @click="viewRoomFeeConfig(scope.row)">
              {{ scope.row.feeName }}{{ getSimplifyRoomFeeRoomName(scope.row) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="feeFlagName" :label="$t('simplifyRoomFee.feeFlag')" align="center"></el-table-column>
        <el-table-column prop="feeTypeCdName" :label="$t('simplifyRoomFee.feeType')" align="center"></el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.chargeYearMonth')" align="center">
          <template slot-scope="scope">
            {{ scope.row.detailYear }}-{{ scope.row.detailMonth }}
          </template>
        </el-table-column>
        <el-table-column prop="receivableAmount" :label="$t('simplifyRoomFee.receivableAmount')"
          align="center"></el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.description')" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.preDegrees') }}</span>{{ scope.row.preDegrees }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.curDegrees') }}</span>{{ scope.row.curDegrees }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ getOnePrice1(scope.row) }}
            </div>
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390006') }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
              <span>{{ $t('simplifyRoomFee.algorithm') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390005') }}
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
              <span>{{ $t('simplifyRoomFee.usage') }}</span>{{ getAttrValue(scope.row.feeAttrs, '390003') }}
            </div>
            <div v-else>
              <span>{{ $t('simplifyRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}
            </div>
            <div v-if="scope.row.feeFlag == '1003006'">
              <span>{{ $t('simplifyRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
            <div v-else>
              <span>{{ $t('simplifyRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('simplifyRoomFee.operation')" align="center">
          <template slot-scope="scope">
            <a target="_blank" :href="'/#/views/fee/feeDetail?feeId=' + scope.row.feeId">
              {{ $t('simplifyRoomFee.details') }}
            </a>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row>
      <el-col :span="12" class="text-left table-desc">
        <div>{{ $t('simplifyRoomFee.note1') }}</div>
        <div>{{ $t('simplifyRoomFee.note2') }}</div>
      </el-col>
      <el-col :span="6">
        <span>
          <span>{{ $t('simplifyRoomFee.arrearsSubtotal') }}</span>{{ simplifyRoomFeeInfo.totalAmount }}
        </span>
      </el-col>
    </el-row>
    <!-- Modal Components -->
    <delete-fee ref="deleteFee" @success="handleNotify"></delete-fee>
    <edit-fee ref="editFee" @success="handleNotify"></edit-fee>
    <temp-import-room-fee ref="tempImportRoomFee" @success="handleNotify"></temp-import-room-fee>
    <room-create-fee-add ref="roomCreateFeeAdd" @success="handleNotify"></room-create-fee-add>
    <add-meter-water ref="addMeterWater" @success="handleNotify"></add-meter-water>
    <add-proxy-fee ref="addProxyFee" @success="handleNotify"></add-proxy-fee>
    <finish-fee ref="finishFee" @success="handleNotify"></finish-fee>
  </div>
</template>

<script>
import { listFee, listFeeConfigs, listMonthFee } from '@/api/fee/simplifyRoomFeeApi'
import { getDict } from '@/api/community/communityApi'
import { getCommunityId } from '@/api/community/communityApi'
//import { listFeeConfigs } from '@/api/fee/feeConfigManageApi'
import TempImportRoomFee from './tempImportRoomFee'
import { dateFormat } from '@/utils/dateUtil'
import DeleteFee from '@/components/fee/deleteFee'
import EditFee from '@/components/fee/editFee'
import RoomCreateFeeAdd from '@/components/fee/roomCreateFeeAdd'
import AddMeterWater from '@/components/fee/addMeterWater'
import AddProxyFee from '@/components/fee/addProxyFee'
import FinishFee from '@/components/fee/finishFee'

export default {
  name: 'SimplifyRoomFee',
  components: {
    TempImportRoomFee,
    DeleteFee,
    EditFee,
    RoomCreateFeeAdd,
    AddMeterWater,
    AddProxyFee,
    FinishFee
  },
  data() {
    return {
      simplifyRoomFeeInfo: {
        total: 0,
        records: 1,
        fees: [],
        monthFees: [],
        roomId: '',
        roomName: '',
        name: '',
        floorNum: '',
        unitNum: '',
        roomNum: '',
        configId: '',
        feeTypeCds: [],
        feeTypeCd: '',
        state: '2008001',
        totalAmount: 0.0,
        roomType: '',
        ownerFee: 'N',
        ownerId: '',
        showFlag: 'DEFAULT',
        feeConfigs: []
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    filteredFeeTypeCds() {
      return this.simplifyRoomFeeInfo.feeTypeCds.filter(item => item.statusCd !== '888800010008')
    }
  },
  created() {
    this.communityId = getCommunityId()
    //this.loadDictData()
  },
  methods: {
    open(params) {
      this.handleSwitch(params)
    },
    handleSwitch(param) {
      this.clearSimplifyRoomFeeInfo()
      if (param.roomId === '') return

      Object.assign(this.simplifyRoomFeeInfo, param)
      this.listSimplifyRoomFee(1, this.pageSize)

      getDict('pay_fee_config', 'fee_type_cd').then(data => {
        this.simplifyRoomFeeInfo.feeTypeCds = data
      })
    },
    handleNotify() {
      this.listSimplifyRoomFee(this.currentPage, this.pageSize)
    },
    getOnePrice1(fee) {
      let price = fee.mwPrice
      if (!price) return fee.squarePrice
      if (parseFloat(price) > 0) return price
      return fee.squarePrice
    },
    async listSimplifyRoomFee(page, row) {
      const params = {
        page,
        row,
        communityId: getCommunityId(),
        payerObjId: this.simplifyRoomFeeInfo.roomId,
        payerObjType: '3333',
        configId: this.simplifyRoomFeeInfo.configId,
        state: this.simplifyRoomFeeInfo.state,
        feeTypeCd: this.simplifyRoomFeeInfo.feeTypeCd
      }

      if (this.simplifyRoomFeeInfo.ownerFee === 'Y') {
        params.payerObjId = ''
        params.ownerId = this.simplifyRoomFeeInfo.ownerId
      }

      try {
        const res = await listFee(params)
        this.simplifyRoomFeeInfo.total = res.total
        this.simplifyRoomFeeInfo.records = res.records
        let totalAmount = 0.0

        res.fees.forEach(item => {
          totalAmount += parseFloat(item.amountOwed)
        })

        this.simplifyRoomFeeInfo.totalAmount = totalAmount.toFixed(2)
        this.simplifyRoomFeeInfo.fees = res.fees.sort(this.roomFeeCompare)
        this.total = res.total
      } catch (error) {
        console.error('Failed to fetch fee list:', error)
      }
    },
    roomFeeCompare(a, b) {
      if (a.payerObjName < b.payerObjName) return -1
      if (a.payerObjName > b.payerObjName) return 1
      return 0
    },
    toOwnerPayFee() {
      this.$router.push({
        path: '/views/fee/owePayFeeOrder',
        query: {
          payObjId: this.simplifyRoomFeeInfo.roomId,
          payObjType: '3333',
          roomName: this.simplifyRoomFeeInfo.roomName
        }
      })
    },
    openRoomCreateFeeAddModal() {
      this.simplifyRoomFeeInfo.ownerName = this.simplifyRoomFeeInfo.name
      this.$refs.roomCreateFeeAdd.open({
        isMore: false,
        roomId: this.simplifyRoomFeeInfo.roomId,
        roomName: this.simplifyRoomFeeInfo.roomName,
        ownerName: this.simplifyRoomFeeInfo.name
      })
    },
    openAddMeterWaterSimplifyModal() {
      this.$refs.addMeterWater.open({
        roomId: this.simplifyRoomFeeInfo.roomId,
        roomName: this.simplifyRoomFeeInfo.roomName,
        ownerName: this.simplifyRoomFeeInfo.name
      });
    },
    getAttrValue(attrs, specCd) {
      const attr = attrs.find(item => item.specCd === specCd)
      return attr ? attr.value : ""
    },
    getDeadlineTime(fee) {
      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) return "-"
      if (fee.state == '2009001') return "-"
      return dateFormat(fee.deadlineTime)
    },
    getEndTime(fee) {
      if (fee.state == '2009001') return "-"
      return dateFormat(fee.endTime)
    },
    openProxyFeeModal() {
      this.$refs.addProxyFee.open({
        roomId: this.simplifyRoomFeeInfo.roomId,
        roomName: this.simplifyRoomFeeInfo.roomName,
        ownerName: this.simplifyRoomFeeInfo.name
      })
    },
    payFee(fee) {
      fee.roomName = this.simplifyRoomFeeInfo.roomName
      fee.builtUpArea = this.simplifyRoomFeeInfo.builtUpArea
      this.$router.push({
        path: '/views/fee/payFeeOrder',
        query: { feeId: fee.feeId }
      })
    },
    editFee(fee) {
      fee.maxEndTime = this.getAttrValue(fee.feeAttrs, '390010')
      this.$refs.editFee.open(fee)
    },
    payFeeHis(fee) {
      fee.builtUpArea = this.simplifyRoomFeeInfo.builtUpArea
      this.$router.push({
        path: '/views/fee/propertyFee',
        query: fee
      })
    },
    deleteFee(fee) {
      this.$refs.deleteFee.open({
        communityId: getCommunityId(),
        feeId: fee.feeId
      })
    },
    finishFee(fee) {  
      this.$refs.finishFee.open({
        communityId: getCommunityId(),
        feeId: fee.feeId
      })
    },
    openTempImportRoomFeeModal() {
      this.$refs.tempImportRoomFee.open({
        roomId: this.simplifyRoomFeeInfo.roomId,
        roomName: this.simplifyRoomFeeInfo.roomName,
        ownerName: this.simplifyRoomFeeInfo.name
      })
    },
    clearSimplifyRoomFeeInfo() {
      const feeConfigs = this.simplifyRoomFeeInfo.feeConfigs
      this.simplifyRoomFeeInfo = {
        total: 0,
        records: 1,
        fees: [],
        monthFees: [],
        accounts: [],
        roomId: '',
        name: '',
        roomName: '',
        floorNum: '',
        unitNum: '',
        roomNum: '',
        feeConfigs: feeConfigs,
        feeTypeCd: '',
        configId: '',
        state: '2008001',
        totalAmount: 0.0,
        roomType: '',
        ownerFee: 'N',
        ownerId: '',
        showFlag: 'DEFAULT'
      }
    },
    changeSimplifyRoomFeeFeeTypeCd(feeTypeCd) {
      this.simplifyRoomFeeInfo.configId = ''
      this.$emit('notify', {})

      const params = {
        page: 1,
        row: 50,
        communityId: getCommunityId(),
        feeTypeCd: feeTypeCd,
        isDefault: '',
        valid: '1'
      }

      listFeeConfigs(params).then(res => {
        this.simplifyRoomFeeInfo.feeConfigs = res.feeConfigs
      }).catch(error => {
        console.error('Failed to fetch fee configs:', error)
      })
    },
    changeSimplifyRoomConfigId() {
      this.handleNotify()
      this.$emit('notify', {})
    },
    simplifyRoomGetFeeOwnerInfo(attrs) {
      const ownerName = this.getAttrValue(attrs, '390008')
      const ownerLink = this.getAttrValue(attrs, '390009')
      return `业主：${ownerName},电话：${ownerLink}`
    },
    getSimplifyRoomFeeRoomName(fee) {
      if (this.simplifyRoomFeeInfo.ownerFee != 'Y') return ''

      const attr = fee.feeAttrs.find(item => item.specCd === '390012')
      return attr ? `(${attr.value})` : ''
    },
    openBatchPayRoomFeeModal() {
      this.$router.push({
        path: '/views/fee/batchPayFeeOrder',
        query: {
          ownerId: this.simplifyRoomFeeInfo.ownerId,
          payerObjType: '3333'
        }
      })
    },
    openMonthPayRoomFeeModal() {
      this.$router.push({
        path: '/property/payFeeMonthOrder',
        query: {
          payerObjId: this.simplifyRoomFeeInfo.roomId,
          payerObjType: '3333'
        }
      })
    },
    openRoomCreateFeeComboModal() {
      this.$router.push({
        path: '/views/fee/createFeeByCombo',
        query: {
          payerObjId: this.simplifyRoomFeeInfo.roomId,
          payerObjName: this.simplifyRoomFeeInfo.roomName,
          payerObjType: '3333'
        }
      })
    },
    viewRoomFeeConfig(fee) {
      const params = {
        page: 1,
        row: 1,
        communityId: getCommunityId(),
        configId: fee.configId
      }

      listFeeConfigs(params).then(res => {
        const feeConfig = res.feeConfigs[0]
        this.$emit('openViewDataModal', {
          title: `${fee.feeName} 费用项`,
          data: {
            "费用项ID": feeConfig.configId,
            "费用类型": feeConfig.feeTypeCdName,
            "收费项目": feeConfig.feeName,
            "费用标识": feeConfig.feeFlagName,
            "催缴类型": feeConfig.billTypeName,
            "付费类型": feeConfig.paymentCd == '1200' ? '预付费' : '后付费',
            "缴费周期": feeConfig.paymentCycle,
            "应收开始时间": feeConfig.startTime,
            "应收结束时间": feeConfig.endTime,
            "公式": feeConfig.computingFormulaName,
            "计费单价": feeConfig.computingFormula == '2002' ? '-' : feeConfig.squarePrice,
            "附加/固定费用": feeConfig.additionalAmount
          }
        })
      }).catch(error => {
        console.error('Failed to fetch fee config:', error)
      })
    },
    viewRoomFee(fee) {
      const data = {
        "费用ID": fee.feeId,
        "费用标识": fee.feeFlagName,
        "费用类型": fee.feeTypeCdName,
        "付费对象": fee.payerObjName,
        "费用项": fee.feeName,
        "费用状态": fee.stateName,
        "建账时间": fee.startTime,
        "应收开始时间": this.getEndTime(fee),
        "应收结束时间": this.getDeadlineTime(fee),
        "批次": fee.batchId
      }

      fee.feeAttrs.forEach(attr => {
        data[attr.specCdName] = attr.value
      })

      this.$emit('openViewDataModal', {
        title: `${fee.feeName} 详情`,
        data: data
      })
    },
    changeSimplifyRoomShowFlag() {
      if (this.simplifyRoomFeeInfo.showFlag == 'MONTH') {
        this.listSimplifyRoomMonthFee(1, this.pageSize)
      } else {
        this.listSimplifyRoomFee(1, this.pageSize)
      }
    },
    async listSimplifyRoomMonthFee(page, row) {
      const params = {
        page,
        row,
        communityId: getCommunityId(),
        objId: this.simplifyRoomFeeInfo.roomId,
        payerObjType: '3333',
        configId: this.simplifyRoomFeeInfo.configId,
        feeTypeCd: this.simplifyRoomFeeInfo.feeTypeCd,
        detailId: '-1',
        feeState: '2008001'
      }

      if (this.simplifyRoomFeeInfo.ownerFee == 'Y') {
        params.payerObjId = ''
        params.ownerId = this.simplifyRoomFeeInfo.ownerId
      }

      try {
        const res = await listMonthFee(params)
        this.simplifyRoomFeeInfo.total = res.total
        this.simplifyRoomFeeInfo.records = res.records
        let totalAmount = 0.0

        res.data.forEach(item => {
          totalAmount += parseFloat(item.receivableAmount)
        })

        this.simplifyRoomFeeInfo.totalAmount = totalAmount.toFixed(2)
        this.simplifyRoomFeeInfo.monthFees = res.data
      } catch (error) {
        console.error('Failed to fetch month fee list:', error)
      }
    },
    handleCurrentChange(page) {
      this.currentPage = page
      if (this.simplifyRoomFeeInfo.showFlag == 'MONTH') {
        this.listSimplifyRoomMonthFee(page, this.pageSize)
      } else {
        this.listSimplifyRoomFee(page, this.pageSize)
      }
    },
    // 其他方法类似
  }
}
</script>

<style scoped>
.margin-top-lg {
  margin-top: 20px;
}

.margin-top {
  margin-top: 15px;
}

.text-right {
  text-align: right;
}

.hand {
  cursor: pointer;
}
</style>