<template>
  <div class="p-2">
    <el-card>
      <!-- 新增顶部操作栏 -->
      <el-row>
        <el-col :span="1" style="margin-right: 10px;">
          <el-button type="primary" plain @click="close" >返回</el-button>           
        </el-col>         
        <el-col :span="22">           
          <span style="font-size: 14px; vertical-align: middle">{{ screeningName }}</span>
          <div style="font-size: 14px; vertical-align: middle">来源：{{ sourceName }}</div>          
        </el-col>
      </el-row>       
    </el-card>

    <el-card>
      <!-- 基本信息 -->
      <template v-if="form.baseInfo">
        <div style="margin-bottom: 10px; padding-top: 20px" class="zebra-row">
          <el-row>
            <el-col :span="24">
              <span style="color: #f56c6c; margin-right: 4px">*</span>
              <span style="font-weight: bold">{{ '1. ' + form.baseInfo.title }}</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 20px; margin-top: 8px">
            <el-col :span="24">
              <el-form :inline="true" label-width="100px">
                <template v-for="(ctl, n) in form.baseInfo.contentList">
                  <el-form-item :label="ctl.label">
                    <template v-if="ctl.nameEn == 'birthDate' || ctl.nameEn == 'admissionDate'">
                      <el-date-picker v-model="ctl.value" type="date" placeholder="请选择" :disabled="isView" />
                    </template>
                    <template v-else-if="ctl.nameEn == 'gender'">
                      <el-select v-model="ctl.value" placeholder="请选择" :disabled="isView">
                        <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
                      </el-select>
                    </template>
                    <template v-else>
                      <el-input clearable v-model="ctl.value" :disabled="isView" />
                    </template>
                  </el-form-item>
                </template>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- 基本信息 -->

      <template v-for="(item, idx) in form.otherInfo">
        <template v-if="item.questionChildType == 'singleChoice'">
          <template v-if="item.arrangement == '2'">
            <div style="margin-bottom: 20px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <div class="radio-card">
                    <el-radio-group v-model="item.value" style="margin-top: 8px">
                      <template v-for="(ctl, i) in item.contentList">
                        <el-radio :label="ctl.label" :value="i" :disabled="isView">
                          <span class="option-content">
                            <span v-if="ctl.img" class="option-img">
                              <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                            </span>
                            <span>{{ ctl.label }}</span>
                            <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                              <el-input v-model="ctl.value" clearable :disabled="isView" />
                            </span>
                          </span>
                        </el-radio>
                      </template>
                    </el-radio-group>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                  <el-radio-group v-model="item.value" class="horizontal-radio-group" style="margin-top: 8px">
                    <template v-for="(ctl, i) in item.contentList">
                      <el-radio :label="ctl.label" :value="i" :disabled="isView">
                        <span class="option-content">
                          <span v-if="ctl.img" class="option-img">
                            <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                          </span>
                          <span>{{ ctl.label }}</span>
                          <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                            <el-input v-model="ctl.value" clearable :disabled="isView" />
                          </span>
                        </span>
                      </el-radio>
                    </template>
                  </el-radio-group>
                </el-col>
              </el-row>
            </div>
          </template>
        </template>
        <template v-if="item.questionChildType == 'multipleChoice'">
          <template v-if="item.arrangement == '2'">
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px">
                <el-col :span="24">
                  <div class="checkbox-vertical-card">
                    <el-checkbox-group v-model="item.value" style="margin-top: 8px">
                      <template v-for="(ctl, i) in item.contentList">
                        <el-checkbox :label="ctl.label" :value="i" :disabled="isView">
                          <span class="option-content">
                            <span v-if="ctl.img" class="option-img">
                              <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                            </span>
                            <span>{{ ctl.label }}</span>
                            <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                              <el-input v-model="ctl.value" clearable :disabled="isView" />
                            </span>
                          </span>
                        </el-checkbox>
                      </template>
                    </el-checkbox-group>
                  </div>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                  <el-checkbox-group v-model="item.value" class="horizontal-checkbox-group" style="margin-top: 8px">
                    <template v-for="(ctl, i) in item.contentList">
                      <el-checkbox :label="ctl.label" :value="i" :disabled="isView">
                        <span class="option-content">
                          <span v-if="ctl.img" class="option-img">
                            <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                          </span>
                          <span>{{ ctl.label }}</span>
                          <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                            <el-input v-model="ctl.value" clearable :disabled="isView" />
                          </span>
                        </span>
                      </el-checkbox>
                    </template>
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
          </template>
        </template>

        <template v-if="item.questionChildType == 'fillBlanks'">
          <template v-if="item.arrangement == '2'">
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px; margin-top: 8px">
                <el-col :span="8">
                  <el-form label-width="100px">
                    <template v-for="(ctl, n) in item.contentList">
                      <el-form-item :label="ctl.label">
                        <el-input clearable v-model="ctl.value" :disabled="isView" />
                        <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" v-if="ctl.img" />
                      </el-form-item>
                    </template>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px; margin-top: 8px">
                <el-col :span="24">
                  <el-form :inline="true" label-width="100px">
                    <template v-for="(ctl, n) in item.contentList">
                      <el-form-item :label="ctl.label">
                        <el-input clearable v-model="ctl.value" :disabled="isView" />
                        <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" v-if="ctl.img" />
                      </el-form-item>
                    </template>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </template>
        </template>

        <template v-if="item.questionChildType == 'scaleQuestions'">
          <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
            <el-row>
              <el-col :span="24">
                <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                <span style="font-weight: bold">{{
                  idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                }}</span>
                <div style="overflow-x: scroll; margin-top: 8px; margin-left: 30px">
                  <div class="custom-radio-grid">
                    <div
                      v-for="(ctl, n) in item.contentList"
                      :key="n"
                      @click="selectScaleQuestions(idx, n)"
                      :class="[
                        'custom-radio-cell',
                        {'my-selected': ctl.value != null, 'cell': item.contentList.length === n + 1, 'is-last': n + 1 > 1}
                      ]"
                    >
                      {{ n + 1 }}
                    </div>
                  </div>

                  <div class="custom-radio-grid">
                    <div v-for="(ctl, n) in item.contentList" :key="ctl.nameEn" style="border: none" :class="['custom-radio-cell']">
                      {{ ctl.label }}
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>

        <template v-if="item.questionChildType == 'matrixScale'">
          <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
            <el-row>
              <el-col :span="24">
                <span style="color: #f56c6c; margin-right: 4px" v-show="item.required">*</span>
                <span style="font-weight: bold">{{
                  idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                }}</span>
                <div style="border-bottom: 1px solid #e5e7eb; width: 98%; margin-left: 30px">
                  <el-row :gutter="10" class="mb8">
                    <el-col :span="3" style="margin-top: 30px"> </el-col>
                    <template v-for="clt in item.contentList">
                      <template v-if="clt.optionFlag">
                        <el-col :span="1" align="center" style="margin-top: 30px; margin-left: 15px">
                          {{ clt.optionContent }}
                        </el-col>
                      </template>
                    </template>
                  </el-row>

                  <template v-for="(clt, i1) in item.contentList">
                    <el-row :gutter="10" class="mb8">
                      <el-col :span="3" style="margin-top: 10px">
                        <template v-if="clt.labelFlag"> 标题{{ i1 + 1 }}:{{ clt.label }} </template>
                      </el-col>
                      <template v-for="(clt2, i2) in item.contentList">
                        <el-col :span="1" align="center" style="margin-left: 15px" v-if="clt2.optionFlag && clt.labelFlag">
                          <el-radio-group v-model="clt.value" :disabled="isView">
                            <el-radio :value="(i1 + 1) * 1000 + i2" size="large" />
                          </el-radio-group>
                        </el-col>
                      </template>
                      <el-col :span="3" style="margin-top: 10px">
                        <span v-if="clt.allowFillBlank">
                          <el-input v-model="clt.matrixFillBlank" clearable :disabled="isView" />
                        </span>
                      </el-col>
                    </el-row>
                  </template>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>

        <!-- 其他：人体测量、膳食状况、营养生化检查 -->
        <template v-if="item.questionChildType == 'anthropometry'">
          <template v-if="item.lastType == '1' || item.lastType == '3'">
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px; margin-top: 8px">
                <el-col :span="24">
                  <el-form :inline="true" label-width="120px">
                    <template v-for="(ctl, n) in item.contentList">
                      <el-form-item :label="ctl.label">
                        <el-input clearable v-model="ctl.value" :disabled="isView" />
                      </el-form-item>
                    </template>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                  <el-radio-group v-model="item.value" class="horizontal-radio-group" style="margin-top: 8px">
                    <template v-for="(ctl, i) in item.contentList">
                      <el-radio :label="ctl.label" :value="i" :disabled="isView">
                        <span class="option-content">
                          <span v-if="ctl.img" class="option-img">
                            <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                          </span>
                          <span>{{ ctl.label }}</span>
                          <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                            <el-input v-model="ctl.value" clearable :disabled="isView" />
                          </span>
                        </span>
                      </el-radio>
                    </template>
                  </el-radio-group>
                </el-col>
              </el-row>
            </div>
          </template>
        </template>

        <template v-if="item.questionChildType == 'dietaryStatus'">
          <template v-if="item.lastType != '2'">
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 20px; margin-top: 8px">
                <el-col :span="24">
                  <el-form :inline="true" label-width="120px">
                    <template v-for="(ctl, n) in item.contentList">
                      <el-form-item :label="ctl.label">
                        <el-input clearable v-model="ctl.value" :disabled="isView" />
                      </el-form-item>
                    </template>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </template>
          <template v-else>
            <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
              <el-row>
                <el-col :span="24">
                  <span style="color: #f56c6c; margin-right: 4px">*</span>
                  <span style="font-weight: bold">{{
                    idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                  }}</span>
                  <el-radio-group v-model="item.value" class="horizontal-radio-group" style="margin-top: 8px">
                    <template v-for="(ctl, i) in item.contentList">
                      <el-radio :label="ctl.label" :value="i" :disabled="isView">
                        <span class="option-content">
                          <span v-if="ctl.img" class="option-img">
                            <miniImageUpload :limit="1" v-model="ctl.img" :disabled="true" />
                          </span>
                          <span>{{ ctl.label }}</span>
                          <span v-if="ctl.allowFillBlank" style="margin-left: 10px">
                            <el-input v-model="ctl.value" clearable :disabled="isView" />
                          </span>
                        </span>
                      </el-radio>
                    </template>
                  </el-radio-group>
                </el-col>
              </el-row>
            </div>
          </template>
        </template>

        <template v-if="item.questionChildType == 'nutritionalBiochemical'">
          <div style="margin-bottom: 10px; padding-top: 20px" :style="{'border-top': idx == 0 ? 'none' : '1px dashed #e5e7eb'}" class="zebra-row">
            <el-row>
              <el-col :span="24">
                <span style="color: #f56c6c; margin-right: 4px">*</span>
                <span style="font-weight: bold">{{
                  idx + 1 + (form.baseInfo && form.baseInfo.contentList && form.baseInfo.contentList.length > 0 ? 1 : 0) + '. ' + item.title
                }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px; margin-top: 8px">
              <el-col :span="24">
                <el-form :inline="true" label-width="120px">
                  <el-form-item :label="item.title">
                    <el-input clearable v-model="item.value" :disabled="isView" />
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </template>
        <!-- 其他：人体测量、膳食状况、营养生化检查 -->
      </template>
    </el-card>

    <el-card shadow="always" class="card-footer" v-if="!isView">
      <div>
        <el-button type="primary" size="large" @click="submitForm" :loading="buttonLoading" v-hasPermi="['system:hospital:add']">
          &nbsp;&nbsp;&nbsp;提交&nbsp;&nbsp;&nbsp;
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="Screening" lang="ts">
import {listScreening, getScreening, delScreening, addScreening, updateScreening} from '@/api/patients/screening';
import {ScreeningVO, ScreeningQuery, ScreeningForm} from '@/api/patients/screening/types';
import {getScreeningAssessmentConfig} from '@/api/system/screeningAssessmentConfig';
import {ScreeningAssessmentConfigForm} from '@/api/system/screeningAssessmentConfig/types';
import {ref} from 'vue';
let paramForm = ref<ScreeningForm>({});

const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const {sys_user_sex} = toRefs<any>(proxy?.useDict('sys_user_sex'));

const screeningName = ref('');
const sourceName = ref('');
const {patientInfo} = defineProps<{patientInfo: any}>();
const emit = defineEmits(['change']);
let form = ref<ScreeningAssessmentConfigForm>({});
const buttonLoading = ref(false);
let isView = ref(false);

/** 查询营养筛查列表 */
const getList = async () => {
  let id = patientInfo.other;
  let reg = /^[0-9]*$/;

  if (!reg.test(id.toString())) {
    id = window.atob(id);
    isView.value = true;
    const res = await getScreening(id as string);
    const content = JSON.parse(res.data.content);
    screeningName.value = content.name; 
    sourceName.value = content.source;
    Object.assign(form.value, content);
  } else {
    isView.value = false;
    const res = await getScreeningAssessmentConfig(id as string);
    screeningName.value = res.data.name; 
    sourceName.value = res.data.source;
    Object.assign(form.value, res.data);
  }
};

const close = async () => {
  emit('change', 'nutritionScreening');
};

/** 提交按钮 */
const submitForm = async () => {
  if (form.value.baseInfo) {
    for (let i = 0, len = form.value.baseInfo.contentList.length; i < len; i++) {
      let item = form.value.baseInfo.contentList[i];
      if (item.value == null || item.value == undefined) {
        proxy?.$modal.msgError(item.label + '不为空');
        return;
      }
    }
  }

  if (form.value.otherInfo) {
    for (let i = 0, len = form.value.otherInfo.length; i < len; i++) {
      let item = form.value.otherInfo[i];
      if (item.questionType == 'otherInfo') {
        if (item.questionChildType == 'anthropometry') {
          if (item.lastType == '1' || item.lastType == '3') {
            for (let k = 0, len = item.contentList.length; k < len; k++) {
              if (item.contentList[k].value == null || item.contentList[k].value == undefined) {
                proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)[' + item.contentList[k].label + ']不为空');
                return;
              }
            }
          } else if (item.value == null || item.value == undefined) {
            proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)不为空');
            return;
          }
        } else if (item.questionChildType == 'dietaryStatus') {
          if (item.lastType != '2') {
            for (let k = 0, len = item.contentList.length; k < len; k++) {
              if (item.contentList[k].value == null || item.contentList[k].value == undefined) {
                proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)[' + item.contentList[k].label + ']不为空');
                return;
              }
            }
          } else if (item.value == null || item.value == undefined) {
            proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)不为空');
            return;
          }
        } else {
          if (item.value == null || item.value == undefined) {
            proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)不为空');
            return;
          }
        }
      } else {
        if (item.required && (item.value == null || item.value == undefined)) {
          proxy?.$modal.msgError('请确保必填项(第' + (i + 1 + (form.value.baseInfo ? 1 : 0)) + '题)不为空');
          return;
        }
      }
    }
  }

  buttonLoading.value = true;
  paramForm.value.content =window.btoa(encodeURI(JSON.stringify(form.value))) ;  
  if (paramForm.value.id) {
    await updateScreening(paramForm.value).finally(() => (buttonLoading.value = false));
  } else {
    await addScreening(paramForm.value).finally(() => (buttonLoading.value = false));
  }
  proxy?.$modal.msgSuccess('操作成功');
  close();
};

