wuye / webui

<template>
  <div>
    <div class="margin-top">
      <el-table
        :data="feeDetailOwnerInfo.owners"
        border
        style="width: 100%"
      >
        <el-table-column
          :label="$t('feeDetailOwner.ownerFace')"
          align="center"
        >
          <template #default="{row}">
            <el-image
              style="width: 60px; height: 60px;"
              class="border-radius"
              :src="row.url || '/img/noPhoto.jpg'"
              :preview-src-list="[row.url]"
              v-if="row.url"
            ></el-image>
            <el-image
              style="width: 60px; height: 60px;"
              class="border-radius"
              src="/img/noPhoto.jpg"
              v-else
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          :label="$t('feeDetailOwner.name')"
          align="center"
        >
          <template #default="{row}">
            {{row.name}}({{row.link}})
          </template>
        </el-table-column>
        <el-table-column
          prop="sex"
          :label="$t('feeDetailOwner.gender')"
          align="center"
        >
          <template #default="{row}">
            {{row.sex === 0 ? $t('feeDetailOwner.male') : $t('feeDetailOwner.female')}}
          </template>
        </el-table-column>
        <el-table-column
          prop="idCard"
          :label="$t('feeDetailOwner.idCard')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="address"
          :label="$t('feeDetailOwner.address')"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="roomCount"
          :label="$t('feeDetailOwner.roomCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewOwnerRooms(row)">
              {{row.roomCount || 0}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="memberCount"
          :label="$t('feeDetailOwner.memberCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewOwnerMembers(row)">
              {{row.memberCount || 0}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="carCount"
          :label="$t('feeDetailOwner.carCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewOwnerCars(row)">
              {{row.carCount || 0}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="complaintCount"
          :label="$t('feeDetailOwner.complaintCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewComplaints(row)">
              {{row.complaintCount || 0}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="repairCount"
          :label="$t('feeDetailOwner.repairCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewRepairs(row)">
              {{row.repairCount || 0}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="oweFee"
          :label="$t('feeDetailOwner.oweFee')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewOweFees(row)">
              {{row.oweFee || '0.00'}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="contractCount"
          :label="$t('feeDetailOwner.contractCount')"
          align="center"
        >
          <template #default="{row}">
            <el-link type="primary" @click="_viewRoomContracts(row)">
              {{row.contractCount || 0}}
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-row class="margin-top">
        <el-col :span="4"></el-col>
        <el-col :span="20">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>

    <owner-rooms ref="ownerRooms"></owner-rooms>
    <owner-members ref="ownerMembers"></owner-members>
    <owner-cars ref="ownerCars"></owner-cars>
    <owner-complaints ref="ownerComplaints"></owner-complaints>
    <owner-repairs ref="ownerRepairs"></owner-repairs>
    <owner-owe-fees ref="ownerOweFees"></owner-owe-fees>
    <room-contracts ref="roomContracts"></room-contracts>
  </div>
</template>

<script>
import { queryOwners } from '@/api/fee/feeDetailOwnerApi'
import OwnerRooms from '@/components/owner/ownerRooms'
import OwnerMembers from '@/components/owner/ownerMembers'
import OwnerCars from '@/components/owner/ownerCars'
import OwnerComplaints from '@/components/owner/ownerComplaints'
import OwnerRepairs from '@/components/owner/ownerRepairs'
import OwnerOweFees from '@/components/owner/ownerOweFees'
import RoomContracts from '@/components/room/roomContracts'

export default {
  name: 'FeeDetailOwner',
  components: {
    OwnerRooms,
    OwnerMembers,
    OwnerCars,
    OwnerComplaints,
    OwnerRepairs,
    OwnerOweFees,
    RoomContracts
  },
  data() {
    return {
      feeDetailOwnerInfo: {
        owners: [],
        ownerId: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    open(params) {
      if (!params.ownerId) return
      this.feeDetailOwnerInfo.ownerId = params.ownerId
      this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this._loadFeeDetailOwnerData(this.currentPage, this.pageSize)
    },
    async _loadFeeDetailOwnerData(page, row) {
      try {
        const params = {
          ownerId: this.feeDetailOwnerInfo.ownerId,
          communityId: this.$store.getters.communityId,
          ownerTypeCd: '1001',
          page,
          row
        }
        
        const res = await queryOwners(params)
        this.feeDetailOwnerInfo.owners = res.data
        this.total = res.records
      } catch (error) {
        console.error('Failed to load owner data:', error)
      }
    },
    _viewOwnerRooms(owner) {
      this.$refs.ownerRooms.open(owner)
    },
    _viewOwnerMembers(owner) {
      this.$refs.ownerMembers.open(owner)
    },
    _viewOwnerCars(owner) {
      this.$refs.ownerCars.open(owner)
    },
    _viewComplaints(owner) {
      this.$refs.ownerComplaints.open(owner)
    },
    _viewRepairs(owner) {
      this.$refs.ownerRepairs.open(owner)
    },
    _viewOweFees(owner) {
      this.$refs.ownerOweFees.open(owner)
    },
    _viewRoomContracts(owner) {
      this.$refs.roomContracts.open(owner)
    }
  }
}
</script>