wkx-his-web/src/views/system/screeningAssessmentConfig/add.vue

<template>
  <div class="p-2">
    <!-- 新增顶部操作栏 -->
    <el-row type="flex" align="middle" justify="space-between" style="margin-bottom: 16px;">
      <el-col :span="4">
        <el-button type="primary" plain @click="close" style="margin-right: 20px;margin-left: 30px;">返回</el-button>
        <span style="font-size: 14px;  vertical-align: middle;">新增量表</span>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <!-- <el-button type="primary" plain @click="handlePreview" style="margin-right: 8px;">预览</el-button> -->
        <el-button type="primary" @click="submitForm" style="margin-right: 30px;">保存</el-button>
      </el-col>
    </el-row>

    <el-container class="layout-container-demo" style="height: 100vh; min-height: 100vh;">
      <el-aside id="leftPanel"
        style="background:transparent; width: 450px; min-width: 300px; max-width: 500px; flex: 0 0 auto; border-right: 2px solid #e4e7ed;">
        <div style="background:#f6f9fc; border-radius:4px; margin-bottom: 16px; padding: 16px 0;">
          <div style="font-weight:bold; font-size:16px; padding:0 24px 8px 24px; cursor:pointer;"
            @click="showSystemParam = !showSystemParam">
            系统参数
            <i class="el-icon-arrow-down" :style="{
              float: 'right',
              transition: 'transform 0.2s',
              transform: showSystemParam ? 'rotate(0deg)' : 'rotate(-90deg)'
            }"></i>
          </div>
          <div v-show="showSystemParam" style="padding: 16px 16px 0 16px;">
            <div style="font-weight: bold; margin-bottom: 8px;">基本信息</div>
            <el-row :gutter="20" style="margin-bottom: 24px;">
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('gender', '性别')">性别</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('birthDate', '出生日期')">出生日期</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('height', '身高')">身高</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('weight', '体重')">体重</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('BMI', 'BMI')">BMI</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain
                  @click="handleBaseBtnClick('nutritionalDiagnosis', '营养诊断')">营养诊断</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain @click="handleBaseBtnClick('admissionDate', '入院日期')">入院日期</el-button>
              </el-col>
            </el-row>
            <div style="font-weight: bold; margin-bottom: 8px;">其他</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-button class="param-btn" plain
                  @click="handleOtherBtnClick('otherInfo', 'anthropometry', '人体测量')">人体测量</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain
                  @click="handleOtherBtnClick('otherInfo', 'dietaryStatus', '膳食状况')">膳食状况</el-button>
              </el-col>
              <el-col :span="8">
                <el-button class="param-btn" plain
                  @click="handleOtherBtnClick('otherInfo', 'nutritionalBiochemical', '营养生化检查')">营养生化检查</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <div style="background:#f6f9fc; border-radius:4px; margin-bottom: 16px; padding: 16px 0;">
          <div style="font-weight:bold; font-size:16px; padding:0 24px 8px 24px; cursor:pointer;"
            @click="showQuestionType = !showQuestionType">
            题型选择
            <i class="el-icon-arrow-down" :style="{
              float: 'right',
              transition: 'transform 0.2s',
              transform: showQuestionType ? 'rotate(0deg)' : 'rotate(-90deg)'
            }"></i>
          </div>
          <div v-show="showQuestionType" style="min-height:40px; padding:0 24px 16px 24px;">
            <el-row :gutter="12">
              <el-col :span="8"><el-button class="param-btn" plain
                  @click="handleOtherBtnClick('questionTypeSelection', 'singleChoice', '单选题')">单选题</el-button></el-col>
              <el-col :span="8"><el-button class="param-btn" plain
                  @click="handleOtherBtnClick('questionTypeSelection', 'multipleChoice', '多选题')">多选题</el-button></el-col>
              <el-col :span="8"><el-button class="param-btn" plain
                  @click="handleOtherBtnClick('questionTypeSelection', 'fillBlanks', '填空题')">填空题</el-button></el-col>
              <el-col :span="8"><el-button class="param-btn" plain
                  @click="handleOtherBtnClick('questionTypeSelection', 'scaleQuestions', '量表题')">量表题</el-button></el-col>
              <el-col :span="8"><el-button class="param-btn" plain
                  @click="handleOtherBtnClick('questionTypeSelection', 'matrixScale', '矩阵量表')">矩阵量表</el-button></el-col>
            </el-row>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main style="padding-left: 20px;">
          <el-scrollbar>
            <div style="width: 50%;">
              <el-form label-width="100px" label-position="left" :model="form" ref="screeningAssessmentConfigFormRef">
                <el-form-item label="量表类型：" required>
                  <el-radio-group v-model="form.type">
                    <el-radio :label="item.label" :value="item.value" v-for="item in scale_type" :key="item.value"/>                     
                  </el-radio-group>
            </el-form-item>             
                <el-form-item label="适用条件：" required>
                  <!-- 可留空或加说明 -->
            </el-form-item>            
                <el-form-item label="性别：" style="margin-left: 20px;">
                  <el-radio-group v-model="form.gender" style="margin-left: -50px;">
                    <el-radio label="不限" value="-1">不限</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄：" style="margin-left: 20px;">
                  <el-radio-group v-model="form.age" style="margin-left: -50px;">
                    <el-radio label="不限" style="width: 50%" value="-1">不限</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="量表名称：" required>
                  <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入" />
                </el-form-item>
                <el-form-item label="量表说明：">
                  <el-input v-model="form.description" maxlength="50" show-word-limit placeholder="请输入" />
                </el-form-item>
                <el-form-item label="备注：">
                  <el-input type="textarea" v-model="form.remark" maxlength="500" show-word-limit placeholder="请输入"
                    :rows="3" />
            </el-form-item>
          </el-form>
      </div>

            <div v-if="baseInfo.questionType" @click="selectBaseInfo" :class="{ selectedDiv: baseInfo.selected }">
              <span>&nbsp;</span>
              <div style="width: 50%;margin-top: 32px;">
                <el-form label-width="100px" label-position="left">
                  <el-form-item label="1. 标题：" required>
                    <el-input :value="baseInfo.title" readonly size="large" />
                  </el-form-item>
                  <div style="margin-left: 60px;">
                    <template v-for="ctl in baseInfo.contentList">
                      <el-form-item label="填空：">
                        <el-input v-model="ctl.label" readonly style="margin-left: -50px;" size="large">
                          <template #append><el-button @click="handleBaseBtnDelete(ctl.nameEn)">-</el-button></template>
                        </el-input>
                      </el-form-item>
                    </template>
                  </div>
                </el-form>
              </div>
              <div style="display: flex; align-items: right;justify-content: right;padding-right: 50px;"
                v-show="baseInfo.selected">
                <el-button type="primary" icon="Delete" plain @click="deleteBaseInfo">删除</el-button>
              </div>
              <span>&nbsp;</span>
            </div>

            <template v-for="other, index in otherInfo">
              <div style="overflow-x: scroll;" v-if="other.questionChildType == 'scaleQuestions'">
                <div class="custom-radio-grid">
                  <div v-for="n in other.contentList.length" :key="n"
                    :class="['custom-radio-cell', { 'is-checked': other.contentList.length === n, 'is-last': n > 1 }]">
                    {{ n }}
                  </div>
                </div>

                <div class="custom-radio-grid">
                  <div v-for="ctl, n in other.contentList" :key="ctl.nameEn" style="border: none;"
                    :class="['custom-radio-cell']">
                    {{ ctl.label }}
                  </div>
                </div>
              </div>

              <div style="border-bottom: 1px solid #e5e7eb;width: 98%;" v-if="other.questionChildType == 'matrixScale'">

        <el-row :gutter="10" class="mb8">
                  <el-col :span="3" style="margin-top: 30px;">
          </el-col>
                  <template v-for="clt in other.contentList">
                    <template v-if="clt.optionFlag">
                      <el-col :span="1" align="center" style="margin-top: 30px;margin-left: 30px;">
                        {{ clt.optionContent }}
          </el-col>
                    </template>
                  </template>
                </el-row>

                <template v-for="clt, idx in other.contentList">
                  <el-row :gutter="10" class="mb8">
                    <el-col :span="3" style="margin-top: 10px;">
                      <template v-if="clt.labelFlag">
                        标题{{ idx + 1 }}:{{ clt.label }}
                      </template>
          </el-col>
                    <template v-for="clt2, idx in other.contentList">
                      <el-col :span="1" align="center" style="margin-left: 30px;">
                        <template v-if="clt2.optionFlag && clt.labelFlag">
                          <el-radio-group>
                            <el-radio value="1" size="large" />
                          </el-radio-group>
                        </template>
                      </el-col>
                    </template>
        </el-row>
      </template>
              </div>

              <div style="border-bottom: 1px solid #e5e7eb;width: 98%;" :class="{ selectedDiv: other.selected }"
                @click="selectOtherInfo(index)">
                <span>&nbsp;</span>
                <template v-if="other.questionType != 'questionTypeSelection'">
                  <el-row :gutter="10" class="mb8">
                    <el-col :span="12">
                      <el-form-item :label="(index + 1 + (baseInfo.contentList.length>0?1:0)) + '. 标题：'" required>
                        <el-input readonly style="width: 100%;" v-model="other.title" size="large" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" align="center">
                    </el-col>
                    <el-col :span="3">
                    </el-col>
                    <el-col :span="3">
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
          </template>
                <template v-if="other.questionType == 'questionTypeSelection'">
                  <el-row :gutter="10" class="mb8">
                    <el-col :span="12">
                      <el-form-item :label="(index + 1 + (baseInfo.contentList.length>0?1:0)) + '. 标题：'" required>
                        <el-input style="width: 100%;" v-model="other.title" placeholder="请输入标题" size="large"
                          show-word-limit maxlength="150" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="2" align="center">
                      <el-checkbox label="是否必填" v-model="other.required" />
                    </el-col>
                    <el-col :span="3">
                      <el-select v-model="other.arrangement" placeholder="请选择" clearable
                        v-if="other.questionChildType == 'multipleChoice' || other.questionChildType == 'singleChoice' || other.questionChildType == 'fillBlanks'">
                        <el-option v-for="dict in arrangement_method" :key="dict.value" :label="dict.label"
                          :value="dict.value"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="5">
                      <div v-if="other.questionChildType == 'multipleChoice'">
                        <el-form-item label="计分方式" id="jffs">
                          <el-select v-model="other.scoreMethod" placeholder="请选择" clearable>
                            <el-option v-for="dict in score_method" :key="dict.value" :label="dict.label"
                              :value="dict.value"></el-option>
                          </el-select>
                        </el-form-item>

                      </div>
                    </el-col>
                    <el-col :span="2">
                    </el-col>
                  </el-row>
                </template>

                <el-row :gutter="10" class="mb8" v-if="other.questionChildType == 'singleChoice'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;">选项（单选）</div>
                  </el-col>
                  <el-col :span="2">
                    <div style="text-align: center;">添加图片</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: left;">允许填空</div>
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8" v-if="other.questionChildType == 'multipleChoice'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;"> 选项（多选）</div>
                  </el-col>
                  <el-col :span="2">
                    <div style="text-align: center;">添加图片</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: left;">允许填空</div>
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8" v-if="other.questionChildType == 'matrixScale'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="10">
                    <div style="text-align: center;"> 选项题目（矩阵量表）</div>
                  </el-col>
                  <el-col :span="4">
                    <div style="text-align: center;">选项内容</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: left;">允许填空</div>
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8"
                  v-if="other.questionChildType == 'anthropometry' && other.lastType == '2'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;">选项（单选）</div>
                  </el-col>
                  <el-col :span="2">
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8" v-if="(other.questionChildType == 'anthropometry' && other.lastType == '4')
                  || (other.questionChildType == 'dietaryStatus' && other.lastType == '2')"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;">选项（单选）</div>
                  </el-col>
                  <el-col :span="2">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8" v-if="other.questionChildType == 'scaleQuestions'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;">选项（量表）</div>
                  </el-col>
                  <el-col :span="2">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="3">
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8" v-if="other.questionChildType == 'fillBlanks'"
                  style="background-color: #e5e7eb;height: 40px;line-height: 40px;width: 98%;">
                  <el-col :span="12">
                    <div style="text-align: center;">选项（填空）</div>
                  </el-col>
                  <el-col :span="2">
                    <div style="text-align: center;">添加图片</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: center;">分值设置</div>
                  </el-col>
                  <el-col :span="3">
                    <div style="text-align: left;">单位</div>
                  </el-col>
                  <el-col :span="4">
                  </el-col>
                </el-row>


                <template v-if="other.questionChildType == 'singleChoice' || other.questionChildType == 'fillBlanks'
                  || other.questionChildType == 'multipleChoice'">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" style="margin-top: 20px;width: 98%;">
                      <el-col :span="12">
                        <el-form-item required style="margin-left: 40px;">
                          <el-radio-group>
                            <el-radio :disabled="true">
                              选项{{ idx + 1 }}：
                              <el-input size="large" style="width: 430px;" v-model="ctl.label" show-word-limit
                                maxlength="150">
                                <template #prepend><el-button
                                    @click="handleOtherBtnAdd(index, other.questionChildType)">+</el-button></template>
                                <template #append><el-button
                                    @click="handleOtherBtnDelete(index, idx)">-</el-button></template>
                              </el-input>
                            </el-radio>
                          </el-radio-group>
        </el-form-item>
                      </el-col>
                      <el-col :span="2" align="center" style="margin-top: -5px;">
                        <miniImageUpload :limit="1" v-model="ctl.img" />
                      </el-col>
                      <el-col :span="3" align="center" style="margin-top: -5px;">
                        <el-input style="width: 60px;" size="large" v-model="ctl.score" />
                      </el-col>
                      <el-col :span="3" align="left" style="margin-top: -5px;">
                        <template v-if="other.questionChildType == 'fillBlanks'">
                          <el-input style="width: 40px;" size="large" v-model="ctl.unit" />
                        </template>
                        <template v-if="other.questionChildType != 'fillBlanks'">
                          <el-checkbox v-model="ctl.allowFillBlank" />
                        </template>
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>


                <template v-if="other.questionChildType == 'matrixScale'">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" style="margin-top: 20px;width: 98%;">
                      <el-col :span="10" style="margin-top: -5px;">
                        <template v-if="ctl.labelFlag">
                          <el-form-item required style="margin-left: 40px;">
                            行标题{{ idx + 1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-input size="large" style="width: 330px;" v-model="ctl.label" show-word-limit
                              maxlength="150">
                              <template #prepend><el-button
                                  @click="handleMatrixScaleAdd(index, idx, true)">+</el-button></template>
                              <template #append><el-button
                                  @click="handleMatrixScaleDelete(index, idx, true)">-</el-button></template>
                            </el-input>
        </el-form-item>
                        </template>
                      </el-col>
                      <el-col :span="4" align="center" style="margin-top: -5px;">
                        <template v-if="ctl.optionFlag">
                          <el-input size="large" v-model="ctl.optionContent" show-word-limit maxlength="150">
                            <template #prepend><el-button
                                @click="handleMatrixScaleAdd(index, idx, false)">+</el-button></template>
                            <template #append><el-button
                                @click="handleMatrixScaleDelete(index, idx, false)">-</el-button></template>
                          </el-input>
                        </template>
                      </el-col>
                      <el-col :span="3" align="center" style="margin-top: -5px;">
                        <el-input style="width: 60px;" size="large" v-model="ctl.score" />
                      </el-col>
                      <el-col :span="3" align="left" style="margin-top: -5px;">                        
                        <el-checkbox v-model="ctl.allowFillBlank" />
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>

                <template v-if="(other.questionChildType == 'anthropometry' && (other.lastType == '1' || other.lastType == '3')
                  || (other.questionChildType == 'dietaryStatus' && other.lastType != '2'))">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" :style="{ marginTop: idx == 0 ? '20px' : '0px' }"
                      style="width: 98%;">
                      <el-col :span="12">
                        <div style="margin-left: 60px;margin-top: -15px;">
                          <el-form-item label="填空：">
                            <el-input readonly size="large" v-model="ctl.label">
                              <template #append><el-button
                                  @click="handleOtherBtnDelete(index, idx)">-</el-button></template>
                            </el-input>
        </el-form-item>
                        </div>
                      </el-col>
                      <el-col :span="2" align="center" style="margin-top: -5px;">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>

                <template v-if="((other.questionChildType == 'anthropometry' && other.lastType == '4')
                  || (other.questionChildType == 'dietaryStatus' && other.lastType == '2'))">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" :style="{ marginTop: idx == 0 ? '20px' : '0px' }"
                      style="width: 98%;">
                      <el-col :span="12">
                        <el-form-item required style="margin-left: 40px;"
                          :style="{ marginTop: idx == 0 ? '0px' : '-5px' }">
                          <el-radio-group>
                            <el-radio :disabled="true">
                              选项{{ idx + 1 }}：
                              <el-input readonly size="large" style="width: 430px;" v-model="ctl.label">
                                <template #append><el-button
                                    @click="handleOtherBtnDelete(index, idx)">-</el-button></template>
                              </el-input>
                            </el-radio>
                          </el-radio-group>
        </el-form-item>
                      </el-col>
                      <el-col :span="2" align="center" style="margin-top: -5px;">
                        <el-input style="width: 60px;" v-model="ctl.score" size="large" />
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>

                <template v-if="other.questionChildType == 'scaleQuestions'">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" :style="{ marginTop: idx == 0 ? '20px' : '0px' }"
                      style="width: 98%;">
                      <el-col :span="12">
                        <el-form-item required style="margin-left: 40px;"
                          :style="{ marginTop: idx == 0 ? '0px' : '-5px' }">
                          {{ idx + 1 }}：
                          <el-input size="large" style="width: 430px;" v-model="ctl.label" show-word-limit
                            maxlength="150">
                            <template #prepend><el-button
                                @click="handleOtherBtnAdd(index, other.questionChildType)">+</el-button></template>
                            <template #append><el-button
                                @click="handleOtherBtnDelete(index, idx)">-</el-button></template>
                          </el-input>
        </el-form-item>
                      </el-col>
                      <el-col :span="2" align="center" style="margin-top: -5px;">
                        <el-input style="width: 60px;" v-model="ctl.score" size="large" />
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>

                <template v-if="(other.questionChildType == 'anthropometry' && other.lastType == '2'
                  || (other.questionChildType == 'dietaryStatus' && other.lastType == '12'))">
                  <template v-for="ctl, idx in other.contentList">
                    <el-row :gutter="10" class="mb8" :style="{ marginTop: idx == 0 ? '20px' : '0px' }"
                      style="width: 98%;">
                      <el-col :span="12">
                        <el-form-item required style="margin-left: 40px;"
                          :style="{ marginTop: idx == 0 ? '0px' : '-5px' }">
                          <el-radio-group>
                            <el-radio :disabled="true">
                              选项{{ idx + 1 }}：
                              <el-input readonly size="large" style="width: 430px;" v-model="ctl.label">
                                <template #append><el-button
                                    @click="handleOtherBtnDelete(index, idx)">-</el-button></template>
                              </el-input>
                            </el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2" align="center" style="margin-top: -5px;">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="3" align="center">
                      </el-col>
                      <el-col :span="4" align="center">
                      </el-col>
                    </el-row>
                  </template>
                </template>

                <div style="display: flex; align-items: right;justify-content: right;padding-right: 50px;"
                  v-show="other.selected">
                  <el-button type="primary" icon="Top" plain :disabled="index == 0"
                    @click="moveUp(index)">上移</el-button>
                  <el-button type="primary" icon="Bottom" plain :disabled="index + 1 == otherInfo.length"
                    @click="moveDown(index)">下移</el-button>
                  <el-button type="primary" icon="Upload" plain :disabled="index == 0"
                    @click="topUp(index)">置顶</el-button>
                  <el-button type="primary" icon="Download" plain :disabled="index + 1 == otherInfo.length"
                    @click="bottomUp(index)">置底</el-button>
                  <el-button type="primary" icon="Delete" plain @click="deleteOtherInfo(index)">删除</el-button>
                </div>
                <span>&nbsp;</span>
        </div>
      </template>


          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup name="ScreeningAssessmentConfig" lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { listScreeningAssessmentConfig, getScreeningAssessmentConfig, delScreeningAssessmentConfig, addScreeningAssessmentConfig, updateScreeningAssessmentConfig } from '@/api/system/screeningAssessmentConfig';