const selectScaleQuestions = async (idx: number, n: number) => {
  if (isView.value) {
    return;
  }
  let other = form.value.otherInfo[idx];
  if (!other.value) {
    other.value = [];
  }

  let ctl = other.contentList[n];
  if (ctl.value != null) {
    ctl.value = null;
    let newList = [];
    for (let i = 0, len = other.value.length; i < len; i++) {
      if (other.value[i] != n) {
        newList.push(other.value[i]);
      }
    }
    other.value = newList;
  } else {
    ctl.value = n;
    other.value.push(n);
  }
};

onMounted(() => {
  paramForm.value.patientId = patientInfo.id;
  paramForm.value.patientNo = patientInfo.outpatientNo;
  paramForm.value.visitType = patientInfo.type;
  paramForm.value.configId = patientInfo.other;
  getList();
});
</script>

<style scoped>
.screening-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.screening-type-btn {
  font-weight: bold;
  font-size: 16px;
  height: 48px;
  border-radius: 8px;
}
.radio-card {
  display: inline-block;
}
.radio-card .el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.radio-card .el-radio {
  margin-bottom: 3px;
  margin-left: 30px;
}
.radio-card el-radio:last-child {
  margin-bottom: 0;
}
.horizontal-radio-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 16px;
}
.horizontal-radio-group .el-radio {
  margin-right: 32px;
  margin-bottom: 0;
  margin-left: 14px;
}
.horizontal-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 30px;
}
.horizontal-checkbox-group .el-checkbox {
  margin-right: 32px;
  margin-bottom: 8px;
}
.checkbox-vertical-card .el-checkbox-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.checkbox-vertical-card .el-checkbox {
  margin-bottom: 10px;
  margin-left: 30px;
}
.checkbox-vertical-card .el-checkbox:last-child {
  margin-bottom: 0;
}

