<template>
  <div>
    <!--    付款登记-->
    <xy-dialog
      ref="paymentRegistration"
      title="付款登记"
      :is-show.sync="isShowPaymentRegistration"
      type="form"
      class="payment-registration"
      :form="paymentRegistrationForm"
      :rules="paymentRegistrationRules"
      @submit="submit"
    >
      <template v-slot:extraFormTop>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">受款单位</div>
          <div class="payment-registration-row-content">{{ contract.supply }}</div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同名称</div>
          <div class="payment-registration-row-content">{{ contract.name }}</div>
        </div>
        <div class="payment-registration-row">
          <div class="payment-registration-row-title">合同金额</div>
          <div class="payment-registration-row-content">{{ priceFormat(contract.money) }} （元）</div>
        </div>
        <div style="display: flex">
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已申请金额</div>
            <div class="payment-registration-row-content">{{ totalApplyMoney() }} （元）</div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已申请笔数</div>
            <div class="payment-registration-row-content">{{ payment.length }}</div>
          </div>
        </div>
        <div style="display: flex">
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已付金额</div>
            <div class="payment-registration-row-content">{{ totalMoney() }} （元）</div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">支付占比</div>
            <div class="payment-registration-row-content">{{ percentPay() }}%</div>
          </div>
          <div class="payment-registration-row">
            <div class="payment-registration-row-title">已付笔数</div>
            <div class="payment-registration-row-content">{{ actNumsTotal() }}</div>
            <div class="payment-registration-row-content" style="color: #ff0000;padding-left: 16px;cursor: pointer;">
              <Poptip :transfer="true">
                <div>点击查看列表</div>
                <template v-slot:content>
                  <template v-if="payment&&payment.length>0">
                    <xy-table :height="200" :list="payment" :table-item="payTable">
                      <template v-slot:btns>
                        <p />
                      </template>
                    </xy-table>
                  </template>
                  <template v-else>
                    <div style="text-align: center">暂无已付笔数</div>
                  </template>
                </template>
              </Poptip>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:act_date>
        <div v-if="contract_category && contract_category.show_apply_money === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_act_date === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>
            实付日期
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="paymentRegistrationForm.act_date" type="date" value-format="yyyy-MM-dd" style="width: 150px;" />
          </div>
        </div>
      </template>

      <template v-slot:applyMoney>
        <div v-if="contract_category && contract_category.show_apply_money === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_apply_money === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>申请付款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input
              v-model="paymentRegistrationForm.applyMoney"
              clearable
              placeholder="请填写付款金额"
              style="width: 150px;"
              @input="checkIsEnd"
            />
          </div>
        </div>
      </template>

      <template v-slot:audit_money>
        <div v-if="contract_category && contract_category.show_audit_money === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_audit_money === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>审计金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input v-model="paymentRegistrationForm.audit_money" clearable placeholder="请填写审计金额" style="width: 150px;" />
          </div>
        </div>
      </template>

      <template v-slot:deductionMoney>
        <div v-if="contract_category && contract_category.show_discount_money === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_discount_money === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>本期扣款金额
          </div>
          <div class="xy-table-item-content xy-table-item-price">
            <el-input
              v-model="paymentRegistrationForm.deductionMoney"
              clearable
              placeholder="请填写扣款金额"
              style="width: 150px;"
            />
          </div>
        </div>
      </template>

      <template v-slot:remark>
        <div v-if="contract_category && contract_category.show_remark === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_remark === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>备注
          </div>
          <div class="xy-table-item-content">
            <el-input
              v-model="paymentRegistrationForm.remark"
              type="textarea"
              clearable
              placeholder="进度款日期：2022.6.8-2022.7.7"
              style="width: 300px;"
            />
          </div>
        </div>
      </template>

      <template v-slot:type>
        <div v-if="contract_category && contract_category.show_type === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">
            <span v-if="contract_category && contract_category.required_type === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>款项类型
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="paymentRegistrationForm.type"
              placeholder="选择款项类型或直接录入其他类型"
              style="width: 150px;"
              filterable
              allow-create
              clearable
            >
              <el-option v-for="item in paymentType" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:isLast>
        <div v-if="contract_category && contract_category.show_is_end === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">
            <span v-if="contract_category && contract_category.required_is_end === 1" style="color: red;font-weight: 600;padding-right: 4px;">*</span>是否为最后一笔
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="paymentRegistrationForm.isLast" />
          </div>
        </div>
      </template>

      <template v-slot:end_time>
        <div v-if="contract_category && contract_category.show_end_time === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label">项目完成时间</div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="paymentRegistrationForm.end_time" type="date" value-format="yyyy-MM-dd HH:mm:ss" style="width: 150px;" />
          </div>
        </div>
      </template>

      <template v-slot:isCheck>
        <div v-if="contract_category && contract_category.show_check === 1 && (!hasPostPaymentForm || (hasPostPaymentForm && currentStep === 2))" class="xy-table-item">
          <div class="xy-table-item-label" style="width: 200px">
            <span style="color: red;font-weight: 600;padding-right: 4px;" />是否验收
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="paymentRegistrationForm.isCheck" />
          </div>
        </div>
      </template>

      <template v-slot:extraFormBottom>
        <div v-if="hasPostPaymentForm && currentStep === 1" class="payment-table-section">
          <div class="section-title">
            事后支付表格
            <el-button type="text" style="margin-left: 10px;" @click="openZoomedTable">
              <i class="el-icon-zoom-in" /> 放大查看
            </el-button>
          </div>
          <div ref="mainTable" class="payment-table" v-html="forms" />
        </div>
      </template>

      <template v-slot:footerContent>
        <div class="dialog-footer">
          <el-button v-if="hasPostPaymentForm && currentStep === 2" @click="currentStep = 1">上一步</el-button>
          <el-button v-if="hasPostPaymentForm && currentStep === 1" @click="nextStep">下一步</el-button>
          <el-button v-if="(hasPostPaymentForm && currentStep === 2) || (!hasPostPaymentForm)" type="primary" @click="submit">确定</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </template>
    </xy-dialog>

    <!-- 放大窗口 -->
    <el-dialog
      title="事后支付表格"
      :visible.sync="zoomedDialogVisible"
      width="80%"
      :append-to-body="false"
      :destroy-on-close="true"
      :modal-append-to-body="false"
      :top="'5vh'"
      custom-class="zoomed-table-dialog"
      @close="handleZoomedDialogClose"
    >
      <div ref="zoomedTable" class="zoomed-table" v-html="forms" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getparameter
} from '@/api/system/dictionary'
import {
  getFundLog,
  addFundLog
} from '@/api/paymentRegistration/fundLog'
import {
  getBudget
} from '@/api/budget/budget'
import {
  detailContract,
  editorContract
} from '@/api/contract/contract'
import {
  Message
} from 'element-ui'
import {
  parseTime
} from '@/utils'
import { getContractTemplateContext } from '@/api/businessConfig/businessConfig'