import { ScreeningAssessmentConfigVO, ScreeningAssessmentConfigQuery, ScreeningAssessmentConfigForm, QuestionAttrVO, QuestionVO } from '@/api/system/screeningAssessmentConfig/types';
import { fa } from 'element-plus/es/locale/index.mjs';

const route = useRoute();
const showSystemParam = ref(true);
const showQuestionType = ref(true);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { arrangement_method, score_method ,scale_type} = toRefs<any>(proxy?.useDict('scale_type','arrangement_method', 'score_method'));

const screeningAssessmentConfigList = ref<ScreeningAssessmentConfigVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const baseInfo = ref<QuestionVO>({
  questionId: '',
  title: '',
  questionType: '',
  content: '',
  selected: false,
  contentList: [],
});
const otherInfo = ref<QuestionVO[]>([]);

const queryFormRef = ref<ElFormInstance>();
const screeningAssessmentConfigFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: ScreeningAssessmentConfigForm = {
  configId: undefined,
  type: '1',
  gender: '-1',
  age: '-1',
  name: undefined,
  description: undefined,
  remark: undefined,
  status: undefined,
  baseInfo: undefined,
  otherInfo: undefined
}
const data = reactive<PageData<ScreeningAssessmentConfigForm, ScreeningAssessmentConfigQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: undefined,
    gender: undefined,
    age: undefined,
    name: undefined,
    description: undefined,
    status: undefined,
    params: {
    }
  },
  rules: {
    age: [
      { required: true, message: "年龄不能为空", trigger: "blur" }
    ],
    gender: [
      { required: true, message: "性别不能为空", trigger: "blur" }
    ],
    type: [
      { required: true, message: "量表类型不能为空", trigger: "change" }
    ],
    name: [
      { required: true, message: "量表名称不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询筛查/评估配置列表 */
const getList = async () => {
  const eId = route.params && route.params.id;
  const vId = route.params && route.params.vid;
  let id=undefined;
  if(vId){    
    id=vId;
  }else{    
    id=eId;
  }

  if (id&&id!='0') {
  loading.value = true;
    const res = await getScreeningAssessmentConfig(id as string);
    Object.assign(form.value, res.data);
    if(res.data.baseInfo){
      baseInfo.value = res.data.baseInfo;
    }
    if(res.data.otherInfo){
      otherInfo.value = res.data.otherInfo;      
      otherInfo.value.forEach(item=>{
        item.increment = item.contentList.length;                 
      });
    }
  loading.value = false;
  }
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  screeningAssessmentConfigFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: ScreeningAssessmentConfigVO[]) => {
  ids.value = selection.map(item => item.configId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加筛查/评估配置";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: ScreeningAssessmentConfigVO) => {
  reset();
  const _configId = row?.configId || ids.value[0]
  const res = await getScreeningAssessmentConfig(_configId);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改筛查/评估配置";
}

/** 提交按钮 */
const submitForm = () => {
  screeningAssessmentConfigFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (!baseInfo.value.questionType && otherInfo.value.length == 0) {
        proxy?.$modal.msgError("请选择题型");
        return;
      }

      let baseNum=!baseInfo.value.questionType?0:1;
      let lineNum=0;
      for (let item of otherInfo.value) {
        lineNum++;
        if (!item.title || item.title.trim().length < 1) {
          proxy?.$modal.msgError("第" + (baseNum + lineNum) + "行标题为空");
          return;
        }

        for (let ch of item.contentList) {
          if (item.questionChildType == 'matrixScale') {
            if ((ch.optionFlag && (!ch.optionContent || ch.optionContent.trim().length < 1))
              || (ch.labelFlag && (!ch.label || ch.label.trim().length < 1))) {
              proxy?.$modal.msgError("第" + (baseNum + lineNum) + "行标题的选项内容为空");
              return;
            }
          } else {
            if (!ch.label || ch.label.trim().length < 1) {
              proxy?.$modal.msgError("第" + (baseNum + lineNum) + "行标题的选项有空值");
              return;
            }
          }
        }
      }

      if(baseInfo.value.questionType&&baseInfo.value.questionType.length>0){
        form.value.baseInfo = baseInfo.value;
      }
      if(otherInfo.value&&otherInfo.value.length>0){
        form.value.otherInfo = otherInfo.value;
      }
      buttonLoading.value = true;
      if (form.value.configId) {
        await updateScreeningAssessmentConfig(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addScreeningAssessmentConfig(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      close();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: ScreeningAssessmentConfigVO) => {
  const _configIds = row?.configId || ids.value;
  await proxy?.$modal.confirm('是否确认删除筛查/评估配置编号为"' + _configIds + '"的数据项？').finally(() => loading.value = false);
  await delScreeningAssessmentConfig(_configIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('system/screeningAssessmentConfig/export', {
    ...queryParams.value
  }, `screeningAssessmentConfig_${new Date().getTime()}.xlsx`)
}

/** 预览按钮操作 */
const handlePreview = () => {
  // Implementation of handlePreview function
}

/** 关闭按钮操作 */
const close = () => {
  const obj: RouteLocationNormalized = {
    fullPath: '',
    hash: '',
    matched: [],
    meta: undefined,
    name: undefined,
    params: undefined,
    query: undefined,
    redirectedFrom: undefined,
    path: '/argManage/screeningAssessmentConfig'
  };
  proxy?.$tab.closeOpenPage(obj);
}

function handleOtherBtnClick(questionType: string, nameEn: string, nameCn: string) {
  if (otherInfo.value.length > 0 && questionType == 'otherInfo') {
    let newList = []
    for (let i = 0, len = otherInfo.value.length; i < len; i++) {
      let other = otherInfo.value[i];
      if (other.questionType == 'otherInfo' && other.questionChildType == nameEn) {
        continue;
      }
      newList.push(other);
    }

    if (newList.length != otherInfo.value.length) {
      otherInfo.value = newList;
    }
  }

  let question: QuestionVO = {
    questionId: '',
    title: nameCn,
    questionType: questionType,
    questionChildType: nameEn,
    lastType: '1',
    selected: false,
    required: false,
    scoreMethod: '1',
    arrangement: '1',
    content: '',
    contentList: [],
  };
  otherInfo.value.push(question);

  if ('anthropometry' == nameEn) {
    question.contentList.push({
      label: '身高',
      value: undefined,
      nameEn: 'height',
    });
    question.contentList.push({
      label: '当前体重',
      value: undefined,
      nameEn: 'currentWeight',
    });
    question.contentList.push({
      label: '出生体重',
      value: undefined,
      nameEn: 'birthWeight',
    });
    question.contentList.push({
      label: '理想体重',
      value: undefined,
      nameEn: 'idealWeight',
    });
    question.contentList.push({
      label: 'BMI',
      value: undefined,
      nameEn: 'BMI',
    });
    question.contentList.push({
      label: '握力',
      value: undefined,
      nameEn: 'gripStrength',
    });
    question.contentList.push({
      label: '皮褶厚度',
      value: undefined,
      nameEn: 'leatherFoldThickness',
    });
    question.contentList.push({
      label: '腰围',
      value: undefined,
      nameEn: 'waistCircumference',
    });
    question.contentList.push({
      label: '上臂围',
      value: undefined,
      nameEn: 'upperArmCircumference',
    });
    question.contentList.push({
      label: '小腿围',
      value: undefined,
      nameEn: 'calfCircumference',
    });
    question.contentList.push({
      label: '其他测量指标',
      value: undefined,
      nameEn: 'otherMeasurementIndicators',
    });


    question = {
      questionId: '',
      title: '请选择调查时间',
      questionType: questionType,
      questionChildType: nameEn,
      content: '',
      lastType: '2',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '三个月前',
      formType: 'radio',
      value: undefined,
      nameEn: 'threeMonthsAgo',
    });
    question.contentList.push({
      label: '两个月前',
      value: undefined,
      formType: 'radio',
      nameEn: 'twoMonthsAgo',
    });
    question.contentList.push({
      label: '一个月前',
      formType: 'radio',
      value: undefined,
      nameEn: 'oneMonthsAgo',
    });


    question = {
      questionId: '',
      title: '请填入已选调查时间体重',
      questionType: questionType,
      questionChildType: nameEn,
      lastType: '3',
      content: '',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '过去体重',
      value: undefined,
      nameEn: 'pastWeight',
    });


    question = {
      questionId: '',
      title: '1-3个月内体重变化情况',
      questionType: questionType,
      questionChildType: nameEn,
      lastType: '4',
      content: '',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '近3个月体重无显著变化',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'noChangeWeight',
    });
    question.contentList.push({
      label: '近3个月体重丢失>5%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'weightLoss5In3Months',
    });
    question.contentList.push({
      label: '近2个月体重丢失>5%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'weightLoss5In2Months',
    });
    question.contentList.push({
      label: '近1个月体重丢失>5%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'weightLoss5In1Months',
    });

    for (let i = 0, len = question.contentList.length; i < len; i++) {
      question.contentList[i].score = i.toString();
    }
    return;
  }

  if ('dietaryStatus' == nameEn) {
    question.contentList.push({
      label: '平素膳食餐次',
      value: undefined,
      nameEn: 'regularMealSchedule',
    });


    question = {
      questionId: '',
      title: '近1周食物摄入量是否减少',
      questionType: questionType,
      questionChildType: nameEn,
      lastType: '2',
      content: '',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '无变化',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'noChange',
    });
    question.contentList.push({
      label: '较从前减少25%~50%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'decreasedBy25To50',
    });
    question.contentList.push({
      label: '较从前减少51%~75%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'decreasedBy51To75',
    });
    question.contentList.push({
      label: '较从前减少76%~100%',
      formType: 'radioScore',
      value: undefined,
      nameEn: 'decreasedBy76To100',
    });
    for (let i = 0, len = question.contentList.length; i < len; i++) {
      question.contentList[i].score = i.toString();
    }


    question = {
      questionId: '',
      title: '近1周食物摄入种类（/日）',
      questionType: questionType,
      questionChildType: nameEn,
      lastType: '3',
      content: '',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '奶及奶制品',
      value: undefined,
      nameEn: 'milkAndDairyProducts',
    });
    question.contentList.push({
      label: '坚果类',
      value: undefined,
      nameEn: 'nutCategory',
    });
    question.contentList.push({
      label: '大豆类',
      value: undefined,
      nameEn: 'largeBeans',
    });
    question.contentList.push({
      label: '肉蛋水产类',
      value: undefined,
      nameEn: 'meatEggAndAquaticProducts',
    });
    question.contentList.push({
      label: '蔬菜类',
      value: undefined,
      nameEn: 'vegetables',
    });
    question.contentList.push({
      label: '水果类',
      value: undefined,
      nameEn: 'fruitCategory',
    });
    question.contentList.push({
      label: '谷薯杂豆类',
      value: undefined,
      nameEn: 'grainPotatoAndMixedBeans',
    });
    question.contentList.push({
      label: '调料类',
      value: undefined,
      nameEn: 'seasoning',
    });
    question.contentList.push({
      label: '水',
      value: undefined,
      nameEn: 'water',
    });


    question = {
      questionId: '',
      title: '近1周能量-营养素摄入分析（/日）',
      questionType: questionType,
      questionChildType: nameEn,
      lastType: '4',
      content: '',
      contentList: [],
    };
    otherInfo.value.push(question);
    question.contentList.push({
      label: '总能量',
      value: undefined,
      nameEn: 'totalEnergy',
    });
    question.contentList.push({
      label: '总氮量',
      value: undefined,
      nameEn: 'totalNitrogenContent',
    });
    question.contentList.push({
      label: '氮/能量比值:1',
      value: undefined,
      nameEn: 'nitrogenEnergyRatio1',
    });
    question.contentList.push({
      label: '蛋白质含量',
      value: undefined,
      nameEn: 'proteinContent',
    });
    question.contentList.push({
      label: '脂肪含量',
      value: undefined,
      nameEn: 'fatContent',
    });
    question.contentList.push({
      label: '碳水化合物含量',
      value: undefined,
      nameEn: 'carbohydrateContent',
    });
    question.contentList.push({
      label: '蛋白质热比',
      value: undefined,
      nameEn: 'proteinHeatRatio',
    });
    question.contentList.push({
      label: '脂肪热比',
      value: undefined,
      nameEn: 'protefatToHeatRatioinHeatRatio',
    });
    question.contentList.push({
      label: '碳水化合物热比',
      value: undefined,
      nameEn: 'carbohydrateHeatRatio',
    });
    question.contentList.push({
      label: '盐',
      value: undefined,
      nameEn: 'salt',
    });
    question.contentList.push({
      label: '钠',
      value: undefined,
      nameEn: 'sodium',
    });
    return;
  }

  if ('singleChoice' == nameEn) {
    question.title = undefined;
    question.required = false;
    question.arrangement = '1';
    question.increment = 0;

    question.contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'single' + question.increment.toString(),
      allowFillBlank: false,
      img: undefined,
      score: '0.0',
    });
    return;
  }

  if ('multipleChoice' == nameEn) {
    question.title = undefined;
    question.required = false;
    question.arrangement = '1';
    question.scoreMethod = '1';
    question.increment = 0;

    question.contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'multiple' + question.increment.toString(),
      allowFillBlank: false,
      img: undefined,
      score: '0.0',
    });
    return;
  }

  if ('fillBlanks' == nameEn) {
    question.title = undefined;
    question.required = false;
    question.arrangement = '1';
    question.increment = 0;

    question.contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'fill' + question.increment.toString(),
      img: undefined,
      score: '0.0',
      unit: '',
    });
    return;
  }

  if ('scaleQuestions' == nameEn) {
    question.title = undefined;
    question.required = false;
    question.increment = 0;

    question.contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'scale' + question.increment.toString(),
      score: '0.0',
    });

    return;
  }

  if ('matrixScale' == nameEn) {
    question.title = undefined;
    question.required = false;
    question.increment = 0;

    question.contentList.push({
      labelFlag: true,
      label: undefined,
      value: undefined,
      nameEn: 'matrix' + question.increment.toString(),
      score: '0.0',
      optionContent: '',
      optionFlag: true,
    });

    return;
  }
}