/* 斑马色：偶数题背景色 */
.zebra-row:nth-child(even) {
  background: #fafafa;
}

/* 斑马色：奇数题背景色 */
.zebra-row:nth-child(odd) {
  background: #fff;
}

.card-footer {
  z-index: 99;
  bottom: 0px;
  left: calc(var(--left-menu-max-width) + var(--app-content-padding));
  right: 0px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-radio-grid {
  display: flex;
  /* border: 1px solid #bfc4cc; */
  border-radius: 4px;
  background: #fff;
  margin-bottom: 16px;
}

.custom-radio-cell {
  width: 100px;
  flex: none;
  text-align: center;
  border: 1px solid #bfc4cc;
  margin: 0 !important;
  height: 40px;
  line-height: 20px;
  font-size: 18px;
  font-weight: normal;
  background: #fff;
  border-radius: 0 !important;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  word-break: break-all;
  white-space: normal;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.custom-radio-cell:last-child {
  border-right: none;
}

.custom-radio-cell .el-radio__input {
  display: none !important;
}

.custom-radio-cell .el-radio__label {
  padding: 0;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
}

.custom-radio-cell .cell {
  border-right: 1px solid #bfc4cc;
}

.my-selected {
  background-color: #ccf0a4; /* Element Plus 主色 */
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  transition:
    background 0.2s,
    color 0.2s,
    border 0.2s;
}

.custom-radio-cell.is-last {
  border-right: 1px solid #bfc4cc;
  border-left: none;
}
</style>