// 添加金额转大写的工具函数
function numberToChinese(num) {
  const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿', '拾', '佰', '仟', '万']
  const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const [integer, decimal] = num.toString().split('.')
  let result = ''
  let intNum = parseInt(integer)
  if (intNum === 0) {
    result = '零'
  } else {
    let i = 0
    let lastDigit = null
    let hasZero = false
    while (intNum > 0) {
      const digit = intNum % 10
      if (digit === 0) {
        if (!hasZero && lastDigit !== 0) {
          result = '零' + result
          hasZero = true
        }
      } else {
        let unit = units[i]
        if (i === 4 && result.startsWith('零')) {
          unit = '万'
        } else if (i === 8 && result.startsWith('零')) {
          unit = '亿'
        }
        result = digits[digit] + unit + result
        hasZero = false
      }
      lastDigit = digit
      intNum = Math.floor(intNum / 10)
      i++
    }
    result = result.replace(/零+$/, '')
    result = result.replace(/零+/, '零')
  }
  if (decimal) {
    const decimalNum = parseInt(decimal)
    if (decimalNum > 0) {
      result += '点'
      for (let i = 0; i < decimal.length; i++) {
        result += digits[parseInt(decimal[i])]
      }
    }
  }
  if (!decimal || parseInt(decimal) === 0) {
    result += '整'
  }
  return result + '元'
}