function handleBaseBtnClick(nameEn: string, nameCn: string) {
  if (baseInfo.value.contentList.length < 1) {
    baseInfo.value.title = '基本信息';
    baseInfo.value.questionType = 'baseInfo';
    baseInfo.value.contentList = [];
  }

  let questionAttr: QuestionAttrVO = {
    label: nameCn,
    value: undefined,
    nameEn: nameEn,
  };

  if (baseInfo.value.contentList.length < 1) {
    baseInfo.value.contentList.push(questionAttr);
  } else {
    let existed = false;
    for (let item of baseInfo.value.contentList) {
      if (item.nameEn == nameEn) {
        existed = true;
        break;
      }
    }

    if (!existed) {
      baseInfo.value.contentList.push(questionAttr);
    }

  }
}


function handleBaseBtnDelete(nameEn: string) {
  let contentList = [];
  for (let item of baseInfo.value.contentList) {
    if (item.nameEn != nameEn) {
      contentList.push(item);
    }
  }

  if (contentList.length < 1) {
    baseInfo.value.questionType = undefined;
    baseInfo.value.contentList = [];
  } else {
    baseInfo.value.contentList = contentList;
  }
}

function deleteBaseInfo() {
  baseInfo.value.contentList = [];
  baseInfo.value.questionType = undefined;
}

