<template>
  <div class="margin-top">
    <el-row class="margin-top-lg">
      <el-col :span="12" class="padding-right-xs padding-left-xl">
        <span class="margin-right" v-for="(item, index) in ownerDetailRoomFeeInfo.payObjs" :key="index">
          <el-checkbox class="checkRoomItem" v-model="ownerDetailRoomFeeInfo.payerObjIds" :label="item.roomId"
            @change="_chanagePayerObjId()">
            {{ item.floorNum }}-{{ item.unitNum }}-{{ item.roomNum }}
          </el-checkbox>
        </span>
      </el-col>
      <el-col :span="3" class="padding-lr-xs">
        <el-select v-model="ownerDetailRoomFeeInfo.state" @change="_changeContractConfigId()" size="small"
          :placeholder="$t('ownerDetailRoomFee.selectStatus')">
          <el-option :label="$t('ownerDetailRoomFee.valid')" value="2008001"></el-option>
          <el-option :label="$t('ownerDetailRoomFee.feeEnd')" value="2009001"></el-option>
        </el-select>
      </el-col>
      <el-col :span="9" class="text-right">
        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020082314267912')"
          @click="_openBatchPayRoomFeeModal()">
          {{ $t('ownerDetailRoomFee.batchPay') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073007100003')"
          @click="_openTempImportRoomFeeModal()">
          {{ $t('ownerDetailRoomFee.tempFee') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073049300004')"
          @click="_openProxyFeeModal()">
          {{ $t('ownerDetailRoomFee.quantityPay') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502022073096990007')"
          @click="_openRoomsCreateFeeModal()">
          {{ $t('ownerDetailRoomFee.createFee') }}
        </el-button>
        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020080570210194')"
          @click="_toRoomOwePayFee()">
          {{ $t('ownerDetailRoomFee.owePay') }}
        </el-button>
        <el-button type="default" size="small" style="margin-left:10px" @click="_printOwnOrder()">
          {{ $t('ownerDetailRoomFee.reminder') }}
        </el-button>
      </el-col>
    </el-row>
    <div class="margin-top">
      <el-table :data="ownerDetailRoomFeeInfo.fees" style="width: 100%">
        <el-table-column prop="payerObjName" :label="$t('ownerDetailRoomFee.room')" align="center"></el-table-column>
        <el-table-column prop="feeName" :label="$t('ownerDetailRoomFee.feeItem')" align="center"></el-table-column>
        <el-table-column prop="feeFlagName" :label="$t('ownerDetailRoomFee.feeFlag')" align="center"></el-table-column>
        <el-table-column prop="feeTypeCdName" :label="$t('ownerDetailRoomFee.feeType')"
          align="center"></el-table-column>
        <el-table-column prop="amountOwed" :label="$t('ownerDetailRoomFee.amount')" align="center"></el-table-column>
        <el-table-column prop="startTime" :label="$t('ownerDetailRoomFee.createTime')" align="center"></el-table-column>
        <el-table-column :label="$t('ownerDetailRoomFee.timeRange')" align="center">
          <template slot-scope="scope">
            {{ _getRoomEndTime(scope.row) }}~<br>{{ _getRoomDeadlineTime(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('ownerDetailRoomFee.remark')" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
              <div><span>{{ $t('ownerDetailRoomFee.lastDegree') }}</span>{{ scope.row.preDegrees }}</div>
              <div><span>{{ $t('ownerDetailRoomFee.currentDegree') }}</span>{{ scope.row.curDegrees }}</div>
              <div><span>{{ $t('ownerDetailRoomFee.unitPrice')
                  }}</span>{{ scope.row.mwPrice ? scope.row.mwPrice : scope.row.squarePrice }}</div>
              <div><span>{{ $t('ownerDetailRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}</div>
            </div>
            <div v-else-if="scope.row.computingFormula == '6006'">
              <div><span>{{ $t('ownerDetailRoomFee.usage') }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390006') }}
              </div>
              <div><span>{{ $t('ownerDetailRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}</div>
              <div><span>{{ $t('ownerDetailRoomFee.additionalFee') }}</span>{{ scope.row.additionalAmount }}</div>
            </div>
            <div v-else-if="scope.row.feeTypeCd == '888800010017'" width="150">
              <div><span>{{ $t('ownerDetailRoomFee.algorithm')
                  }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390005') }}</div>
              <div><span>{{ $t('ownerDetailRoomFee.usage') }}</span>{{ _getRoomAttrValue(scope.row.feeAttrs, '390003') }}
              </div>
            </div>
            <div v-else-if="scope.row.computingFormula == '4004'">
              <div>{{ $t('ownerDetailRoomFee.feeByActual') }}</div>
            </div>
            <div v-else>
              <div><span>{{ $t('ownerDetailRoomFee.unitPrice') }}</span>{{ scope.row.squarePrice }}</div>
              <div v-if="scope.row.feeFlag == '1003006'"><span>{{ $t('ownerDetailRoomFee.additionalFee')
                  }}</span>{{ scope.row.additionalAmount }}</div>
              <div v-else><span>{{ $t('ownerDetailRoomFee.fixedFee') }}</span>{{ scope.row.additionalAmount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="stateName" :label="$t('ownerDetailRoomFee.status')" align="center"></el-table-column>
        <el-table-column :label="$t('common.operation')" align="center" width="300">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="text" size="mini"
                v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
                @click="_payRoomFee(scope.row)">
                {{ $t('ownerDetailRoomFee.pay') }}
              </el-button>
              <el-button type="text" size="mini" @click="_payRoomFeeHis(scope.row)">
                {{ $t('ownerDetailRoomFee.payHistory') }}
              </el-button>
              <el-button type="text" size="mini" v-if="hasPrivilege('502020090604200029')"
                @click="_deleteRoomFee(scope.row)">
                {{ $t('ownerDetailRoomFee.cancel') }}
              </el-button>
              <el-button type="text" size="mini"
                v-if="scope.row.state != '2009001' && hasPrivilege('502021070488970005')"
                @click="_finishRoomFee(scope.row)">
                {{ $t('ownerDetailRoomFee.end') }}
              </el-button>
              <el-button type="text" size="mini"
                v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
                @click="_editRoomFee(scope.row)">
                {{ $t('ownerDetailRoomFee.change') }}
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="12">
          <div>{{ $t('ownerDetailRoomFee.note1') }}</div>
          <div>{{ $t('ownerDetailRoomFee.note2') }}</div>
        </el-col>
        <el-col :span="4">
          <span>{{ $t('ownerDetailRoomFee.oweSubtotal') }}</span>
          {{ ownerDetailRoomFeeInfo.totalAmount }}
        </el-col>
        <el-col :span="8">
          <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
            :page-size="pagination.pageSize" :total="pagination.total" layout="total, prev, pager, next, jumper">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <rooms-import-temp-fee ref="roomsImportTempFee"></rooms-import-temp-fee>
    <rooms-create-fee ref="roomsCreateFee"></rooms-create-fee>
    <rooms-proxy-fee ref="roomsProxyFee"></rooms-proxy-fee>
  </div>
</template>

<script>
import RoomsImportTempFee from '@/components/fee/roomsImportTempFee'
import RoomsCreateFee from '@/components/fee/roomsCreateFee'
import RoomsProxyFee from '@/components/fee/roomsProxyFee'
import { listFee, listRoomsByOwner } from '@/api/owner/ownerDetailRoomFeeApi'
import { getCommunityId } from '@/api/community/communityApi'

export default {
  name: 'OwnerDetailRoomFee',
  components: {
    RoomsImportTempFee,
    RoomsCreateFee,
    RoomsProxyFee
  },
  data() {
    return {
      ownerDetailRoomFeeInfo: {
        fees: [],
        payObjs: [],
        payerObjIds: [],
        ownerId: '',
        state: '2008001',
        totalAmount: 0,
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  methods: {
    _loadOwnerDetailRoomFeeData(page, row) {
      const _payerObjIds = this.ownerDetailRoomFeeInfo.payerObjIds.join(',')
      const params = {
        page: page,
        row: row,
        communityId: getCommunityId(),
        payerObjIds: _payerObjIds,
        state: this.ownerDetailRoomFeeInfo.state
      }

      listFee(params).then(response => {
        this.ownerDetailRoomFeeInfo.fees = response.fees
        this.pagination.total = response.records
        let _totalAmount = 0.0
        response.fees.forEach(item => {
          _totalAmount += parseFloat(item.amountOwed)
        })
        this.ownerDetailRoomFeeInfo.totalAmount = _totalAmount.toFixed(2)
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    _loadDetailRoomsData() {
      const params = {
        communityId: getCommunityId(),
        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
        page: 1,
        row: 100
      }

      this.ownerDetailRoomFeeInfo.payerObjIds = []
      listRoomsByOwner(params).then(response => {
        this.ownerDetailRoomFeeInfo.payObjs = response.rooms
        response.rooms.forEach(room => {
          this.ownerDetailRoomFeeInfo.payerObjIds.push(room.roomId)
        })
        this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    _openTempImportRoomFeeModal() {
      this.$refs.roomsImportTempFee.open({
        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
        ownerName: this.ownerDetailRoomFeeInfo.ownerName
      })
    },
    _payRoomFee(fee) {
      this.$router.push(`/property/payFeeOrder?feeId=${fee.feeId}`)
    },
    _editRoomFee(fee) {
      this.$emit('editFee', fee)
    },
    _payRoomFeeHis(fee) {
      this.$router.push(`/property/propertyFee?${this.objToGetParam(fee)}`)
    },
    _deleteRoomFee(fee) {
      this.$emit('deleteFee', {
        communityId: getCommunityId(),
        feeId: fee.feeId
      })
    },
    _finishRoomFee(fee) {
      this.$emit('finishFee', {
        communityId: getCommunityId(),
        feeId: fee.feeId
      })
    },
    _toRoomOwePayFee() {
      const _ids = this.ownerDetailRoomFeeInfo.payerObjIds
      if (!_ids || _ids.length < 1) {
        this.$message.warning(this.$t('ownerDetailRoomFee.selectRoom'))
        return
      }
      this.$router.push(`/property/owePayFeeOrder?payObjId=${_ids.join(',')}&payObjType=3333&roomName=`)
    },
    _printOwnOrder() {
      const _ids = this.ownerDetailRoomFeeInfo.payerObjIds
      if (!_ids || _ids.length < 1) {
        this.$message.warning(this.$t('ownerDetailRoomFee.selectRoom'))
        return
      }
      window.open(`/print.html#/pages/property/printOweFee?payObjId=${_ids.join(',')}&payObjType=3333&payObjName=`)
    },
    _openRoomsCreateFeeModal() {
      this.$refs.roomsCreateFee.open({
        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
        ownerName: this.ownerDetailRoomFeeInfo.ownerName
      })
    },
    _getRoomAttrValue(attrs, specCd) {
      let _value = ""
      attrs.forEach(item => {
        if (item.specCd == specCd) {
          _value = item.value
          return
        }
      })
      return _value
    },
    _getRoomDeadlineTime(fee) {
      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
        return "-"
      }
      if (fee.state == '2009001') {
        return "-"
      }
      return this.$options.filters.dateFormat(fee.deadlineTime)
    },
    _getRoomEndTime(fee) {
      if (fee.state == '2009001') {
        return "-"
      }
      return this.$options.filters.dateFormat(fee.endTime)
    },
    _chanagePayerObjId() {
      this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
    },
    _changeContractConfigId() {
      this._loadOwnerDetailRoomFeeData(1, this.pagination.pageSize)
    },
    _openBatchPayRoomFeeModal() {
      this.$router.push(`/property/batchPayFeeOrder?ownerId=${this.ownerDetailRoomFeeInfo.ownerId}&payerObjType=3333`)
    },
    _openProxyFeeModal() {
      this.$refs.roomsProxyFee.open({
        ownerId: this.ownerDetailRoomFeeInfo.ownerId,
        ownerName: this.ownerDetailRoomFeeInfo.ownerName
      })
    },
    handleCurrentChange(val) {
      this._loadOwnerDetailRoomFeeData(val, this.pagination.pageSize)
    },

    objToGetParam(obj) {
      return Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&')
    }
  },
  created() {
    this.$on('switch', (data) => {
      this.ownerDetailRoomFeeInfo.ownerId = data.ownerId
      this._loadDetailRoomsData()
    })
  }
}
</script>