<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ isEditMode ? '编辑债权' : '生成债权凭证' }}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回列表</el-button>
        </div>
      </template>

      <el-form 
        ref="creditRef" 
        :model="form" 
        :rules="rules" 
        label-width="120px" 
        v-loading="loading"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="债权编号" prop="creditNumber">
              <el-input v-model="form.creditNumber" placeholder="系统自动生成" disabled />
              <div class="form-tip">债权编号由系统自动生成</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="债权状态">
              <el-input v-model="creditStatusDisplay" placeholder="系统自动管理" disabled />
              <div class="form-tip">债权状态由系统自动管理，不可手动修改</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="关联合同" prop="contractId">
              <el-select
                v-model="form.contractId"
                placeholder="请选择关联合同"
                style="width: 100%"
                filterable
                @change="handleContractChange"
              >
                <el-option
                  v-for="contract in contractOptions"
                  :key="contract.contractId || contract.id"
                  :label="(contract.contractNumber || contract.number || 'N/A') + ' - ' + (contract.title || contract.name || 'N/A')"
                  :value="contract.contractId || contract.id"
                />
              </el-select>
              <div class="form-tip">只能选择已确认且有完整服务周期和员工贷款申请的合同生成债权</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="服务周期">
              <el-input v-model="servicePeriodDisplay" placeholder="根据合同自动填充" disabled />
              <div class="form-tip">服务周期从关联合同中自动获取</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="甲方单位" prop="clientCompanyId">
              <el-input v-model="clientCompanyName" placeholder="根据合同自动填充" disabled />
              <div class="form-tip">甲方单位信息从关联合同中自动获取</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安保公司" prop="securityCompanyId">
              <el-input v-model="securityCompanyName" placeholder="根据合同自动填充" disabled />
              <div class="form-tip">安保公司信息从关联合同中自动获取</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
           <el-form-item label="合同金额">
              <el-input v-model="contractAmountDisplay" placeholder="根据合同自动填充" disabled />
              <div class="form-tip">合同金额从关联合同中自动获取</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 占位列 -->
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="融资比例" prop="creditRatio">
              <el-input-number
                v-model="form.creditRatio"
                :precision="2"
                :step="0.01"
                :max="100"
                :min="0"
                style="width: 100%"
                placeholder="请输入融资比例(%)"
                controls-position="right"
                @change="handleCreditRatioChange"
              />
              <div class="form-tip">融资比例范围：0% - 100%</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="融资金额" prop="amount">
              <el-input-number
                v-model="form.amount"
                :precision="2"
                :step="1000"
                :max="maxCreditAmount"
                :min="0"
                style="width: 100%"
                placeholder="请输入融资金额"
                controls-position="right"
                @change="handleCreditAmountChange"
              />
              <div class="form-tip">融资金额不能超过合同金额：{{ contractAmountDisplay }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="发行日期" prop="issueDate">
              <el-date-picker
                v-model="form.issueDate"
                type="date"
                placeholder="请选择发行日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledIssueDates"
              />
              <div class="form-tip">发行日期不能早于今天</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期日期" prop="maturityDate">
              <el-date-picker
                v-model="form.maturityDate"
                type="date"
                placeholder="请选择到期日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledMaturityDates"
              />
              <div class="form-tip">到期日期不能早于发行日期，建议不超过合同结束日期</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="债权描述" prop="description">
              <el-input
                v-model="form.description"
                type="textarea"
                :rows="4"
                placeholder="请输入债权描述信息，包括债权用途、还款来源等"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息（可选）"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 区块链上链选项 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="区块链设置">
              <el-checkbox v-model="form.enableBlockchain">
                启用区块链存证
              </el-checkbox>
              <div class="form-tip">启用后，债权信息将自动上链存证，确保数据不可篡改</div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 预览区域 -->
        <el-divider content-position="left">债权信息预览</el-divider>
        <div class="preview-section" v-if="form.contractId">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="债权编号">{{ form.creditNumber || '系统自动生成' }}</el-descriptions-item>
            <el-descriptions-item label="关联合同">{{ selectedContractInfo.contractNumber }}</el-descriptions-item>
            <el-descriptions-item label="安保公司">{{ securityCompanyName }}</el-descriptions-item>
            <el-descriptions-item label="甲方单位">{{ clientCompanyName }}</el-descriptions-item>
            <el-descriptions-item label="合同金额">{{ contractAmountDisplay }}</el-descriptions-item>
            <el-descriptions-item label="服务周期">{{ servicePeriodDisplay }}</el-descriptions-item>
            <el-descriptions-item label="融资金额">{{ formatMoney(form.amount) }}</el-descriptions-item>
            <el-descriptions-item label="融资比例">{{ creditRatioDisplay }}</el-descriptions-item>
            <el-descriptions-item label="发行日期">{{ form.issueDate }}</el-descriptions-item>
            <el-descriptions-item label="到期日期">{{ form.maturityDate }}</el-descriptions-item>
            <el-descriptions-item label="区块链存证" :span="2">
              <el-tag :type="form.enableBlockchain ? 'success' : 'info'">
                {{ form.enableBlockchain ? '已启用' : '未启用' }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <el-row class="form-actions">
          <el-col :span="24" style="text-align: center; margin-top: 30px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="handlePreview" :disabled="!canPreview">预览债权</el-button>
            <el-button type="success" @click="submitForm" :loading="submitLoading" :disabled="!canSubmit">
              {{ isEditMode ? '更新债权' : '生成债权' }}
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="债权凭证预览"
      width="60%"
      :before-close="handlePreviewClose"
    >
      <div class="credit-preview">
        <div class="preview-header">
          <h2>数字债权凭证</h2>
          <div class="credit-number">债权编号：{{ form.creditNumber || '系统自动生成' }}</div>
        </div>
        
        <div class="preview-content">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="关联合同">{{ selectedContractInfo.contractNumber }} - {{ selectedContractInfo.title }}</el-descriptions-item>
            <el-descriptions-item label="债权持有方">{{ securityCompanyName }}</el-descriptions-item>
            <el-descriptions-item label="债务方">{{ clientCompanyName }}</el-descriptions-item>
            <el-descriptions-item label="合同金额">{{ contractAmountDisplay }}</el-descriptions-item>
            <el-descriptions-item label="服务周期">{{ servicePeriodDisplay }}</el-descriptions-item>
            <el-descriptions-item label="融资金额">{{ formatMoney(form.amount) }}</el-descriptions-item>
            <el-descriptions-item label="发行日期">{{ form.issueDate }}</el-descriptions-item>
            <el-descriptions-item label="到期日期">{{ form.maturityDate }}</el-descriptions-item>
            <el-descriptions-item label="债权描述">{{ form.description }}</el-descriptions-item>
            <el-descriptions-item label="区块链存证">{{ form.enableBlockchain ? '已启用' : '未启用' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="preview-footer">
          <p>本债权凭证基于服务合同 {{ selectedContractInfo.contractNumber }} 生成，具有法律效力。</p>
          <p v-if="form.enableBlockchain">债权信息将通过区块链技术进行存证，确保数据真实性和不可篡改性。</p>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewVisible = false">关闭预览</el-button>
          <el-button type="primary" @click="confirmGenerate" :loading="submitLoading">
            确认生成
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CreditGenerate">
import { generateCredit, getCredit, updateCredit } from "@/api/credit/credit";
import { listContracts, getContract } from "@/api/credit/contract";
import { listDept } from "@/api/system/dept";
import { nextTick } from 'vue';

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

// 响应式数据
const loading = ref(false);
const submitLoading = ref(false);
const previewVisible = ref(false);
const isEditMode = ref(false);
const contractOptions = ref([]);
const deptList = ref([]);
const deptMap = ref({});
const selectedContractInfo = ref({});
const maxCreditAmount = ref(0);

// 表单数据
const form = reactive({
  id: null,
  creditNumber: '',
  contractId: null, // 改为null，确保是数字类型
  securityCompanyId: '',
  clientCompanyId: '',
  amount: null,
  creditRatio: null,
  issueDate: '',
  maturityDate: '',
  description: '',
  remark: '',
  enableBlockchain: true,
  status: 'generated',
  servicePeriodStart: '',
  servicePeriodEnd: ''
});

// 表单验证规则
const rules = reactive({
  contractId: [
    { required: true, message: "请选择关联合同", trigger: "change" },
    { type: 'number', message: "合同ID必须是数字", trigger: "change" }
  ],
  creditRatio: [
    { required: true, message: "请输入融资比例", trigger: "blur" },
    { type: 'number', min: 0.01, max: 100, message: "融资比例必须在0.01%到100%之间", trigger: "blur" }
  ],
  amount: [
    { required: true, message: "请输入融资金额", trigger: "blur" },
    { type: 'number', min: 0.01, message: "融资金额必须大于0", trigger: "blur" }
  ],
  issueDate: [
    { required: true, message: "请选择发行日期", trigger: "change" }
  ],
  maturityDate: [
    { required: true, message: "请选择到期日期", trigger: "change" }
  ],
  description: [
    { required: true, message: "请输入债权描述", trigger: "blur" },
    { min: 10, max: 500, message: "债权描述长度在10到500个字符", trigger: "blur" }
  ]
});

// 计算属性
const creditStatusDisplay = computed(() => {
  const statusMap = {
    'generated': '已生成',
    'active': '有效',
    'transferred': '已转让',
    'settled': '已结算',
    'expired': '已失效'
  };
  return statusMap[form.status] || '已生成';
});

const securityCompanyName = computed(() => {
  if (!selectedContractInfo.value.securityCompany) return '';
  return selectedContractInfo.value.securityCompany;
});

const clientCompanyName = computed(() => {
  if (!selectedContractInfo.value.clientCompany) return '';
  return selectedContractInfo.value.clientCompany;
});

const contractAmountDisplay = computed(() => {
  if (!selectedContractInfo.value.contractAmount && !maxCreditAmount.value) return '';
  const amount = selectedContractInfo.value.contractAmount || maxCreditAmount.value;
  return formatMoney(amount);
});

const servicePeriodDisplay = computed(() => {
  if (!form.servicePeriodStart || !form.servicePeriodEnd) return '';
  return `${form.servicePeriodStart} 至 ${form.servicePeriodEnd}`;
});


const creditRatioDisplay = computed(() => {
  if (!form.creditRatio) return '';
  return `${form.creditRatio}%`;
});

const canPreview = computed(() => {
  return form.contractId && (form.amount || form.creditRatio) && form.issueDate && form.maturityDate && form.description;
});

const canSubmit = computed(() => {
  return canPreview.value && form.amount <= maxCreditAmount.value;
});

// 方法
/** 获取部门列表 */
function getDeptList() {
  listDept({ status: 0 }).then(response => {
    deptList.value = response.data;
    // 创建部门ID到名称的映射
    const map = {};
    response.data.forEach(dept => {
      map[dept.deptId] = dept.deptName;
    });
    deptMap.value = map;
  });
}

/** 获取可用合同列表 */
function getContractList() {
  // 获取所有已确认的合同，不限制其他条件以便调试
  return listContracts({ 
    contractStatus: 'CONFIRMED'
  }).then(response => {
    contractOptions.value = response.rows || [];
    return response;
  }).catch(error => {
    proxy.$modal.msgError("获取合同列表失败");
    console.error(error);
    throw error;
  });
}

/** 合同选择变化处理 */
function handleContractChange(contractId) {
  
  if (!contractId) {
    selectedContractInfo.value = {};
    maxCreditAmount.value = 0;
    form.securityCompanyId = '';
    form.clientCompanyId = '';
    form.servicePeriodStart = '';
    form.servicePeriodEnd = '';
    return;
  }

  // 确保contractId是数字类型
  const numericContractId = Number(contractId);
  
  // 获取选中合同的详细信息
  getContract(numericContractId).then(response => {
    selectedContractInfo.value = response.data;
    maxCreditAmount.value = response.data.contractAmount || response.data.amount;
    
    // 设置公司ID（用于后端处理）
    form.securityCompanyId = response.data.securityCompanyId;
    form.clientCompanyId = response.data.clientCompanyId;
    
    // 自动填充服务周期信息
    if (response.data.startDate && response.data.endDate) {
      form.servicePeriodStart = response.data.startDate;
      form.servicePeriodEnd = response.data.endDate;
    }
    
    // 如果融资金额超过合同金额，重置融资金额和比例
    if (form.amount > maxCreditAmount.value) {
      form.amount = null;
      form.creditRatio = null;
    }
    
    // 设置默认融资比例为80%，并自动计算融资金额
    nextTick(() => {
      form.creditRatio = 80;
      handleCreditRatioChange(80);
    });
  }).catch(error => {
    proxy.$modal.msgError("获取合同详情失败");
    console.error('获取合同详情失败:', error);
  });
}

/** 融资比例变化处理 */
function handleCreditRatioChange(ratio) {
  if (ratio && selectedContractInfo.value.contractAmount) {
    // 根据比例自动计算融资金额
    const calculatedAmount = (selectedContractInfo.value.contractAmount * ratio / 100);
    form.amount = Math.round(calculatedAmount * 100) / 100; // 保留两位小数
  } else if (ratio && maxCreditAmount.value) {
    // 如果selectedContractInfo中没有contractAmount，使用maxCreditAmount
    const calculatedAmount = (maxCreditAmount.value * ratio / 100);
    form.amount = Math.round(calculatedAmount * 100) / 100; // 保留两位小数
  } else if (!ratio) {
    form.amount = null;
  }
}

/** 融资金额变化处理 */
function handleCreditAmountChange(amount) {
  if (amount && selectedContractInfo.value.contractAmount) {
    // 根据金额自动计算融资比例
    const calculatedRatio = (amount / selectedContractInfo.value.contractAmount * 100);
    form.creditRatio = Math.round(calculatedRatio * 100) / 100; // 保留两位小数
  } else if (amount && maxCreditAmount.value) {
    // 如果selectedContractInfo中没有contractAmount，使用maxCreditAmount
    const calculatedRatio = (amount / maxCreditAmount.value * 100);
    form.creditRatio = Math.round(calculatedRatio * 100) / 100; // 保留两位小数
  } else if (!amount) {
    form.creditRatio = null;
  }
}

/** 使用提供的合同数据填充表单 */
async function populateFormWithContractData() {
  // 优先从当前选中的合同获取ID
  let targetContractId = form.contractId;
  
  if (targetContractId) {
    try {
      loading.value = true;
      
      // 从API获取合同数据
      const response = await getContract(targetContractId);
      const contractData = response.data;
      
      // 填充合同信息到selectedContractInfo
      selectedContractInfo.value = {
        contractId: contractData.contractId,
        contractNumber: contractData.contractNumber,
        title: contractData.title,
        clientCompany: contractData.clientCompany,
        securityCompany: contractData.securityCompany,
        contractAmount: contractData.contractAmount,
        startDate: contractData.startDate,
        endDate: contractData.endDate,
        contractTerm: contractData.contractTerm,
        serviceContent: contractData.serviceContent,
        contractTerms: contractData.contractTerms,
        paymentDueDate: contractData.paymentDueDate
      };
      
      // 设置表单数据
      form.contractId = contractData.contractId;
      maxCreditAmount.value = contractData.contractAmount;
      form.servicePeriodStart = contractData.startDate;
      form.servicePeriodEnd = contractData.endDate;
      
      // 设置公司ID
      form.securityCompanyId = contractData.securityCompanyId;
      form.clientCompanyId = contractData.clientCompanyId;
      
      // 设置默认融资比例为80%，并自动计算融资金额
      // 使用 nextTick 确保数据已经设置完成
      nextTick(() => {
        form.creditRatio = 80;
        console.log('form.creditRatio')
        handleCreditRatioChange(80);
      });
      
      // 自动选择合同（如果合同列表中存在该合同）
      nextTick(() => {
        const contractExists = contractOptions.value.find(contract => 
          contract.contractId == targetContractId
        );
        if (contractExists) {
          form.contractId = parseInt(targetContractId);
        } else {
          // 如果合同列表中没有找到该合同，将当前合同添加到选项中
          const currentContract = {
            contractId: contractData.contractId,
            contractNumber: contractData.contractNumber,
            title: contractData.title
          };
          contractOptions.value.unshift(currentContract);
          form.contractId = contractData.contractId;
        }
      });
      
    } catch (error) {
      console.error('获取合同数据失败:', error);
      proxy.$modal.msgError("获取合同数据失败");
    } finally {
      loading.value = false;
    }
  }
}

/** 禁用发行日期 */
function disabledIssueDates(time) {
  // 发行日期不能早于今天
  return time.getTime() < Date.now() - 8.64e7;
}

/** 禁用到期日期 */
function disabledMaturityDates(time) {
  if (!form.issueDate) return false;
  // 到期日期不能早于发行日期
  return time.getTime() < new Date(form.issueDate).getTime();
}

/** 预览债权 */
function handlePreview() {
  proxy.$refs["creditRef"].validate(valid => {
    if (valid) {
      previewVisible.value = true;
    }
  });
}

/** 关闭预览 */
function handlePreviewClose() {
  previewVisible.value = false;
}

/** 确认生成 */
function confirmGenerate() {
  previewVisible.value = false;
  submitForm();
}

/** 提交表单 */
function submitForm() {
  proxy.$refs["creditRef"].validate(valid => {
    if (valid) {
      submitLoading.value = true;
      
      const submitData = {
        ...form,
        // 确保数值类型正确
        contractId: Number(form.contractId), // 确保contractId是数字类型
        creditAmount: Number(form.amount),
        creditRatio: Number(form.creditRatio)
        // 债权人和债务人信息会从合同中自动获取，不需要前端发送
      };

      // 验证必要字段
      if (!submitData.contractId) {
        proxy.$modal.msgError("请选择关联合同");
        submitLoading.value = false;
        return;
      }

      // 验证选中的合同是否存在于合同列表中
      const selectedContract = contractOptions.value.find(contract => 
        (contract.contractId == submitData.contractId) || (contract.id == submitData.contractId)
      );
      
      if (!selectedContract) {
        proxy.$modal.msgError("选择的合同不存在，请重新选择");
        submitLoading.value = false;
        return;
      }

      // 在提交前再次验证合同是否存在
      getContract(submitData.contractId).then(contractResponse => {
        
        // 合同存在，继续提交债权生成请求
        const submitPromise = isEditMode.value 
          ? updateCredit(submitData)
          : generateCredit(submitData);

        submitPromise.then(response => {
          proxy.$modal.msgSuccess(isEditMode.value ? "债权更新成功" : "债权生成成功");
          console.log(response)
          // 跳转到债权详情页面
          if (response.data && response.data.creditId) {
            router.push({ 
              path: '/credit/CreditDetail', 
              query: { id: response.data.creditId } 
            });
          } else {
            goBack();
          }
        }).catch(error => {
          proxy.$modal.msgError(isEditMode.value ? "债权更新失败" : "债权生成失败");
          console.error('债权生成失败:', error);
        }).finally(() => {
          submitLoading.value = false;
        });
        
      }).catch(contractError => {
        proxy.$modal.msgError("选择的合同不存在或已被删除，请重新选择");
        console.error('合同验证失败:', contractError);
        submitLoading.value = false;
      });
    }
  });
}

/** 返回列表 */
function goBack() {
  router.push({ path: '/credit/creditList' });
}

/** 格式化金额 */
function formatMoney(amount) {
  if (!amount) return '¥0.00';
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(amount);
}

/** 初始化编辑模式 */
function initEditMode() {
  const creditId = route.query.id;
  if (creditId) {
    isEditMode.value = true;
    loading.value = true;
    
    getCredit(creditId).then(response => {
      const creditData = response.data;
      
      // 填充表单数据
      Object.keys(form).forEach(key => {
        if (creditData.hasOwnProperty(key)) {
          form[key] = creditData[key];
        }
      });
      
      // 如果有合同ID，触发合同变化处理
      if (form.contractId) {
        handleContractChange(form.contractId);
      }
    }).catch(error => {
      proxy.$modal.msgError("获取债权信息失败");
      console.error(error);
    }).finally(() => {
      loading.value = false;
    });
  }
}

/** 初始化表单默认值 */
function initFormDefaults() {
  if (!isEditMode.value) {
    // 设置默认发行日期为今天
    form.issueDate = new Date().toISOString().split('T')[0];
    
    // 设置默认到期日期为一年后
    const nextYear = new Date();
    nextYear.setFullYear(nextYear.getFullYear() + 1);
    form.maturityDate = nextYear.toISOString().split('T')[0];
  }
}

// 生命周期
onMounted(async () => {
  getDeptList();
  await getContractList(); // 等待合同列表加载完成
  initEditMode();
  initFormDefaults();
  await populateFormWithContractData(); // 等待合同数据填充完成
});
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.form-actions {
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
  margin-top: 20px;
}

.preview-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 4px;
  margin: 20px 0;
}

.credit-preview {
  padding: 20px;
}

.preview-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 15px;
}

.preview-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
}

.credit-number {
  font-size: 16px;
  color: #606266;
  font-weight: bold;
}

.preview-content {
  margin: 20px 0;
}

.preview-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}

.preview-footer p {
  margin: 8px 0;
}

:deep(.el-descriptions__label) {
  font-weight: bold;
  color: #303133;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>