function deleteOtherInfo(index: number) {
  let newList = []
  for (let i = 0, len = otherInfo.value.length; i < len; i++) {
    if (i == index) {
      continue;
    }
    newList.push(otherInfo.value[i]);
  }
  otherInfo.value = newList;
}

function handleOtherBtnDelete(index: number, childIndex: number) {
  let other = otherInfo.value[index]
  let newList = [];
  for (let i = 0, len = other.contentList.length; i < len; i++) {
    if (i == childIndex) {
      continue;
    }
    newList.push(other.contentList[i]);
  }
  other.contentList = newList;

  if (newList.length == 0) {
    newList = [];
    for (let i = 0, len = otherInfo.value.length; i < len; i++) {
      if (i == index) {
        continue;
      }
      newList.push(otherInfo.value[i]);
    }
    otherInfo.value = newList
  }
}

function handleMatrixScaleAdd(index: number, childIndex: number, isLeft: boolean) {
  let other = otherInfo.value[index];
  if (other.contentList.length == childIndex + 1) {
    other.contentList.push({
      labelFlag: isLeft,
      label: undefined,
      value: undefined,
      nameEn: 'matrix' + other.increment.toString(),
      score: '0.0',
      optionContent: undefined,
      optionFlag: !isLeft  ,
    });
    return;
  }

  let effectiveNum = 0;
  for (let item of other.contentList) {
    if (isLeft) {
      effectiveNum += (item.labelFlag ? 1 : 0);
    } else {
      effectiveNum += (item.optionFlag ? 1 : 0);
    }
  }


  if (effectiveNum == other.contentList.length) {
    other.contentList.push({
      labelFlag: isLeft  ,
      label: undefined,
      value: undefined,
      nameEn: 'matrix' + other.increment.toString(),
      score: '0.0',
      optionContent: undefined,
      optionFlag: !isLeft  ,
    });
  } else {
    let o = other.contentList[effectiveNum];
    if (isLeft) {
      o.labelFlag = true;
    } else {
      o.optionFlag = true;
    }
  }

  for (let i = effectiveNum; i > 0; i--) {
    let child = other.contentList[i]
    if (i == childIndex + 1) {
      if (isLeft) {
        child.value = undefined;
      } else {
        child.optionContent = undefined;
      }
      break
    }

    let childPre = other.contentList[i - 1];
    if (isLeft) {
      child.value = childPre.value;
    } else {
      child.optionContent = childPre.optionContent;
    }
  }
}