// 添加同步表单DOM到HTML的函数
function syncFormDomToHtml(dom, contractTemplateFields) {
  if (!dom) return ''
  const inputs = dom.querySelectorAll('input, select, textarea')
  inputs.forEach(input => {
    const fieldName = input.getAttribute('data-field')
    if (fieldName && contractTemplateFields) {
      const field = contractTemplateFields.find(f => f.field === fieldName)
      if (field) {
        if (input.type === 'checkbox' || input.type === 'radio') {
          const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`)
          field.value = checkedInput ? checkedInput.value : ''
          if (checkedInput) {
            checkedInput.setAttribute('checked', 'checked')
          }
        } else {
          field.value = input.value
          input.setAttribute('value', input.value)
        }
      }
    }
  })
  return dom.innerHTML
}

export default {
  data() {
    return {
      currentStep: 1, // 当前步骤
      searchContent: '',
      planTotal: 0,
      pageIndex: 1,
      // 付款登记
      plans: [],
      planTypes: [],
      contract: {},
      payment: [], // 合同关联的付款登记
      contractTemplate: null, // 合同模板HTML
      forms: null, // 实际表单HTML
      payTable: [{
        label: '申请金额',
        prop: 'apply_money',
        sortable: false,
        width: 160,
        align: 'right'
      },
      {
        label: '已付金额',
        prop: 'act_money',
        sortable: false,
        width: 160,
        align: 'right'
      },
      {
        label: '时间',
        prop: 'created_at',
        sortable: false,
        width: 120,
        formatter: (t1, t2, value) => {
          return parseTime(new Date(value), '{y}-{m}-{d}')
        }
      }
      ],
      paymentType: ['预付款', '进度款', '结算款', '质保金'],
      isShowPaymentRegistration: false,
      paymentRegistrationForm: {
        applyMoney: '',
        deductionMoney: '',
        audit_money: '',
        act_date: '',
        type: '',
        isLast: false,
        end_time: '',
        isCheck: false,
        plan: [],
        remark: ''
      },
      form: {
        audit_money: 0
      },
      paymentRegistrationRules: {
        applyMoney: [
          {
            required: false,
            message: '必填'
          },
          {
            pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
            message: '必须为数字'
          }
        ],
        deductionMoney: [
          {
            required: false,
            message: '必填'
          },
          {
            pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
            message: '必须为数字'
          }
        ],
        audit_money: [
          {
            required: false,
            message: '必填'
          }
        ],
        type: [
          {
            required: false,
            message: '必选'
          }
        ],
        isLast: [
          {
            required: false,
            message: '必选'
          }
        ],
        remark: [
          {
            required: false,
            message: '必填'
          }
        ],
        act_date: [
          {
            required: false,
            message: '必填'
          }
        ]
      },
      planTable: [{
        sortable: false,
        width: 36,
        type: 'selection'
      },
      {
        label: '分类',
        prop: 'type',
        formatter: (cell, data, value) => {
          const res = this.planTypes.filter(item => {
            return item.id === value
          })
          return res[0]?.value || '未知'
        }
      },
      {
        label: '名称',
        prop: 'name',
        align: 'left'
      },
      {
        label: '计划金额',
        prop: 'money',
        align: 'right'
      }
      ],
      zoomedDialogVisible: false, // 控制放大表格弹窗的显示
      hasPostPaymentForm: false, // 是否有事后支付表格
      contract_category: {},
      templateContextData: null // 合同模板关联数据
    }
  },
  computed: {
    priceFormat() {
      return function(price) {
        return Number(price).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
      }
    }
  },
  watch: {
    isShowPaymentRegistration(newVal) {
      if (newVal) {
        this.getBudgets()
        this.currentStep = 1 // 重置到第一步
        this.paymentRegistrationForm = this.getDefaultPaymentRegistrationForm() // 每次弹窗打开时重置表单
        // 重置校验状态，避免立刻弹出必填项提示
        this.$nextTick(() => {
          if (this.$refs.paymentRegistration && this.$refs.paymentRegistration.$refs.elForm) {
            this.$refs.paymentRegistration.$refs.elForm.resetFields()
          }
        })
      }
    },
    forms: {
      handler(newVal) {
        if (newVal) {
          // 当forms内容更新后，重新设置监听器
          this.$nextTick(() => {
            this.setupAmountListeners(this.$refs.mainTable)
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.getPlanTypes()
  },
  methods: {
    getDefaultPaymentRegistrationForm() {
      return {
        applyMoney: '',
        deductionMoney: '',
        audit_money: '',
        act_date: '',
        type: '',
        isLast: false,
        end_time: '',
        isCheck: false,
        plan: [],
        remark: ''
      }
    },
    checkIsEnd(e) {
      // this.paymentRegistrationForm.isLast = (Number(this.totalMoney()) + Number(e)) >= (this.contract.money * 0.95);
    },

    async getPlanTypes() {
      const res = await getparameter({
        number: 'money_way'
      })
      this.planTypes = res.detail
    },

    // 翻页
    pageChange(e) {
      this.pageIndex = e
      this.getBudgets()
    },

    // 合计申请金额
    totalApplyMoney() {
      let total = 0.00
      this.payment.map(item => {
        total += Number(item.apply_money)
      })
      return total.toFixed(2)
    },
    // 合计金额
    totalMoney() {
      let total = 0.00
      this.payment.map(item => {
        total += Number(item.act_money)
      })
      return total.toFixed(2)
    },
    // 已付笔数
    actNumsTotal() {
      let total = 0
      this.payment.map(item => {
        if (Number(item.act_money)) {
          total++
        }
      })
      return total
    },
    // 支付占比
    percentPay() {
      const total = this.totalMoney()
      return ((total / this.contract.money) * 100).toFixed(2) || 0
    },

    // 获取合同信息
    async getContract(info) {
      this.contract = await detailContract({
        id: info.id
      })
      this.paymentRegistrationForm.plan = this.contract.plans.map(item => {
        return {
          plan_id: item.id,
          use_money: item.useMoney,
          new_money: item.money
        }
      })
      this.form.audit_money = this.contract.audit_money
      this.contract_category = this.contract.contract_category || {}
      // 设置默认值
      if (this.contract_category && this.contract_category.default_apply_money !== undefined) {
        this.paymentRegistrationForm.applyMoney = this.contract_category.default_apply_money
      }
      if (this.contract_category && this.contract_category.default_discount_money !== undefined) {
        this.paymentRegistrationForm.deductionMoney = this.contract_category.default_discount_money
      }
      if (this.contract_category && this.contract_category.default_audit_money !== undefined) {
        this.paymentRegistrationForm.audit_money = this.contract_category.default_audit_money
      }
      if (this.contract_category && this.contract_category.default_act_date !== undefined) {
        this.paymentRegistrationForm.act_date = this.contract_category.default_act_date
      }
      if (this.contract_category && this.contract_category.default_type !== undefined) {
        this.paymentRegistrationForm.type = this.contract_category.default_type
      }
      if (this.contract_category && this.contract_category.default_is_end !== undefined) {
        this.paymentRegistrationForm.isLast = this.contract_category.default_is_end === 1 || this.contract_category.default_is_end === '1'
      }
      if (this.contract_category && this.contract_category.default_remark !== undefined) {
        this.paymentRegistrationForm.remark = this.contract_category.default_remark
      }
      // 动态生成rules
      this.paymentRegistrationRules = {
        applyMoney: [
          {
            required: this.contract_category.required_apply_money === 1,
            message: '必填'
          },
          {
            pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
            message: '必须为数字'
          }
        ],
        deductionMoney: [
          {
            required: this.contract_category.required_discount_money === 1,
            message: '必填'
          },
          {
            pattern: /(^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d{1,2})?$)/,
            message: '必须为数字'
          }
        ],
        audit_money: [
          {
            required: this.contract_category.required_audit_money === 1,
            message: '必填'
          }
        ],
        type: [
          {
            required: this.contract_category.required_type === 1,
            message: '必选'
          }
        ],
        isLast: [
          {
            required: this.contract_category.required_is_end === 1,
            message: '必选'
          }
        ],
        remark: [
          {
            required: this.contract_category.required_remark === 1,
            message: '必填'
          }
        ],
        act_date: [
          {
            required: this.contract_category.required_act_date === 1,
            message: '必填'
          }
        ]
      }
      const res = await getFundLog({
        contract_id: this.contract.id,
        page: 1,
        page_size: 999
      })
      this.payment = res.data
      // 判断是否有事后支付表格模板
      if (this.contract.contract_template && this.contract.contract_template.template) {
        this.hasPostPaymentForm = true
        this.currentStep = 1
        this.contractTemplate = this.contract.contract_template.template
        this.forms = this.contract.forms
        if (!this.contract.contract_template.contract_template_fields) {
          this.contract.contract_template.contract_template_fields = this.contract.other_data || []
        }
      } else {
        this.hasPostPaymentForm = false
        this.currentStep = 1
        this.contractTemplate = null
        this.forms = null
      }

      // 拉取合同模板关联数据
      if (this.contract && this.contract.id) {
        getContractTemplateContext({
          id: this.contract.id,
          model: 'Contract'
        }).then(res => {
          this.templateContextData = res
          // 初始化模板字段值
          this.initTemplateFields(res)
        })
      }

      // 设置 amount 输入框的监听
      this.$nextTick(() => {
        // 为原始表格设置监听器
        this.setupAmountListeners(this.$refs.mainTable)
        // 为放大表格设置监听器
        this.setupAmountListeners(this.$refs.zoomedTable)
      })
    },

    // 初始化模板字段值
    initTemplateFields(contextData) {
      if (!contextData || !contextData.other_data_fill) return

      // 获取事后支付模板
      if (this.contract.contract_template && this.contract.contract_template.contract_template_fields) {
        const fields = this.contract.contract_template.contract_template_fields

        // 遍历模板字段
        fields.forEach(field => {
          // 检查字段是否有link_type且该字段在other_data_fill中存在
          if (field.link_field && contextData.other_data_fill[field.link_field]) {
            let value = contextData.other_data_fill[field.link_field]

            // 如果是upper_money字段，转换为金额大写
            if (field.link_field === 'upper_money') {
              value = numberToChinese(Number(value))
            }

            // 设置字段值
            field.value = value

            // 更新DOM中的值
            const dom = this.$refs.mainTable
            if (dom) {
              const input = dom.querySelector(`[data-field="${field.field}"]`)
              if (input) {
                if (input.type === 'checkbox' || input.type === 'radio') {
                  // 对于复选框和单选框，需要设置checked属性
                  if (field.value === input.value) {
                    input.checked = true
                  }
                } else {
                  // 对于其他类型的输入，直接设置value
                  input.value = field.value
                }
              }
            }
          }
        })

        // 更新forms内容
        if (this.$refs.mainTable) {
          this.forms = syncFormDomToHtml(this.$refs.mainTable, fields)
        }
      }
    },

    submit() {
      // 先进行表单校验
      this.$refs['paymentRegistration'].$refs['elForm'].validate().then(res => {
        if (res) {
          // 保存事后支付表格的数据
          if (this.contract.contract_template) {
            const dom = this.$refs.zoomedTable
            if (dom) {
              // 获取所有输入控件
              const inputs = dom.querySelectorAll('input, select, textarea')

              // 遍历所有输入控件，更新值到 HTML
              inputs.forEach(input => {
                const fieldName = input.getAttribute('data-field')
                if (fieldName) {
                  const field = this.contract.contract_template.contract_template_fields.find(f => f.field === fieldName)
                  if (field) {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                      // 对于复选框和单选框，需要找到选中的值
                      const checkedInput = dom.querySelector(`[data-field="${fieldName}"]:checked`)
                      field.value = checkedInput ? checkedInput.value : ''
                      // 更新 HTML 中的 checked 状态
                      if (checkedInput) {
                        checkedInput.setAttribute('checked', 'checked')
                      }
                    } else {
                      field.value = input.value
                      // 更新 HTML 中的 value
                      input.setAttribute('value', input.value)
                    }
                  }
                }
              })

              // 获取更新后的 HTML
              this.forms = dom.innerHTML
            }
          }

          const data = {
            contract_id: this.contract.id,
            apply_money: this.paymentRegistrationForm.applyMoney ? this.paymentRegistrationForm.applyMoney : 0,
            discount_money: this.paymentRegistrationForm.deductionMoney ? this.paymentRegistrationForm.deductionMoney : 0,
            type: this.paymentRegistrationForm.type ? this.paymentRegistrationForm.type : 0,
            is_end: this.paymentRegistrationForm.isLast ? 1 : 0,
            remark: this.paymentRegistrationForm.remark,
            audit_money: this.paymentRegistrationForm.audit_money ? this.paymentRegistrationForm.audit_money : 0,
            end_time: this.paymentRegistrationForm.end_time,
            is_check: this.paymentRegistrationForm.isCheck ? 1 : 0,
            // 提交更新后的HTML和字段数据
            forms: this.forms,
            other_data: this.contract.contract_template?.contract_template_fields || []
          }
          addFundLog(data).then(() => {
            this.isShowPaymentRegistration = false
            // 付款申请后同时更新一下合同中审计金额
            editorContract({
              id: this.contract.id,
              audit_money: this.form.audit_money,
              forms: this.forms,
              other_data: this.contract.contract_template?.contract_template_fields || []
            }).then(() => {
              Message({
                type: 'success',
                message: '操作成功'
              })
            }).catch(error => {
              console.error('更新合同失败:', error)
              Message({
                type: 'error',
                message: '更新合同失败'
              })
            })
            this.$refs['paymentRegistration'].reset()
          }).catch(error => {
            console.error('添加付款记录失败:', error)
            Message({
              type: 'error',
              message: '添加付款记录失败'
            })
          })
        } else {
          this.$Message.warning({
            content: '请填写完整信息',
            duration: 1
          })
        }
      }).catch(error => {
        console.error('表单验证失败:', error)
        this.$Message.warning({
          content: '请填写完整信息',
          duration: 1
        })
      })
    },

    // 计划
    // 获取预算计划
    async getBudgets() {
      try {
        const res = await getBudget({
          name: this.searchContent,
          page_size: 10,
          page: this.pageIndex
        })
        this.plans = res.list.data
        this.planTotal = res.list.total
      } catch (error) {
        console.error('获取预算计划失败:', error)
        this.$Message.error({
          content: '获取预算计划失败',
          duration: 1
        })
      }
    },
    planPageChange(e) {
      this.plansPageIndex = e
      this.getBudgets()
    },
    selectPlan(sel, row) {
      if (sel) {
        this.paymentRegistrationForm.plan = sel.map(item => {
          return {
            plan_id: item.id,
            use_money: item.useMoney,
            new_money: item.money
          }
        })
      } else {
        this.paymentRegistrationForm.plan = []
      }
    },
    toggleSelection(e) {
      if (!e) {
        return
      }
      try {
        const plans = this.paymentRegistrationForm.plan.map(item => {
          return item.plan_id
        })
        if (plans) {
          this.plans.filter(plan => {
            return plans.includes(plan.id)
          }).map(row => {
            this.$nextTick(() => {
              this.$refs['planTable'].toggleRowSelection(row)
            })
          })
        } else {
          this.$refs['planTable'].clearSelection()
        }
      } catch (error) {
        console.error('切换选择状态失败:', error)
        this.$Message.error({
          content: '切换选择状态失败',
          duration: 1
        })
      }
    },
    nextStep() {
      try {
        // 如果有事后支付表格，下一步不做表单校验，直接切换 currentStep=2
        if (this.hasPostPaymentForm) {
          // 保存事后支付表格HTML数据，参考 openZoomedTable 逻辑
          const dom = this.$refs.mainTable
          if (dom && this.contract.contract_template) {
            this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
            this.contract.forms = this.forms
          }
          this.currentStep = 2
        } else {
          // 没有事后支付表格时，下一步其实就是提交，校验在 submit 里
          if (this.$refs['paymentRegistration'] && this.$refs['paymentRegistration'].$refs['elForm']) {
            this.$refs['paymentRegistration'].$refs['elForm'].validate().then(res => {
              if (res) {
                this.submit()
              }
            }).catch(err => {
              console.error('表单验证失败:', err)
              this.$Message.warning({
                content: '请填写完整信息',
                duration: 1
              })
            })
          } else {
            this.submit()
          }
        }
      } catch (error) {
        console.error('下一步操作失败:', error)
        this.$Message.error({
          content: '下一步操作失败',
          duration: 1
        })
      }
    },

    resetForm() {
      this.currentStep = 1
      this.$refs['paymentRegistration'].reset()
    },

    // 打开放大预览前，先同步当前表单数据
    openZoomedTable() {
      const dom = this.$refs.mainTable
      if (dom && this.contract.contract_template) {
        console.log(this.contract.contract_template.contract_template_fields)
        this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
        this.contract.forms = this.forms
      }
      this.zoomedDialogVisible = true
      // 设置 amount 输入框的监听
      this.$nextTick(() => {
        // 使用setTimeout确保DOM完全加载
        setTimeout(() => {
          this.setupAmountListeners(this.$refs.zoomedTable)
        }, 200)
      })
    },

    handleZoomedDialogClose() {
      const dom = this.$refs.zoomedTable
      if (dom && this.contract.contract_template) {
        this.forms = syncFormDomToHtml(dom, this.contract.contract_template.contract_template_fields)
        this.contract.forms = this.forms
      }
      this.zoomedDialogVisible = false
    },

    setupAmountListeners(dom) {
      if (!dom) return

      // 使用setTimeout确保DOM完全加载
      setTimeout(() => {
        // 获取所有以 amount 开头的输入框
        const amountInputs = dom.querySelectorAll('input[data-field^="amount"]')
        console.log('找到的金额输入框:', amountInputs.length, dom)

        // 移除旧的监听器
        amountInputs.forEach(input => {
          input.removeEventListener('input', this.calculateTotal)
          input.removeEventListener('change', this.calculateTotal)
          input.removeEventListener('blur', this.calculateTotal)
        })

        // 添加新的监听器
        amountInputs.forEach(input => {
          input.addEventListener('input', this.calculateTotal)
          input.addEventListener('change', this.calculateTotal)
          input.addEventListener('blur', this.calculateTotal)
        })

        // 初始计算一次
        this.calculateTotal()
      }, 100)
    },

    calculateTotal() {
      // 计算原始表格的总金额
      this.calculateTableTotal(this.$refs.mainTable)
      // 计算放大表格的总金额
      this.calculateTableTotal(this.$refs.zoomedTable)
    },

    calculateTableTotal(dom) {
      if (!dom) return

      let total = 0
      // 只计算以 amount 开头的输入框
      const amountInputs = dom.querySelectorAll('input[data-field^="amount"]')
      console.log('计算总金额，找到输入框数量:', amountInputs.length, dom)

      amountInputs.forEach(input => {
        const value = parseFloat(input.value) || 0
        console.log('输入框值:', input.getAttribute('data-field'), value)
        total += value
      })

      console.log('计算得到的总金额:', total)

      // 更新总金额输入框
      const totalInput = dom.querySelector('input[data-field="total"]')
      if (totalInput) {
        if (total !== 0) {
          totalInput.value = total.toFixed(2)
        }
        console.log('更新总金额输入框:', totalInput.value)

        // 监听 total 输入框的变化
        totalInput.removeEventListener('input', (e) => this.updateUpperCaseFromTotal(e, dom))
        totalInput.removeEventListener('change', (e) => this.updateUpperCaseFromTotal(e, dom))
        totalInput.removeEventListener('blur', (e) => this.updateUpperCaseFromTotal(e, dom))
        
        totalInput.addEventListener('input', (e) => this.updateUpperCaseFromTotal(e, dom))
        totalInput.addEventListener('change', (e) => this.updateUpperCaseFromTotal(e, dom))
        totalInput.addEventListener('blur', (e) => this.updateUpperCaseFromTotal(e, dom))
      }

      // 更新大写金额
      const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
      if (upperCaseInput) {
        if (total !== 0) {
          upperCaseInput.value = numberToChinese(total)
        }
        console.log('更新大写金额:', upperCaseInput.value)
      }
    },

    updateUpperCaseFromTotal(event, dom) {
      if (!dom) return

      const totalInput = dom.querySelector('input[data-field="total"]')
      const upperCaseInput = dom.querySelector('input[data-field="upperCaseAmount"]')
      
      if (totalInput && upperCaseInput) {
        const total = parseFloat(totalInput.value) || 0
        upperCaseInput.value = numberToChinese(total)
        console.log('从总金额更新大写金额:', total, upperCaseInput.value)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .payment-registration {
    &-row {
      display: flex;
      padding: 6px 0;

      &-title {
        padding: 0 10px;
      }

      &-content {}
    }
  }

  .payment-table-section {
    margin-top: 20px;
    padding: 0 20px;

    .section-title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
      display: flex;
      align-items: center;
    }

    .no-data {
      text-align: center;
      color: #909399;
      padding: 20px 0;
    }

    ::v-deep table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;

      th, td {
        border: 1px solid #EBEEF5;
        padding: 8px;
        text-align: center;
      }

      th {
        background-color: #F5F7FA;
        color: #606266;
        font-weight: 500;
      }
    }
  }

  .xy-table-item-label {
    width: 140px;
  }

  .xy-table-item-price {
    position: relative;

    &::after {
      z-index: 1;
      position: absolute;
      right: 0;
      top: 0;
      content: '（元）'
    }

    ::v-deep .el-input__clear {
      position: relative;
      right: 30px;
      z-index: 2;
    }
  }

  ::v-deep .zoomed-table-dialog {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: 2000;

    .el-dialog__header {
      padding: 15px 20px;
      margin: 0;
      border-bottom: 1px solid #EBEEF5;
    }

    .el-dialog__body {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      margin: 0;
      max-height: calc(90vh - 120px);
    }

    .el-dialog__footer {
      padding: 15px 20px;
      margin: 0;
      border-top: 1px solid #EBEEF5;
    }
  }

  ::v-deep .el-dialog__wrapper {
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

