<template>
  <div class="print-pay-fee-xinshidai-container">
    <div style="color:#000;font-size:20px;margin-top: 90px; height: 60px;">
      <el-row>
        <el-col :span="14">
          <div style="margin-left: 40px;">{{ printPayFeeInfo.payObjName }}</div>
        </el-col>
        <el-col :span="10" class="text-center" v-if="printPayFeeInfo.feeReceipt && printPayFeeInfo.feeReceipt.length > 0">
          <span>{{ printPayFeeInfo.feeReceipt[0].objName }}</span>
        </el-col>
      </el-row>
    </div>

    <table class="table" style="color:#000;font-size:20px;border:0;">
      <thead>
        <tr style="border: 0px;">
          <th scope="col" class="text-center" style="border: 0px;width: 30%">
            {{ $t('printPayFeeXinShiDai.feeItem') }}
          </th>
          <th scope="col" class="text-center" style="border: 0px;width: 30%">
            {{ $t('printPayFeeXinShiDai.summary') }}
          </th>
          <th scope="col" class="text-center" style="border: 0px;width: 20%">
            {{ $t('printPayFeeXinShiDai.lateFee') }}
          </th>
          <th scope="col" class="text-left" style="border: 0px;width: 20%">
            {{ $t('printPayFeeXinShiDai.amount') }}
          </th>
          <th scope="col" class="text-center" style="border: 0px;"></th>
        </tr>
      </thead>
      <tbody style="color:#000;font-size:20px;border: 0px;">
        <tr v-for="(item, index) in printPayFeeInfo.fees" :key="index" style="border: 0px;">
          <td class="text-center" style="border: 0px;">{{ item.feeName }}</td>
          <td class="text-center" v-if="item.preDegrees" style="border: 0px;">
            {{ dateFormat(item.startTime) }}{{ $t('printPayFeeXinShiDai.to') }}{{ dateFormat(item.endTime) }}<br />
            {{ item.preDegrees }} {{ $t('printPayFeeXinShiDai.to') }} {{ item.curDegrees }}
          </td>
          <!-- 根据山东需求 如果为押金时 显示为无-->
          <td class="text-center" style="border: 0px;" v-else-if="item.feeTypeCd == '888800010006'">
            {{ $t('printPayFeeXinShiDai.none') }}
          </td>
          <td class="text-center" style="border: 0px;" v-else>
            {{ dateFormat(item.startTime) }}{{ $t('printPayFeeXinShiDai.to') }}{{ dateFormat(item.endTime) }}
          </td>
          <td class="text-center" style="border: 0px;">{{ item.discountPrice || 0 }}</td>
          <td class="text-left" style="border: 0px;">{{ item.amount }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;">
            ({{ $t('printPayFeeXinShiDai.capitalFormat') }}){{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}
          </td>
          <td class="text-center" style="border: 0px;">: </td>
          <td colspan="1" class="text-left" style="border: 0px;">{{ printPayFeeInfo.amount }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;"></td>
          <td colspan="1" class="text-center" style="border: 0px;">{{ printPayFeeInfo.feeTime }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;">{{ $t('printPayFeeXinShiDai.receiptNum') }}</td>
          <td colspan="1" class="text-center" style="border: 0px;">{{ printPayFeeInfo.receiptNum }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;" v-if="printPayFeeInfo.carName">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;">{{ $t('printPayFeeXinShiDai.vehicle') }}</td>
          <td colspan="1" class="text-center" style="border: 0px;">{{ printPayFeeInfo.carName }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;"></td>
          <td colspan="1" class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
        <tr style="border: 0px;">
          <td class="text-center" style="border: 0px;"></td>
          <td class="text-center" style="border: 0px;"></td>
          <td colspan="1" class="text-center" style="border: 0px;">{{ printPayFeeInfo.userName }}</td>
          <td class="text-center" style="border: 0px;"></td>
        </tr>
      </tbody>
    </table>

    <el-row id="print-btn">
      <el-col :span="24" class="text-right">
        <el-button type="primary" class="float-right" @click="handlePrint">
          <i class="fa fa-check"></i>&nbsp;{{ $t('common.print') }}
        </el-button>
        <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
          {{ $t('common.cancel') }}
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCommunityId, getCommunityName } from '@/api/community/communityApi'
import { queryFeeReceipt, queryFeeReceiptDetail, queryFeeDetailDiscount, queryOwnerCars } from '@/api/fee/printPayFeeApi'
import { getUserName } from '@/api/user/userApi'
import { dateFormat } from '@/utils/dateUtil'
import { changeNumMoneyToChinese } from '@/utils/moneyUtil'

export default {
  name: 'PrintPayFeeXinShiDai',
  data() {
    return {
      printPayFeeInfo: {
        communityName: '',
        receiptId: '',
        receiptIds: '',
        roomName: '',
        amount: 0.00,
        fees: [],
        feeTime: '',
        wechatName: '',
        content: '',
        qrImg: '',
        payObjName: '',
        feeReceipt: [],
        apply: 'N',
        userName: '',
        receiptNum: '',
        carName: ''
      },
      printFlag: '0',
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
    this.printPayFeeInfo.userName = getUserName()
    this.initData()
  },
  methods: {
    initData() {
      this.printPayFeeInfo.receiptId = this.$route.query.receiptId
      this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
      this.printPayFeeInfo.apply = this.$route.query.apply || 'N'
      this.printPayFeeInfo.communityName = getCommunityName()

      this.loadReceipt()
    },
    loadReceipt() {
      const params = {
        page: 1,
        row: 30,
        receiptId: this.printPayFeeInfo.receiptId,
        receiptIds: this.printPayFeeInfo.receiptIds,
        communityId: this.communityId
      }

      queryFeeReceipt(params).then(response => {
        const feeReceipt = response.data
        let amount = 0
        feeReceipt.forEach(item => {
          amount += parseFloat(item.amount)
        })

        this.printPayFeeInfo.amount = amount.toFixed(2)
        this.printPayFeeInfo.roomName = feeReceipt[0].objName
        this.printPayFeeInfo.feeTime = feeReceipt[0].createTime
        this.printPayFeeInfo.payObjName = feeReceipt[0].payObjName
        this.printPayFeeInfo.feeReceipt = feeReceipt

        this.loadReceiptDetail()

        // 如果是车位，查询车辆信息
        if (feeReceipt[0].objType == '6666') {
          this.printPayFeeInfo.carName = feeReceipt[0].objName
          this.listOwnerCar(feeReceipt[0].objId)
        }
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    loadReceiptDetail() {
      const params = {
        page: 1,
        row: 100,
        receiptId: this.printPayFeeInfo.receiptId,
        receiptIds: this.printPayFeeInfo.receiptIds,
        communityId: this.communityId
      }

      queryFeeReceiptDetail(params).then(response => {
        const feeReceiptDetails = response.data
        console.log('收据详情数据:', feeReceiptDetails)
        this.printPayFeeInfo.receiptNum = feeReceiptDetails[0].receiptId + "(" + feeReceiptDetails[0].payOrderId + ")"

        feeReceiptDetails.forEach(item => {
          console.log('费用项数据:', item)
          this.printPayFeeInfo.feeReceipt.forEach(im => {
            if (item.receiptId == im.receiptId) {
              item.objName = im.objName
              item.feeTypeCd = im.feeTypeCd
            }
          })
          // 查询滞纳金折扣信息
          this.loadFeeDetailDiscount(item.detailId, item)
        })
        
        // 使用 Vue.set 确保响应式
        this.$set(this.printPayFeeInfo, 'fees', feeReceiptDetails)

        // 延迟刷新以确保折扣信息加载完成
        setTimeout(() => {
          console.log('强制更新前的fees:', this.printPayFeeInfo.fees)
          this.$forceUpdate()
        }, 2000)
      }).catch(error => {
        console.error('请求失败处理', error)
      })
    },
    loadFeeDetailDiscount(detailId, item) {
      const params = {
        page: 1,
        row: 100,
        detailId: detailId
      }

      queryFeeDetailDiscount(params).then(response => {
        const feeReceiptDetails = response.data
        if (feeReceiptDetails && feeReceiptDetails.length > 0) {
          feeReceiptDetails.forEach(data => {
            if (data.discountType == '2002') {
              this.$set(item, 'discountPrice', parseFloat(data.discountPrice) * -1)
            } else {
              this.$set(item, 'discountPrice', 0)
            }
          })
        } else {
          this.$set(item, 'discountPrice', 0)
        }
      }).catch(error => {
        console.error('查询折扣失败', error)
        this.$set(item, 'discountPrice', 0)
      })
    },
    listOwnerCar(carId) {
      const params = {
        page: 1,
        row: 1,
        carId: carId
      }

      queryOwnerCars(params).then(response => {
        const ownerCar = response.data[0]
        if (ownerCar && ownerCar.roomName) {
          const roomName = ownerCar.roomName.replace('栋', '-').replace("单元", '-').replace('室', '')
          this.$set(this.printPayFeeInfo.feeReceipt[0], 'objName', roomName)
        }
      }).catch(error => {
        console.error('查询车位房屋失败', error)
      })
    },
    dateFormat(date) {
      if (!date) return ''
      return dateFormat(date)
    },
    changeNumMoneyToChinese,
    handlePrint() {
      this.printFlag = '1'
      console.log('printFlag:', this.printFlag)
      document.getElementById("print-btn").style.display = "none"
      window.print()
      window.opener = null
      window.close()
    },
    handleClose() {
      window.opener = null
      window.close()
    }
  }
}
</script>

<style scoped>
.print-pay-fee-xinshidai-container {
  padding: 20px;
}

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

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

.float-right {
  float: right;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;
}

@media print {
  #print-btn {
    display: none !important;
  }
}
</style>