function handleMatrixScaleDelete(index: number, childIndex: number, isLeft: boolean) {
  let other = otherInfo.value[index];
  let child = other.contentList[childIndex];

  if (other.contentList.length == 1) {
    if (isLeft) {
      if (!child.optionFlag) {
        other.contentList = [];
      } else {
        child.labelFlag = false;     
      }
    } else {
      if (!child.labelFlag) {
        other.contentList = [];
      } else {
        child.optionFlag = false;
      }
    }
    return;
  }

  if (other.contentList.length == childIndex + 1) {
    if (isLeft) {
      if (!child.optionFlag) {
        other.contentList.pop();
      } else {
        child.labelFlag = false;
        child.label = undefined;
      }
    } else {
      if (!child.labelFlag) {
        other.contentList.pop();
      } else {
        child.optionFlag = false;
        child.optionContent = undefined;
      }
    }
    return;
  }

  for (let i = childIndex + 1, len = other.contentList.length; i < len; i++) {
    let childPre = other.contentList[i - 1];
    child = other.contentList[i];
    if (isLeft) {
      childPre.labelFlag = child.labelFlag;
      childPre.value = child.value;
    } else {
      childPre.optionFlag = child.optionFlag;
      childPre.optionContent = child.optionContent;
    }
  }

  other.contentList.pop();
}


