zc_saas_admin/src/views/resource/bankManagement/testPaperManagement/editPaper/topicEditPaper/index.vue

<template>
  <div id="topicEditPaper">
    <div>
      <table-list
        :tableSets="tableSet"
        :tableData="tableData"
        :navText="navText"
        @addClick="openActiveBox"
        :loading="loading"
        @editInfo="editInfo"
        @emitData="emitData"
      >
        <template slot="btn" slot-scope="props">
          <el-button
            type="text"
            @click="addClick(props.scope.row, 0, props.scope.$index)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="del(props.scope.row, props.scope.$index)"
            >删除</el-button
          >
        </template>
      </table-list>
      <div class="centerStys">
        <el-button size="small" @click="backPage">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submitTableAllInfos"
          :disabled="!noStudent"
          >确定</el-button
        >
        <el-button
          size="small"
          @click="returnDatas"
          type="info"
          v-if="draftBox.length"
          >恢复草稿</el-button
        >
      </div>
      <el-dialog
        width="1080px"
        :visible.sync="innerVisiblePaperTopic"
        append-to-body
        :show-close="false"
        :fullscreen="fullscreenChildPaperTopic"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">
            {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
          </div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Max@2x.png"
              alt=""
              @click="fullscreenChildPaperTopic = !fullscreenChildPaperTopic"
            />
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBefore"
            />
          </div>
        </div>
        <!-- <busIns
          @amdis="changeAmdis"
          ref="sujects"
          :typeBus="typeBus"
          :sujectApisTable="sujectApisTable"
          :newSujectApisTable="newSujectApisTable"
        /> -->
        <div v-if="showHide">
          <el-form
            label-position="right"
            label-width="110px"
            :model="listData"
            ref="listData"
            :rules="rulesTest"
          >
            <el-form-item
              v-for="(items, indexs) in listitem"
              :key="indexs"
              :label="items.label"
              :prop="items.prop"
            >
              <div v-if="items.scope === 'bussing'">
                <div v-if="!activeExam.length">请在下面输入框添加知识点</div>
                <ul v-else class="BusBoxs">
                  <li
                    class="fot_Le"
                    v-for="(item, index) in activeExam"
                    :key="index"
                  >
                    {{ item.knowledgeName }}
                    <i
                      class="el-icon-error icon_clear"
                      @click="clearBusName(index)"
                    ></i>
                  </li>
                  <div style="clear: both"></div>
                </ul>
                <el-select
                  v-model="value"
                  placeholder="请选择知识点"
                  @change="changeKnow"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.knowledgeId"
                    :label="item.knowledgeName"
                    :value="item.knowledgeId"
                    :disabled="comLs(item)"
                  >
                  </el-option>
                </el-select>
                <!-- <el-button @click="addExam">自定义添加</el-button> -->
              </div>

              <el-radio-group
                v-else-if="items.scope === 'radio'"
                v-model="listData[items.prop]"
              >
                <el-radio :label="1">发布</el-radio>
                <el-radio :label="0">未发布</el-radio>
              </el-radio-group>
              <el-input
                v-model="listData[items.prop]"
                v-else
              ></el-input> </el-form-item
          ></el-form>
          <questionBank :dingFormInfo="listNums" :nums="1" ref="child" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBefore">关 闭</el-button>
          <el-button
            @click="submitForm('listData')"
            v-if="statusPop === 1 || statusPop === 0"
            >完成</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisible"
        :append-to-body="true"
        width="780px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">添加</div>
          <div class="rightBoxs">
            <img src="@/assets/images/Close@2x.png" alt="" @click="closeBoxs" />
          </div>
        </div>
        <div>
          <el-form label-position="right" label-width="110px">
            <el-form-item label="知识点">
              <div>
                <div v-if="!BusNameList.length">请在下面输入框添加知识点</div>
                <ul v-else class="BusBoxs">
                  <li
                    class="fot_Le"
                    v-for="(item, index) in BusNameList"
                    :key="index"
                  >
                    {{ item }}
                    <i
                      class="el-icon-error icon_clear"
                      @click="clearBus(index)"
                    ></i>
                  </li>
                  <div style="clear: both"></div>
                </ul>
                <el-input
                  style="width: 40%; margin-right: 10px"
                  v-model="BusName"
                ></el-input
                ><el-button @click="addBusName">添加</el-button>
              </div></el-form-item
            ></el-form
          >
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxs">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActive"
        width="420px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">操作类型</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActive"
            />
          </div>
        </div>
        <div>
          <el-radio-group v-model="radioActive">
            <el-radio :label="1">自定义</el-radio>
            <el-radio :label="2">已有数据池</el-radio>
          </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActive">取 消</el-button>
          <el-button type="primary" @click="submitActive">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleTable"
        width="960px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">题库数据池</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsTable"
            />
          </div>
        </div>
        <div>
          <search-box-new
            ref="searchBox"
            :formData="formData"
            :formList="formList"
            @search="getDIO(1)"
            @init="inits"
          />
          <el-table
            ref="multipleTable"
            :data="boxtableData"
            border
            @select-all="selectAll"
            @select="select"
            :row-key="getRowKeys"
            :header-cell-style="{
              'background-color': '#eee',
              padding: '8px',
              color: '#333',
            }"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
              header-align="center"
              :selectable="checkboxT"
              :reserve-selection="true"
            >
            </el-table-column>
            <template v-for="(item, index) in tableSetTables">
              <el-table-column
                v-if="item.scope !== 'inputs'"
                :width="item.width"
                :key="index"
                :label="item.label"
                align="center"
                :show-overflow-tooltip="true"
                header-align="center"
              >
                <template slot-scope="scope">
                  <span v-if="item.scope === 'Status'">
                    {{
                      scope.row[item.prop] === 1
                        ? "发布"
                        : scope.row[item.prop] === 0
                        ? "未发布"
                        : "未知"
                    }}
                  </span>
                  <span v-else-if="item.scope === 'topic'">{{
                    scope.row[item.prop] === 1
                      ? "单选题"
                      : scope.row[item.prop] === 2
                      ? "多选题"
                      : scope.row[item.prop] === 3
                      ? "判断题"
                      : scope.row[item.prop] === 4
                      ? "案例题"
                      : scope.row[item.prop] === 5
                      ? "简答题"
                      : "未知"
                  }}</span>
                  <div
                    class="editInfoSty"
                    v-else-if="item.scope === 'editInfoHTMLs'"
                  >
                    {{ getSimpleText(scope.row[item.prop]) }}
                  </div>
                  <div v-else-if="item.scope === 'knowledge'">
                    <el-button
                      type="success"
                      size="small"
                      v-for="(items, ks) in scope.row[item.prop]"
                      :key="ks"
                    >
                      {{ items.knowledgeName }}
                    </el-button>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span></template
                >
              </el-table-column></template
            >
          </el-table>
          <pagination
            :total="totals"
            :pageSize="formData.pageSize"
            :currentPage="formData.pageNum"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsTable">取 消</el-button>
          <el-button type="primary" @click="submitTable">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="diansBoxStatus"
        width="960px"
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closePagsInfos"
            />
          </div>
        </div>
        <div>
          <div class="dis_fos">
            <div>
              <div class="margin_bs">当前总分：{{ getAllpocis }}</div>
              <div class="margin_bs" v-if="examsType === 2">
                及格分数：<el-input-number
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="passScore"
                  controls-position="right"
                  :min="0"
                  size="mini"
                ></el-input-number>
              </div>
              <div class="margin_bs" v-if="examsType === 2">
                答卷时长：
                <el-radio-group v-model="djTimeType">
                  <el-radio :label="0">无限时长</el-radio>
                  <el-radio :label="1">有限时长</el-radio>
                </el-radio-group>
                <el-input-number
                  v-if="djTimeType === 1"
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="djTime"
                  controls-position="right"
                  :min="1"
                  size="mini"
                ></el-input-number
                ><span v-if="djTimeType === 1">分钟</span>
              </div>
              <div class="margin_bs">
                答卷次数：
                <el-radio-group v-model="djNumType">
                  <el-radio :label="0">无限次</el-radio>
                  <el-radio :label="1">有限次</el-radio>
                </el-radio-group>
                <el-input-number
                  v-if="djNumType === 1"
                  style="margin: 0px 6px; width: 100px !important"
                  v-model="djNum"
                  controls-position="right"
                  :min="1"
                  size="mini"
                ></el-input-number>
              </div>
              <div class="margin_bs">
                做题类型：
                <el-radio-group v-model="examsType">
                  <el-radio :label="1">练习</el-radio>
                  <el-radio :label="2">考试</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="margin_bs">
              <el-button size="mini" @click="activeOpens"
                >按选中设置分数</el-button
              ><el-button size="mini" @click="activePicis"
                >按题型设置分数</el-button
              >
            </div>
          </div>
          <el-table
            ref="multipleTables"
            :data="boxtableDataPags"
            border
            @select-all="selectAllPags"
            @select="selectPags"
            :row-key="getRowKeysPags"
            :header-cell-style="{
              'background-color': '#eee',
              padding: '8px',
              color: '#333',
            }"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55"
              header-align="center"
              :reserve-selection="true"
            >
            </el-table-column>
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="80"
            >
            </el-table-column>

            <template v-for="(item, index) in tableSetTablesPags">
              <el-table-column
                v-if="item.scope !== 'inputs'"
                :width="item.width"
                :key="index"
                :label="item.label"
                :align="item.scope === 'inputS' ? 'left' : 'center'"
                :show-overflow-tooltip="true"
                header-align="center"
              >
                <template slot-scope="scope">
                  <span v-if="item.scope === 'Status'">
                    {{
                      scope.row[item.prop] === 1
                        ? "发布"
                        : scope.row[item.prop] === 0
                        ? "未发布"
                        : "未知"
                    }}
                  </span>
                  <span v-else-if="item.scope === 'topic'">{{
                    scope.row[item.prop] === 1
                      ? "单选题"
                      : scope.row[item.prop] === 2
                      ? "多选题"
                      : scope.row[item.prop] === 3
                      ? "判断题"
                      : scope.row[item.prop] === 4
                      ? "案例题"
                      : scope.row[item.prop] === 5
                      ? "简答题"
                      : "未知"
                  }}</span>
                  <div
                    class="editInfoSty"
                    v-else-if="item.scope === 'editInfoHTMLs'"
                  >
                    {{ getSimpleText(scope.row[item.prop]) }}
                  </div>
                  <div v-else-if="item.scope === 'inputS'">
                    <el-input-number
                      style="width: 100px !important"
                      v-model="scope.row[item.prop]"
                      controls-position="right"
                      :min="0"
                    ></el-input-number>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="右侧输入框为多选题漏选给分"
                      placement="top-start"
                    >
                      <i
                        v-if="scope.row['type'] === 2"
                        class="el-icon-question"
                      ></i>
                    </el-tooltip>

                    <el-input-number
                      v-if="scope.row['type'] === 2"
                      style="width: 100px !important"
                      v-model="scope.row['partScore']"
                      controls-position="right"
                      :min="0"
                    ></el-input-number>
                  </div>
                  <div v-else-if="item.scope === 'knowledge'">
                    <el-button
                      type="success"
                      size="small"
                      v-for="(items, ks) in scope.row[item.prop]"
                      :key="ks"
                    >
                      {{ items.knowledgeName }}
                    </el-button>
                  </div>
                  <span v-else>{{ scope.row[item.prop] }}</span></template
                >
              </el-table-column></template
            >
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closePagsInfos">取 消</el-button>
          <el-button type="primary" @click="submitPagsInfos">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActivePocis"
        width="420px"
        append-to-body
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActivePocis"
            />
          </div>
        </div>
        <div>
          一共选择了{{ activeListsPags.length }}道题目，一键设置
          <el-input-number
            style="width: 100px !important"
            v-model="Pocis"
            controls-position="right"
            :min="0"
          ></el-input-number>
          分
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActivePocis">取 消</el-button>
          <el-button type="primary" @click="submitActivePocis">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisibleActivePLPoics"
        width="580px"
        append-to-body
        :show-close="false"
        :close-on-click-modal="false"
      >
        <div slot="title" class="hearders">
          <div class="leftTitle">分值设置</div>
          <div class="rightBoxs">
            <img
              src="@/assets/images/Close@2x.png"
              alt=""
              @click="closeBoxsActivePLPoics"
            />
          </div>
        </div>
        <div>
          <div class="margin_bs" v-if="pocisArray.danx">
            单选题：共{{ pocisArray.danx }}道，共
            {{ pocisArray.danx * Pocis1 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis1"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.duox">
            多选题：共{{ pocisArray.duox }}道，共
            {{ pocisArray.duox * Pocis2 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis2"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
            <el-tooltip
              class="item"
              effect="dark"
              content="右侧输入框为多选题漏选给分"
              placement="top-start"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>

            <el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis2s"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number>
          </div>
          <div class="margin_bs" v-if="pocisArray.pand">
            判断题：共{{ pocisArray.pand }}道，共
            {{ pocisArray.pand * Pocis3 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis3"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.anli">
            案例题：共{{ pocisArray.anli }}道，共
            {{ pocisArray.anli * Pocis4 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis4"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
          <div class="margin_bs" v-if="pocisArray.jiand">
            简答题：共{{ pocisArray.jiand }}道，共
            {{ pocisArray.jiand * Pocis5 }} 分数，每题分数<el-input-number
              style="margin: 0px 6px; width: 100px !important"
              v-model="Pocis5"
              controls-position="right"
              :min="0"
              size="mini"
            ></el-input-number
            >分
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeBoxsActivePLPoics" size="small"
            >取 消</el-button
          >
          <el-button type="primary" size="small" @click="submitActivePLPoics"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import pagination from "@/components/pagination";
import tableList from "@/components/tableList";
import busIns from "@/components/busIns";
import questionBank from "@/components/questionBank";
export default {
  components: { searchBoxNew, pagination, tableList, busIns, questionBank },
  data() {
    return {
      showHide: false,
      formList: [
        // {
        //   prop: "educationTypeId",
        //   placeholder: "教育类型",
        //   scope: "educationType",
        // },
        // {
        //   prop: "businessId",
        //   placeholder: "业务层次",
        //   scope: "businessLevel",
        //   edu: "educationTypeId",
        // },
        // {
        //   prop: "subjectId",
        //   placeholder: "科目",
        //   scope: "sujectType",
        //   edu: "educationTypeId",
        // },
        {
          prop: "type",
          placeholder: "题目类型",
          scope: "selectBank",
        },
        {
          prop: "key",
          placeholder: "请输入题目标题/题目编码/知识点/标题前缀",
        },
      ],
      formData: {
        publishStatus: 1,
        status: 1,
        pageSize: 10,
        pageNum: 1,
      },
      totals: 0,
      tableSet: [
        {
          label: "排序",
          prop: "sort",
          scope: "inputs",
          width: "100px",
          hidden: true,
        },
        {
          label: "题目编码",
          prop: "code",
          hidden: true,
          width: "120px",
        },
        {
          label: "题型",
          prop: "type",
          hidden: true,
          scope: "topic",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
          width: "160px",
        },
        {
          label: "知识点",
          prop: "knowledgeList",
          hidden: true,
          scope: "knowledge",
          width: "200px",
          showTooltip: true,
        },
        {
          label: "题目内容",
          prop: "content",
          hidden: true,
          scope: "editInfoHTMLs",
          width: "320px",
        },

        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "fabStatus",
        },
      ],
      tableData: [],
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "题目管理",
        index: 0,
        ch: "条",
        num: false,
        border: true,
        choice: false,
        addHide: false,
        backFatherBtn: {
          status: true,
          title: "分值设置",
        },
      },
      rulesTest: {
        // prefixName: [
        //   { required: true, message: "请输入标签前缀", trigger: "blur" },
        // ],
      },
      dialogVisible: false,
      innerVisiblePaperTopic: false,
      fullscreenChildPaperTopic: false,
      statusPop: 1,
      dingForm: {},
      questionId: "",
      queryData: {},
      allOptions: [], //知识点列表
      options: [], //当前知识点列表
      activeExam: [], // 已选知识点列表
      value: "",
      BusName: "", //弹窗新增知识点输入框
      BusNameList: [],
      listNums: {},
      typeBus: 1,
      indexZB: "",
      listData: {
        publishStatus: "",
        prefixName: "",
      },
      int: "",
      listitem: [
        {
          label: "标题前缀",
          prop: "prefixName",
        },
        {
          label: "知识点",
          scope: "bussing",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          scope: "radio",
        },
      ],
      radioActive: "",
      dialogVisibleActive: false,
      dialogVisibleTable: false,
      boxtableData: [],
      tableSetTables: [
        {
          label: "题目类型",
          prop: "type",
          hidden: true,
          scope: "topic",
          width: "120px",
        },
        {
          label: "题目编码",
          prop: "code",
          hidden: true,
          width: "120px",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
          width: "160px",
        },
        {
          label: "知识点",
          prop: "knowledgeList",
          hidden: true,
          scope: "knowledge",
          width: "180px",
        },
        {
          label: "题目标题",
          prop: "content",
          hidden: true,
          scope: "editInfoHTMLs",
          width: "320px",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "Status",
        },
      ],
      activeLists: [],
      disCheckList: [],
      sujectApisTable: [],
      newSujectApisTable: [],
      // -------------------------------------
      diansBoxStatus: false,
      boxtableDataPags: [],
      tableSetTablesPags: [
        {
          label: "排序",
          prop: "sort",
          hidden: true,
        },
        {
          label: "题型",
          prop: "type",
          hidden: true,
          scope: "topic",
          width: "120px",
        },
        {
          label: "标题前缀",
          prop: "prefixName",
          hidden: true,
          width: "160px",
        },
        {
          label: "题目标题",
          prop: "content",
          hidden: true,
          scope: "editInfoHTMLs",
          width: "320px",
        },
        {
          label: "发布状态",
          prop: "publishStatus",
          hidden: true,
          scope: "Status",
          width: "120px",
        },
        {
          label: "分值",
          prop: "score",
          hidden: true,
          scope: "inputS",
          width: "250px",
        },
      ],
      activeListsPags: [],
      dialogVisibleActivePocis: false,
      Pocis: "",
      dialogVisibleActivePLPoics: false,
      Pocis1: "",
      Pocis2: "",
      Pocis2s: "",
      Pocis3: "",
      Pocis4: "",
      Pocis5: "",
      pocisArray: {
        danx: 0,
        duox: 0,
        pand: 0,
        anli: 0,
        jiand: 0,
      },
      passScore: "", //及格分数
      djTimeType: 0, //0无限1有限
      djTime: 0, //答卷时长
      djNumType: 0, //0无限1有限
      djNum: 0, //答卷次数
      examsType: 1,
      businObj: {}, //当前业务层次
      noStudent: true,
      draftBox: [], //草稿箱
      copytableData: [],
      localStart: false, //定时器是否已经开始
      pageId: "", //试卷ID
    };
  },
  computed: {
    getAllpocis() {
      var num = 0;
      this.boxtableDataPags.map((item) => {
        num += item.score;
      });
      return num;
    },
  },
  watch: {
    djTime: {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          this.djTimeType = 0;
        } else {
          this.djTimeType = 1;
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    djNum: {
      handler(newVal, oldVal) {
        if (newVal === 0) {
          this.djNumType = 0;
        } else {
          this.djNumType = 1;
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    tableData: {
      handler(newVal, oldVal) {
        this.navText.index = newVal.length;
        /**
         * 定时器触发机制 防止内存浪费
         */
        if (newVal.length) {
          var a = JSON.stringify(this.tableData);
          var b = JSON.stringify(this.copytableData);
          if (a != b) {
            if (!this.localStart) {
              this.localStart = true;
              this.setInterFunc();
            }
          }
        }
      },
      // 立即处理 进入页面就触发
      immediate: true,
    },
    $route: {
      handler(val, oldval) {
        this.localStart = false;
      },
      // 深度观察监听
      deep: true,
    },
  },
  created() {
    this.pageId = this.$route.query.id;
  },
  async mounted() {
    let localStatus = this.$methodsTools.storageGet("exam");
    if (localStatus) {
      if (JSON.parse(localStatus).id == this.pageId) {
        let cst = JSON.parse(localStatus);
        this.draftBox = cst.data;
      }
    }
    this.$api
      .gradecheckGoodsChange({ examId: this.$route.query.id })
      .then((res) => {
        if (res.data > 0) {
          this.noStudent = false;
        }
      });
    this.getInfos();
    await this.getFns();
    this.changeAmdis();
    this.search();
  },
  beforeDestroy() {
    this.localStart = false;
  },
  methods: {
    /**
     *
     */
    returnDatas() {
      this.$confirm(
        "点击【恢复】后，当前页面的数据，恢复为【上一次的操作行为数据】，请慎重使用。 ",
        "提示",
        {
          confirmButtonText: "恢复",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.tableData = JSON.parse(JSON.stringify(this.draftBox));
          this.$message({
            type: "success",
            message: "已恢复!",
          });
        })
        .catch(() => {});
    },
    setInterFunc() {
      var arr = setInterval(() => {
        if (!this.localStart) {
          clearInterval(arr);
          return;
        }
        this.$methodsTools.storageSet(
          "exam",
          JSON.stringify({
            id: this.pageId,
            data: this.tableData,
          })
        );
      }, 1500);
    },
    getInfos() {
      this.$api.obtainbankexam(this.$route.query.id).then((res) => {
        this.businObj = {
          businessId: res.data.businessId,
          businessName: res.data.businessName,
          educationName: res.data.educationName,
          educationTypeId: res.data.educationTypeId,
          projectName: res.data.projectName,
          projectId: res.data.projectId,
          subjectName: res.data.subjectName,
          subjectId: res.data.subjectId,
        };
        this.djTime = res.data.answerTime;
        this.djNum = res.data.answerNum;
        this.examsType = res.data.doType;
        this.passScore = res.data.passScore;
      });
    },
    // --------------------------分割线---------------------------
    editInfo(v) {
      this.addClick(v, 0);
    },
    search(v) {
      this.loading = true;
      this.$api
        .inquirebankexamquestionList({ examId: this.$route.query.id })
        .then((res) => {
          res.data.map((item) => {
            item.optionsList = JSON.parse(item.jsonStr);
          });
          this.copytableData = JSON.parse(JSON.stringify(res.data));
          this.boxtableDataPags = JSON.parse(JSON.stringify(res.data));
          this.tableData = res.data;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // init() {
    //   this.search();
    // },
    del(v, index) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openActiveBox() {
      this.radioActive = "";
      this.dialogVisibleActive = true;
    },
    submitActive() {
      if (!this.radioActive) {
        this.$message.warning("请选择操作类型");
        return;
      }
      this.dialogVisibleActive = false;
      if (this.radioActive === 1) {
        this.addClick();
      } else {
        var self = this;
        this.formData = {
          status: 1,
          pageSize: 10,
          pageNum: 1,
          publishStatus: 1,
        };
        var data = JSON.parse(JSON.stringify(this.formData));
        data.businessId = this.businObj.businessId;
        data.subjectId = this.businObj.subjectId;
        this.$api.inquirebankquestionList(data).then((res) => {
          var aList = [];
          this.tableData.map((item) => {
            if (item.questionId) {
              aList.push(item.questionId);
            }
          });
          this.disCheckList = aList;
          this.boxtableData = res.rows;
          this.totals = res.total;
          this.dialogVisibleTable = true;
          this.$nextTick(function () {
            self.$refs.multipleTable.clearSelection();
          });
        });
      }
    },
    getDIO(int) {
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          status: 1,
          pageSize: 10,
          pageNum: 1,
          publishStatus: 1,
        };
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      data.businessId = this.businObj.businessId;
      data.subjectId = this.businObj.subjectId;
      this.$api.inquirebankquestionList(data).then((res) => {
        this.boxtableData = res.rows;
        this.totals = res.total;
      });
    },
    closeBoxsActive() {
      this.dialogVisibleActive = false;
    },
    submitTable() {
      if (this.activeLists.length === 0) {
        this.dialogVisibleTable = false;
        return;
      }

      if (this.tableData.length) {
        let maxIndex = 0;
        this.tableData.forEach((item) => {
          if (item.sort > maxIndex) {
            maxIndex = item.sort;
          }
        });
        this.activeLists.forEach((item, index) => {
          item.sort = maxIndex + index + 1;
          item.optionsList = JSON.parse(item.jsonStr);
          item.partScore = 0;
          item.score = "";
          item.diff = false;
        });
      } else {
        this.activeLists.forEach((item, index) => {
          item.sort = index + 1;
          item.optionsList = JSON.parse(item.jsonStr);
          item.partScore = 0;
          item.score = "";
          item.diff = false;
        });
      }
      this.activeLists.forEach((item) => {
        this.tableData.push(item);
      });
      this.dialogVisibleTable = false;
      this.$message.success("添加成功");
      this.activeLists = [];
    },
    closeBoxsTable() {
      this.dialogVisibleTable = false;
    },
    selectAll(value) {
      this.activeLists = value;
    },
    select(value) {
      this.activeLists = value;
    },
    checkboxT(row, index) {
      if (this.disCheckList.indexOf(row.questionId) !== -1) {
        return false;
      } else {
        return true;
      }
    },
    getRowKeys(row) {
      return row.questionId;
    },
    addClick(v, int, indexZB) {
      var self = this;
      if (v === undefined) {
        self.statusPop = 1;
        self.innerVisiblePaperTopic = true;
        self.showHide = true;
        self.$nextTick(() => {
          var data = {
            type: 1,
            optionsList: [],
            answerQuestionList: [],
            content: "",
            status: "",
            analysisContent: "",
            answerQuestion: "",
          };
          for (let i = 0; i < 4; i++) {
            data.optionsList.push({
              content: "",
              imgUrl: null,
              optionsId: i + 1,
            });
          }
          self.listNums = data;
          //   (self.$refs.sujects.eduType = "");
          // self.$refs.sujects.courType = "";
          // self.$refs.sujects.sujectApis = [];
          // self.$refs.sujects.newSujectApis = [];
          self.listData = {
            publishStatus: 1,
          };
          self.activeExam = [];
        });
      } else {
        self.tableData[indexZB].diff = true;
        self.innerVisiblePaperTopic = true;
        self.showHide = true;
        self.statusPop = int;
        var vres = JSON.parse(JSON.stringify(v));
        self.indexZB = indexZB;
        if (vres.knowledgeIds) {
          var a = [];
          vres.knowledgeIds
            .split(",")
            .map(Number)
            .map((items) => {
              self.allOptions.map((item) => {
                if (item.knowledgeId === items) {
                  a.push(item);
                }
              });
            });
          self.activeExam = a;
        } else {
          self.activeExam = [];
        }
        if (vres.type === 2) {
          if (vres.answerQuestion) {
            vres.answerQuestionList = vres.answerQuestion
              .split(",")
              .map(Number);
          }
        } else if (vres.type === 4) {
          vres.optionsList.map((item) => {
            if (item.type === 2) {
              if (item.answerQuestion) {
                item.answerQuestionList = item.answerQuestion
                  .split(",")
                  .map(Number);
              }
            } else {
              item.answerQuestionList = [];
            }
          });
        } else {
          vres.answerQuestionList = [];
        }
        self.listData.prefixName = vres.prefixName;
        self.listData.publishStatus = vres.publishStatus;
        self.listNums = vres;
        // var arrays = [];
        // vres.businessList.map((item) => {
        //   arrays.push(item.businessId + "-" + item.subjectId);
        // });
        // self.sujectApisTable = arrays;
        // self.newSujectApisTable = vres.businessList;
      }
    },
    //-----------------------------------------------
    comLs(item) {
      var os = this.activeExam.some((items) => {
        return items.knowledgeId === item.knowledgeId;
      });
      if (os) {
        return true;
      } else {
        return false;
      }
    },
    getFns() {
      return new Promise((resolve, reject) => {
        this.$api.inquireKnowledgeExamListS({ status: 1 }).then((res) => {
          this.allOptions = res.rows;
          resolve();
        });
      });
    },
    getSimpleText(html) {
      var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      var msg = html.replace(re1, ""); //执行替换成空字符
      return msg;
    },
    addBusName() {
      if (this.BusName.trim()) {
        var as = this.allOptions.some((item) => {
          return item.knowledgeName == this.BusName;
        });
        if (as) {
          this.$message.warning("当前知识点名称已存在");
          return;
        }
        this.BusNameList.push(this.BusName);
        this.BusName = "";
      } else {
        this.$message({
          message: "请输入知识点内容",
          type: "warning",
          duration: 1200,
        });
        this.BusName = "";
      }
    },
    submit() {
      var data = {
        examKnowledgeBusinessAddBoList: [this.businObj],
        knowledgeName: this.BusNameList,
        status: 1,
      };
      this.$api.addKnowledgeExam(data).then(async (res) => {
        this.$message.success("添加成功");
        this.dialogVisible = false;
        await this.getFns();
        this.changeAmdis();
      });
    },
    closeBoxs() {
      this.dialogVisible = false;
    },
    addExam() {
      // if (!this.$refs.sujects.courType) {
      //   this.$message.warning("请选择业务层级");
      //   return;
      // }
      // console.log(this.$refs.sujects)
      this.BusNameList = [];
      this.BusName = "";
      this.dialogVisible = true;
    },
    clearBus() {
      this.BusNameList.splice(index, 1);
    },
    //子组件回调 业务层及变换-知识点重新筛选
    changeAmdis() {
      var int = this.businObj.businessId;
      var ao = [];
      this.allOptions.map((item, index) => {
        let acts = item.courseBusinessList.some((items) => {
          return items.businessId === int;
        });
        if (acts) {
          ao.push(item);
        }
      });
      this.options = ao;
    },
    clearBusName(index) {
      this.activeExam.splice(index, 1);
    },
    changeKnow(item) {
      this.allOptions.map((items) => {
        if (items.knowledgeId === item) {
          this.activeExam.push(items);
        }
      });
      this.value = "";
    },
    addListNums() {
      this.listNums.push({
        type: 1,
        optionsList: [],
        answerQuestionList: [],
        content: "",
        status: "",
        analysisContent: "",
        answerQuestion: "",
      });
    },
    closeBefore() {
      this.innerVisiblePaperTopic = false;
      this.showHide = false;
    },
    async submitForm(formName, int) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var self = this;
          // if (!this.$refs.sujects.newSujectApis.length) {
          //   this.$message.error("请选择科目");
          //   return;
          // }
          var data = this.$refs.child.getInfosPage();
          if (!data.content || data.content == "<p><br></p>") {
            self.$message.error("请填写题目内容");
            return;
          }
          if (data.type != 3 && data.type != 5 && !data.optionsList.length) {
            self.$message.error("请添加选项");
            return;
          }
          if (data.type != 3 && data.type != 4 && data.optionsList.length) {
            var ast = data.optionsList.some((item) => {
              return !item.content && !item.imgUrl;
            });
            if (ast) {
              self.$message.error("请完善选项内容");
              return;
            }
          }
          if (data.type != 5 && data.type != 4) {
            if (data.type === 2 && !data.answerQuestionList.length) {
              self.$message.error("请选择正确答案");
              return;
            }
            if (data.type !== 2 && !data.answerQuestion) {
              self.$message.error("请选择正确答案");
              return;
            }
          }
          if (data.type == 4 && data.optionsList.length) {
            for (let i = 0; i < data.optionsList.length; i++) {
              if (
                !data.optionsList[i].content ||
                data.optionsList[i].content == "<p><br></p>"
              ) {
                self.$message.error("请填写题目内容");
                return;
              }
              if (
                data.optionsList[i].type != 3 &&
                data.optionsList[i].type != 5 &&
                !data.optionsList[i].optionsList.length
              ) {
                self.$message.error("请添加选项");
                return;
              }
              if (
                data.optionsList[i].type != 3 &&
                data.optionsList[i].optionsList.length
              ) {
                var ast = data.optionsList[i].optionsList.some((item) => {
                  return !item.content && !item.imgUrl;
                });
                if (ast) {
                  self.$message.error("请完善选项内容");
                  return;
                }
              }
              if (data.optionsList[i].type != 5) {
                if (
                  data.optionsList[i].type === 2 &&
                  !data.optionsList[i].answerQuestionList.length
                ) {
                  self.$message.error("请选择正确答案");
                  return;
                }
                if (
                  data.optionsList[i].type !== 2 &&
                  !data.optionsList[i].answerQuestion
                ) {
                  self.$message.error("请选择正确答案");
                  return;
                }
              }
            }
          }
          var numList = [];
          this.activeExam.map((item) => {
            numList.push(item.knowledgeId);
          });
          data.knowledgeList = this.activeExam;
          data.prefixName = this.listData.prefixName;
          data.knowledgeIds = numList.toString();
          data.publishStatus = this.listData.publishStatus;
          if (data.type === 2) {
            if (data.answerQuestionList.length) {
              data.answerQuestion = data.answerQuestionList.toString();
            }
          }
          if (data.type === 4) {
            data.optionsList.map((item) => {
              if (item.type === 2) {
                if (item.answerQuestionList.length) {
                  item.answerQuestion = item.answerQuestionList.toString();
                }
              }
            });
          }

          if (this.statusPop === 1) {
            data.partScore = 0;
            data.score = "";
            data.status = 1;
            data.businessList = [this.businObj];

            if (this.tableData.length) {
              let maxIndex = 0;
              this.tableData.forEach((item) => {
                if (item.sort > maxIndex) {
                  maxIndex = item.sort;
                }
              });
              data.sort = maxIndex + 1;
            } else {
              data.sort = 1;
            }
            this.tableData.push(data);
            // this.$api.addbankquestion(data).then((res) => {
            self.$message.success("添加成功");
            self.innerVisiblePaperTopic = false;
            self.showHide = false;
            // self.search();
            // });
          }
          if (this.statusPop === 0) {
            this.tableData.splice(this.indexZB, 1, data);
            // this.$api.editbankquestion(data).then((res) => {
            self.$message.success("修改成功");
            self.innerVisiblePaperTopic = false;
            self.showHide = false;
            // self.search();
            // });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    uploadApis(item) {
      return new Promise((resolve, reject) => {
        this.$api.editbankquestion(item).then((res) => {
          resolve();
        });
      });
    },
    addbankquestion(item) {
      return new Promise((resolve, reject) => {
        this.$api.addbankquestion(item).then((res) => {
          resolve(res.data.questionId);
        });
      });
    },
    async submitTableAllInfos() {
      var self = this;
      if (this.examsType === 2) {
        if (Number(this.passScore) > Number(this.getAllpocis)) {
          this.$message.warning("及格分数不得大于当前总分,请重新设置分值");
          return;
        }
      }
      for (let i = 0; i < this.tableData.length; i++) {
        if (!this.tableData[i].sort && this.tableData[i].sort !== 0) {
          this.$message.warning(`题目管理第${i + 1}条请输入排序`);
          return;
        }
      }
      let arr = this.tableData.map((items) => {
        return items.sort;
      });
      if (new Set(arr).size != arr.length) {
        this.$message.warning("排序不允许重复");
        return;
      }
      var arrs = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (self.tableData[i].questionId && self.tableData[i].diff) {
          await self.uploadApis(self.tableData[i]);
        }
        if (!self.tableData[i].questionId) {
          var ids = await self.addbankquestion(self.tableData[i]);
          self.tableData[i].questionId = ids;
        }
        arrs.push({
          questionId: self.tableData[i].questionId,
          sort: self.tableData[i].sort,
          score: self.tableData[i].score,
          partScore: self.tableData[i].partScore,
        });
      }
      var data = {
        examId: this.$route.query.id,
        questionList: arrs,
        status: 1,
        passScore: this.passScore,
        doType: this.examsType,
      };
      if (this.djTimeType === 0) {
        data.answerTime = 0;
      } else {
        data.answerTime = this.djTime;
      }
      if (this.djNumType === 0) {
        data.answerNum = 0;
      } else {
        data.answerNum = this.djNum;
      }
      this.$api.editbankexam(data).then((res) => {
        this.localStart = false;
        this.$message.success("修改成功");
        setTimeout(async () => {
          await this.removeInfo();
          this.$store.dispatch("tagsView/exitView", this.$route).then((res) => {
            this.$router.push({
              path: "testPaperManagement",
            });
          });
        }, 500);
      });
    },
    removeInfo() {
      return new Promise((resolve, reject) => {
        let localStatus = this.$methodsTools.storageGet("exam");
        if (localStatus) {
          if (JSON.parse(localStatus).id == this.$route.query.id) {
            this.$methodsTools.storageRemove("exam");
          }
        }
        resolve();
      });
    },
    backPage() {
      this.$store.dispatch("tagsView/delView", this.$route).then((res) => {
        this.$router.push({
          path: "testPaperManagement",
        });
      });
    },
    emitData() {
      if (!this.tableData.length) {
        this.$message.warning("请添加题目");
        return;
      }
      this.boxtableDataPags = JSON.parse(JSON.stringify(this.tableData));
      this.diansBoxStatus = true;
    },
    closePagsInfos() {
      this.diansBoxStatus = false;
    },
    submitPagsInfos() {
      if (this.examsType === 2) {
        var ast = this.boxtableDataPags.every((item) => {
          if (item.type === 2) {
            return item.partScore >= 0 && item.score >= 0;
          } else {
            return item.score >= 0;
          }
        });
        if (!ast) {
          this.$message.warning("请设置每道题目的分值");
          return;
        }
        if (Number(this.passScore) > Number(this.getAllpocis)) {
          this.$message.warning("及格分数不得大于当前总分");
          return;
        }
      }
      this.tableData = this.boxtableDataPags;
      this.diansBoxStatus = false;
    },
    selectAllPags(value) {
      this.activeListsPags = value;
    },
    selectPags(value) {
      this.activeListsPags = value;
    },
    getRowKeysPags(row) {
      return row.questionId;
    },
    activeOpens() {
      if (!this.activeListsPags.length) {
        this.$message.warning("请选择需要设置分值的题目");
        return;
      }
      this.Pocis = "";
      this.dialogVisibleActivePocis = true;
    },
    closeBoxsActivePocis() {
      this.dialogVisibleActivePocis = false;
    },
    submitActivePocis() {
      this.activeListsPags.map((item) => {
        item.score = this.Pocis;
      });
      this.dialogVisibleActivePocis = false;
      this.activeListsPags = [];
      this.$refs.multipleTables.clearSelection();
    },
    activePicis() {
      if (!this.activeListsPags.length) {
        this.$message.warning("请选择需要设置分值的题目");
        return;
      }
      this.pocisArray = {
        danx: 0,
        duox: 0,
        pand: 0,
        anli: 0,
        jiand: 0,
      };
      for (let i = 0; i < this.activeListsPags.length; i++) {
        if (this.activeListsPags[i].type === 1) {
          this.pocisArray.danx++;
        }
        if (this.activeListsPags[i].type === 2) {
          this.pocisArray.duox++;
        }
        if (this.activeListsPags[i].type === 3) {
          this.pocisArray.pand++;
        }
        if (this.activeListsPags[i].type === 4) {
          this.pocisArray.anli++;
        }
        if (this.activeListsPags[i].type === 5) {
          this.pocisArray.jiand++;
        }
      }
      this.Pocis1 = "";
      this.Pocis2 = "";
      this.Pocis2s = "";
      this.Pocis3 = "";
      this.Pocis4 = "";
      this.Pocis5 = "";
      this.dialogVisibleActivePLPoics = true;
    },
    closeBoxsActivePLPoics() {
      this.dialogVisibleActivePLPoics = false;
    },
    submitActivePLPoics() {
      this.activeListsPags.map((item) => {
        if (item.type === 1) {
          item.score = this.Pocis1;
        }
        if (item.type === 2) {
          item.score = this.Pocis2;
          item.partScore = this.Pocis2s;
        }
        if (item.type === 3) {
          item.score = this.Pocis3;
        }
        if (item.type === 4) {
          item.score = this.Pocis4;
        }
        if (item.type === 5) {
          item.score = this.Pocis5;
        }
      });
      this.dialogVisibleActivePLPoics = false;
      this.activeListsPags = [];
      this.$refs.multipleTables.clearSelection();
    },
    inits() {
      this.getDIO(2);
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.getDIO();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.getDIO();
    },
  },
};
</script>

<style lang="less" scoped>
.boxWidth {
  width: 700px;
}
.numInputs {
  width: 150px;
}
.checkboxSty {
  max-height: 210px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.listBoxStys {
  flex-shrink: 0;
  padding: 0px 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 6px;
}
.closeIcons {
  color: red;
  cursor: pointer;
  margin-left: 6px;
}
.ach {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.imgBoxins {
  width: 375px;
  height: 220px;
  text-align: center;
  img {
    height: 100%;
  }
}
.iconStsz {
  font-size: 40px;
  color: #67c23a;
  cursor: pointer;
}
.BusBoxs {
  min-height: 100px;
  border: 1px solid #a4a4a4;
  margin-bottom: 10px;
  border-radius: 8px;
  max-height: 280px;
  padding: 10px;
  overflow-y: auto;
  .fot_Le {
    border-radius: 12px;
    border: 1px solid yellowgreen;
    padding: 0px 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 6px;
    margin-bottom: 6px;
    .icon_clear {
      margin-left: 2px;
      font-size: 15px;
      color: #f56c6c;
      cursor: pointer;
    }
  }
}
.marg_play {
  display: flex;
  margin-bottom: 15px;
  .spans {
    text-align: right;
    width: 80px;
  }
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.centerStys {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
.dis_fos {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}
.margin_bs {
  margin-bottom: 6px;
}
</style>