kyj-yanglao-web-new/src/views/elderly/apply/nine-precautions/wander-away/AddForm.vue

<template>
  <el-drawer v-model="dialogVisible" :title="title" size="90%" :before-close="handleClosed">
    <div class="assessment-form">
      <div class="form-header">
        <el-form :model="dataForm" :rules="rules" ref="formRef" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="姓名" prop="elderName">
                <SelectElder
                    ref="selectElderRef" :tenantId="dataForm.tenantId" @up="elderUp" :disabled="isDetail"
                  :elderName="dataForm.elderName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年龄">
                <el-input v-model="dataForm.elderAge" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别">
                <el-input v-model="dataForm.elderSex" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房号/床号">
                <el-input v-model="dataForm.bedName" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 危险因素评估表 -->
      <div class="risk-factors-section">
        <div class="section-title">危险因素评估</div>
        <table class="assessment-table">
          <thead>
            <tr>
              <th class="col-category">评估项目</th>
              <th class="col-item">具体项目</th>
              <th class="col-option">选项</th>
              <th class="col-score">分值</th>
              <th class="col-result">得分</th>
            </tr>
          </thead>
          <tbody>
            <!-- 基本资料 - 年龄 -->
            <tr>
              <td class="col-category" rowspan="3">基本资料</td>
              <td class="col-item">年龄</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[0]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">≥60岁</el-radio>
                  <el-radio :label="0">≤60岁</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[0] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[0] }}</td>
            </tr>

            <!-- 基本资料 - 性别 -->
            <tr>
              <td class="col-item">性别</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[1]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">男性</el-radio>
                  <el-radio :label="0">女性</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[1] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[1] }}</td>
            </tr>

            <!-- 基本资料 - 文化程度 -->
            <tr>
              <td class="col-item">文化程度</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[2]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="0">受过高等教育</el-radio>
                  <el-radio :label="1">未受高等教育</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[2] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[2] }}</td>
            </tr>

            <!-- 走失既往史 -->
            <tr>
              <td class="col-category">走失既往史</td>
              <td class="col-item">有无走失过现象</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[3]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[3] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[3] }}</td>
            </tr>

            <!-- 意识状态 -->
            <tr>
              <td class="col-category">意识状态</td>
              <td class="col-item">意识障碍</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[4]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[4] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[4] }}</td>
            </tr>

            <!-- 心理状态 -->
            <tr>
              <td class="col-category">心理状态</td>
              <td class="col-item">情绪低落、焦虑抑郁等</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[5]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[5] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[5] }}</td>
            </tr>

            <!-- 疾病史 - 心脑血管 -->
            <tr>
              <td class="col-category" rowspan="5">疾病史</td>
              <td class="col-item">心脑血管（脑出血、脑梗塞、脑萎缩等）</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[6]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[6] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[6] }}</td>
            </tr>

            <!-- 疾病史 - 术后认知障碍 -->
            <tr>
              <td class="col-item">术后认知障碍</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[7]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[7] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[7] }}</td>
            </tr>

            <!-- 疾病史 - 定向力障碍 -->
            <tr>
              <td class="col-item">定向力障碍脑炎、肝性脑病、酒精性脑病</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[8]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[8] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[8] }}</td>
            </tr>

            <!-- 疾病史 - 记忆力障碍 -->
            <tr>
              <td class="col-item">记忆力或认知功能障碍（智障、老年痴呆等）</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[9]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[9] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[9] }}</td>
            </tr>

            <!-- 疾病史 - 精神行为异常 -->
            <tr>
              <td class="col-item">有精神行为异常（精神分裂、抑郁等）</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[10]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[10] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[10] }}</td>
            </tr>

            <!-- 药物影响认知 - 抗抑郁药 -->
            <tr>
              <td class="col-category" rowspan="3">药物影响认知</td>
              <td class="col-item">抗抑郁药</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[11]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[11] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[11] }}</td>
            </tr>

            <!-- 药物影响认知 - 抗癫痫药 -->
            <tr>
              <td class="col-item">抗癫痫药</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[12]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[12] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[12] }}</td>
            </tr>

            <!-- 药物影响认知 - 心脏病药 -->
            <tr>
              <td class="col-item">心脏病药</td>
              <td class="col-option">
                <el-radio-group v-model="form.assessment.scores[13]" :disabled="isDetail" @change="calculateTotal">
                  <el-radio :label="1">有</el-radio>
                  <el-radio :label="0">无</el-radio>
                </el-radio-group>
              </td>
              <td class="col-score">
                <span v-if="form.assessment.scores[13] === 1">1</span>
                <span v-else>0</span>
              </td>
              <td class="col-result">{{ form.assessment.scores[13] }}</td>
            </tr>
          </tbody>
        </table>

        <!-- 风险程度判断 -->
        <div class="risk-judgment">
          <span class="judgment-title">风险程度判断：</span>
          <el-radio-group v-model="form.riskLevel" :disabled="isDetail">
            <el-radio label="none">无风险：0-3分</el-radio>
            <el-radio label="low">低风险：4分</el-radio>
            <el-radio label="medium">中风险：5-6分</el-radio>
            <el-radio label="high">高风险：≥7分</el-radio>
          </el-radio-group>
        </div>
      </div>

      <!-- 评估记录 -->
      <div class="assessment-records">
        <div class="record-section">
          <div class="record-header">评估记录</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="评估日期：" label-width="90px">
                <el-date-picker
                  v-model="form.assessment.assessDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD"
                  :disabled="isDetail"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评估人签名：" label-width="100px">
                <el-input v-model="form.assessment.assessor" :disabled="isDetail" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评估总得分：" label-width="100px">
                <span class="score-text">{{ form.assessment.totalScore }} 分</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="风险等级结果：" label-width="100px">
                <el-tag :type="getRiskTagType(form.riskLevel)">
                  {{ getRiskText(form.riskLevel) }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 预防措施 -->
      <div class="prevention-section">
        <div class="section-title">预防措施：</div>
        <el-checkbox-group v-model="form.preventionMeasures" :disabled="isDetail" class="prevention-group">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-checkbox label="重点观察，加强巡视">重点观察，加强巡视</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-checkbox label="严格加强交班制度，重点床头交接清点人数">严格加强交班制度，重点床头交接清点人数</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-checkbox label="在老人房间门口坐特殊、容易记忆的标识，便于老人的辨认">在老人房间门口坐特殊、容易记忆的标识，便于老人的辨认</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-checkbox label="定期了解长者心理变化，对情绪或活动异常的长者加强观察，主动沟通，尽量满足合理要求，避免外出">定期了解长者心理变化，对情绪或活动异常的长者加强观察，主动沟通，尽量满足合理要求，避免外出</el-checkbox>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-checkbox label="失智长者需在家属陪同下并填写请假单后方可外出">失智长者需在家属陪同下并填写请假单后方可外出</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </div>

      <!-- 提交参数字段说明 -->
      <div class="api-params-section">
        <div class="section-title">接口参数说明</div>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="接口地址">POST /elderly-assess-wander-away/create 或 PUT /elderly-assess-wander-away/update</el-descriptions-item>
          <el-descriptions-item label="id">记录ID（更新时必填）</el-descriptions-item>
          <el-descriptions-item label="elderId">长者ID（必填）</el-descriptions-item>
          <el-descriptions-item label="tenantId">机构ID（必填）</el-descriptions-item>
          <el-descriptions-item label="elderName">长者姓名</el-descriptions-item>
          <el-descriptions-item label="elderSex">长者性别</el-descriptions-item>
          <el-descriptions-item label="elderAge">长者年龄</el-descriptions-item>
          <el-descriptions-item label="bedName">房号/床号</el-descriptions-item>
          <el-descriptions-item label="assessData">
            JSON字符串，包含：<br/>
            - assessment: 评估记录 {assessDate, assessor, scores[], totalScore}<br/>
            - preventionMeasures: 预防措施选项数组<br/>
            - riskLevel: 风险等级（none/low/medium/high）
          </el-descriptions-item>
          <el-descriptions-item label="assessor">评估人（）</el-descriptions-item>
          <el-descriptions-item label="assessDate">评估日期（YYYY-MM-DD）</el-descriptions-item>
        </el-descriptions>

        <div class="risk-rules">
          <div class="rules-title">风险等级规则：</div>
          <el-tag type="success" class="rule-tag">0-3分：无风险</el-tag>
          <el-tag type="info" class="rule-tag">4分：低风险</el-tag>
          <el-tag type="warning" class="rule-tag">5-6分：中风险</el-tag>
          <el-tag type="danger" class="rule-tag">≥7分：高风险</el-tag>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClosed">关闭</el-button>
      <el-button v-if="isDetail" type="success" @click="handleExport">打印</el-button>
      <el-button style="margin-left: 22px;margin-right: 30px" v-loading="formLoading" type="primary"
        v-show="!isDetail" @click="submitForm">确定</el-button>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import dayjs from 'dayjs'
import {
  wanderAwayCreate,
  wanderAwayGetById,
  wanderAwayUpdate,
} from "@/api/social-work";

const message = useMessage()
const { t } = useI18n()
const title = ref('')
const dialogVisible = ref(false)
const formRef = ref()
const selectElderRef = ref()
const isDetail = ref(false)
const formLoading = ref(false)

let dataForm = ref({
  id: undefined,
  elderName: '',
  elderSex: '',
  elderAge: '',
  bedName: '',
  elderId: '',
  tenantId: undefined
})

const elderUp = (e: any) => {
  dataForm.value.elderName = e.elderName
  dataForm.value.elderId = e.id
  dataForm.value.elderSex = e.elderSex === 1 ? '男' : '女'
  dataForm.value.bedName = e.bedName || ''
  dataForm.value.elderAge = e.elderAge
}

// 表单数据 - 14项评估
const form = reactive({
  assessment: {
    assessDate: '',
    assessor: '',
    scores: new Array(14).fill(0),
    totalScore: 0
  },
  preventionMeasures: [],
  riskLevel: ''
})

// 计算总得分
const calculateTotal = () => {
  const scores = form.assessment.scores
  const total = scores.reduce((sum, score) => sum + (score || 0), 0)
  form.assessment.totalScore = total

  // 自动判断风险等级（更新中风险范围为5-6分）
  if (total <= 3) {
    form.riskLevel = 'none'
  } else if (total === 4) {
    form.riskLevel = 'low'
  } else if (total >= 5 && total <= 6) {
    form.riskLevel = 'medium'
  } else if (total >= 7) {
    form.riskLevel = 'high'
  }
}

// 获取风险等级文本
const getRiskText = (riskLevel: string) => {
  switch (riskLevel) {
    case 'none': return '无风险'
    case 'low': return '低风险'
    case 'medium': return '中风险'
    case 'high': return '高风险'
    default: return '-'
  }
}

// 获取风险等级标签类型
const getRiskTagType = (riskLevel: string) => {
  switch (riskLevel) {
    case 'none': return 'success'
    case 'low': return 'info'
    case 'medium': return 'warning'
    case 'high': return 'danger'
    default: return ''
  }
}

/** 将表单数据序列化为 JSON 对象 */
const serializeFormData = () => {
  return {
    assessment: {
      assessDate: form.assessment.assessDate ? dayjs(form.assessment.assessDate).format('YYYY-MM-DD') : '',
      assessor: form.assessment.assessor || '',
      scores: form.assessment.scores || [],
      totalScore: form.assessment.totalScore || 0
    },
    preventionMeasures: form.preventionMeasures || [],
    riskLevel: form.riskLevel || ''
  }
}

/** 将 JSON 对象反序列化为表单数据 */
const deserializeFormData = (formData: Record<string, any>) => {
  if (!formData) return

  if (formData.assessment) {
    form.assessment.assessDate = formData.assessment.assessDate ? dayjs(formData.assessment.assessDate).toDate() : ''
    form.assessment.assessor = formData.assessment.assessor || ''
    form.assessment.scores = formData.assessment.scores || new Array(14).fill(0)
    form.assessment.totalScore = formData.assessment.totalScore || 0
  }
  form.preventionMeasures = formData.preventionMeasures || []
  form.riskLevel = formData.riskLevel || ''
}

/** 重置表单数据 */
const resetForm = () => {
  dataForm.value = {
    id: undefined,
    elderName: '',
    elderSex: '',
    elderAge: '',
    bedName: '',
    elderId: '',
    tenantId: undefined
  }
  formRef.value?.resetFields()

  form.assessment = {
    assessDate: '',
    assessor: '',
    scores: new Array(14).fill(0),
    totalScore: 0
  }
  form.preventionMeasures = []
  form.riskLevel = ''
}

/** 打开弹窗 */
const open = async (tenantId: any, id?: any, detail: boolean = false) => {
  resetForm()
  dialogVisible.value = true
  dataForm.value.id = id || undefined
  dataForm.value.tenantId = tenantId
  isDetail.value = detail
  if (id) {
    title.value = "编辑-防走失风险评估表"
    await loadData(id)
  } else {
    title.value = "新增-防走失风险评估表"
  }
}

/** 加载评估数据 */
const loadData = async (id: number) => {
  try {
    const res = await wanderAwayGetById(id)
    if (res) {
      dataForm.value.elderName = res.elderName || ''
      dataForm.value.elderId = res.elderId || ''
      dataForm.value.elderSex = res.elderSex || ''
      dataForm.value.bedName = res.bedName || ''
      dataForm.value.elderAge = res.elderAge || ''
      await selectElderRef.value.upData(res.elderName, res.elderId)
      if (res.assessData) {
        const formData = JSON.parse(res.assessData)
        deserializeFormData(formData)
      }
    }
  } catch (error) {
    message.error('加载评估数据失败')
  }
}

defineExpose({ open })

const emit = defineEmits(['success'])

/** 提交表单 */
const submitForm = async () => {
  if (!dataForm.value.elderId) {
    message.error('请选择长者')
    return
  }

  formLoading.value = true
  try {
    const formData = serializeFormData()
    const payload = {
      id: dataForm.value.id,
      elderId: dataForm.value.elderId,
      tenantId: dataForm.value.tenantId,
      elderName: dataForm.value.elderName,
      elderSex: dataForm.value.elderSex,
      elderAge: dataForm.value.elderAge,
      bedName: dataForm.value.bedName,
      assessData: JSON.stringify(formData),
      riskLevel: form.riskLevel,
      assessor: form.assessment.assessor,
      assessDate: form.assessment.assessDate ? dayjs(form.assessment.assessDate).format('YYYY-MM-DD') : ''
    }

    if (dataForm.value.id) {
      await wanderAwayUpdate(payload)
      message.success(t('common.updateSuccess'))
    } else {
      await wanderAwayCreate(payload)
      message.success(t('common.createSuccess'))
    }
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    message.error('提交失败')
  } finally {
    formLoading.value = false
  }
}

/** 关闭弹窗 */
const handleClosed = () => {
  dialogVisible.value = false
}

/** 导出/打印 */
const handleExport = () => {
  message.info('打印功能开发中')
}

const rules = {
  elderName: [{ required: true, message: '请选择长者', trigger: 'change' }]
}
</script>

<style scoped lang="scss">
.assessment-form {
  padding: 0 20px;

  .form-header {
    margin-bottom: 20px;
  }

  .risk-factors-section {
    margin-bottom: 20px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
      border-left: 4px solid #409eff;
      padding-left: 10px;
    }

    .assessment-table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      overflow: hidden;

      thead {
        background-color: #f5f7fa;
        font-weight: bold;

        th {
          padding: 12px;
          border: 1px solid #e4e7ed;
          text-align: center;
          font-weight: bold;
        }
      }

      tbody {
        td {
          padding: 12px;
          border: 1px solid #e4e7ed;
          vertical-align: middle;
        }
      }

      .col-category {
        width: 12%;
        text-align: center;
        font-weight: bold;
        background-color: #fafafa;
      }

      .col-item {
        width: 30%;
        text-align: left;
      }

      .col-option {
        width: 30%;
        text-align: left;

        .el-radio-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
      }

      .col-score {
        width: 14%;
        text-align: center;
      }

      .col-result {
        width: 14%;
        text-align: center;
        font-weight: bold;
        color: #409eff;
      }
    }

    .risk-judgment {
      margin-top: 15px;
      padding: 15px;
      background-color: #f5f7fa;
      border-radius: 4px;

      .judgment-title {
        font-weight: bold;
        margin-right: 15px;
      }
    }
  }

  .assessment-records {
    margin-top: 20px;

    .record-section {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;

      .record-header {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #409eff;
        border-bottom: 1px solid #e4e7ed;
        padding-bottom: 10px;
      }

      .score-text {
        font-size: 16px;
        font-weight: bold;
        color: #409eff;
      }
    }
  }

  .prevention-section {
    margin-top: 20px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
      border-left: 4px solid #409eff;
      padding-left: 10px;
    }

    .prevention-group {
      .el-checkbox {
        margin-bottom: 10px;
        margin-right: 20px;
      }
    }
  }

  .api-params-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 4px;

    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #333;
      border-left: 4px solid #67c23a;
      padding-left: 10px;
    }

    .risk-rules {
      margin-top: 15px;
      padding: 10px;
      background-color: #fff;
      border-radius: 4px;

      .rules-title {
        font-weight: bold;
        margin-bottom: 10px;
        color: #606266;
      }

      .rule-tag {
        margin-right: 10px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>