function handleOtherBtnAdd(index: number, questionType: string) {
  let other = otherInfo.value[index]
  let contentList = other.contentList;
  other.increment += 1;

  if ('singleChoice' == questionType) {
    contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'single' + other.increment.toString(),
      allowFillBlank: false,
      img: undefined,
      score: '0.0',
    });
    return;
  }

  if ('multipleChoice' == questionType) {
    contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'multiple' + other.increment.toString(),
      allowFillBlank: false,
      img: undefined,
      score: '0.0',
    });
    return;
  }

  if ('fillBlanks' == questionType) {
    contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'fill' + other.increment.toString(),
      img: undefined,
      score: '0.0',
      unit: '',
    });
    return;
  }

  if ('scaleQuestions' == questionType) {
    contentList.push({
      label: undefined,
      value: undefined,
      nameEn: 'scale' + other.increment.toString(),
      score: '0.0',
    });

    return;
  }

  if ('matrixScale' == questionType) {
    contentList.push({
      labelFlag: true,
      label: undefined,
      value: undefined,
      nameEn: 'matrix' + other.increment.toString(),
      score: '0.0',
      optionContent: undefined,
      optionFlag: true,
    });

    return;
  }

}



function selectBaseInfo() {
  baseInfo.value.selected = true;
  otherInfo.value.forEach(item => {
    item.selected = false;
  });
}

function selectOtherInfo(index: number) {
  baseInfo.value.selected = false;
  otherInfo.value.forEach(item => {
    item.selected = false;
  });
  let other = otherInfo.value[index]
  other.selected = true;
}


function topUp(index: number) {
  let other = otherInfo.value[index];
  let newList = [other];
  for (let i = 0, len = otherInfo.value.length; i < len; i++) {
    if (i == index) {
      continue;
    }
    newList.push(otherInfo.value[i]);
  }
  otherInfo.value = newList;
}

function bottomUp(index: number) {
  let other = otherInfo.value[index];
  let newList = [];
  for (let i = 0, len = otherInfo.value.length; i < len; i++) {
    if (i == index) {
      continue;
    }
    newList.push(otherInfo.value[i]);
  }
  newList.push(other);
  otherInfo.value = newList;
}

function moveUp(index: number) {
  let other = otherInfo.value[index];
  let newList = [];
  for (let i = 0, len = otherInfo.value.length; i < len; i++) {
    if (i == index - 1) {
      newList.push(other);
    }

    if (i == index) {
      continue;
    }

    newList.push(otherInfo.value[i]);
  }

  otherInfo.value = newList;
}


function moveDown(index: number) {
  let other = otherInfo.value[index];
  let newList = [];
  for (let i = 0, len = otherInfo.value.length; i < len; i++) {
    if (i == index) {
      continue;
    }

    newList.push(otherInfo.value[i]);

    if (i == index + 1) {
      newList.push(other);
    }
  }

  otherInfo.value = newList;
}


const bodyWidth = ref((window.document.body.clientWidth - 500) * 0.8);
function updateBodyWidth() {
  let leftPanel = window.document.querySelector('#leftPanel').clientWidth;
  bodyWidth.value = (window.document.body.clientWidth - leftPanel) * 0.93;
}
onMounted(() => {
  window.addEventListener('resize', updateBodyWidth);
  updateBodyWidth();
  getList();
});
onUnmounted(() => {
  window.removeEventListener('resize', updateBodyWidth);
});
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.param-btn {
  width: 100%;
  height: 48px;
  font-size: 13px;
  font-weight: normal;
  border: 1.5px solid #bfcbd9;
  border-radius: 4px;
  margin-bottom: 16px;
  background: #fff;
  color: #222;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

@media (max-width: 1200px) {
  .param-btn {
    font-size: 13px;
  }
}

@media (max-width: 800px) {
  .param-btn {
    font-size: 12px;
  }
}

.selectedDiv {
  background-color: #e8f4ff;
}

ul .el-upload--picture-card {
  --el-upload-picture-card-size: 500px
}

.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.is-checked {
  border-right: 1px solid #bfc4cc;
}

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


:deep(#jffs label) {
  font-weight: normal;
}
</style>