<template>
  <div class="questionnaire-cont app-container">
    <el-card :style="{ height: scrollHeight }">
      <div style="display: flex; justify-content: center; font-size: 30px; font-weight: 700" class="mt20, title">
        调查问卷——{{ questionnaireTitle }}
      </div>
      <div v-if="state == 1">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                       v-hasPermi="['smart-campus:purchase:add']">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                       v-hasPermi="['smart-campus:purchase:remove']">删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                       v-hasPermi="['smart-campus:purchase:edit']">修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="el-icon-search" size="mini" :disabled="single" @click="handleDetail">详情
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain size="mini" @click="titleRelateDeleteAll">删除所有题目关联</el-button>
          </el-col>
          <right-toolbar style="float: right" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

          <el-col :span="1.5" style="float: right">
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleOpenExport">导出
            </el-button>
          </el-col>
          <el-col :span="1.5" style="float: right">
            <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
                       v-hasPermi="['smart-campus:purchase:import']">导入
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="排序" sortable prop="nrPx" min-width="50px" align="center"/>
          <el-table-column label="标题" min-width="150px" align="center" prop="nrBt" show-overflow-tooltip/>
          <el-table-column label="题型" min-width="100px" align="center" prop="nrLx">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.quiz_type" :value="scope.row.nrLx"/>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" min-width="50px" align="center" prop="nrSfbt" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.is_required" :value="scope.row.nrSfbt"/>
            </template>
          </el-table-column>
          <el-table-column key="option" width="200px" label="选项 ( 点击查看 )" type="expand" align="center" prop="nr">
            <template slot-scope="scope">
              <div v-for="item in opinionList[scope.$index]"
                   style="font-size: 15px;margin-top: 10px; margin-left: 15px">
                <span style="font-weight: bold">{{ item[0] }} ：</span><span>{{ item[1] }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column key="operation" label="操作" align="center" class-name="small-padding fixed-width"
                           min-width="60px">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--        <ExPagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"-->
        <!--                      :limit.sync="queryParams.pageSize" @pagination="getList"/>-->

        <!-- 添加或修改问卷调查内容对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body @close="dialogClose1">
          <el-form ref="form" :model="form" :rules="rules" :disabled="isDisabled" label-width="80px">
            <el-row>
              <el-col :span="13">
                <el-form-item label="排序" prop="nrPx">
                  <el-input-number v-model="form.nrPx" :min="1" :max="100" label="排序"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="11" style="padding-left: 15px">
                <el-button size="small" @click="addDomain" v-show="!isDisabled" type="success" plain
                           :disabled="!(form.nrLx == 0 || form.nrLx == 1)">
                  新增选项
                </el-button>
                <el-button size="small" @click="delDomain" v-show="!isDisabled" type="danger" plain
                           :disabled="!(form.nrLx == 0 || form.nrLx == 1)">
                  删除选项
                </el-button>
                <el-button size="small" :disabled="form.nrPx==1" @click="titleRelate" type="primary" plain>
                  题目关联
                </el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="题型" prop="nrLx">
                  <el-select v-model="form.nrLx" placeholder="请选择题目类型" style="width: 100%;">
                    <el-option :label="dict.label" :value="dict.value" v-for="dict in dict.type.quiz_type"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :offset="2" :span="11">
                <el-form-item label="是否必填" prop="nrSfbt">
                  <el-select v-model="form.nrSfbt" placeholder="请选择题目是否必填" style="width: 100%;">
                    <el-option :label="dict.label" :value="dict.value"
                               v-for="dict in dict.type.is_required"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="23">
                <el-form-item label="标题" prop="nrBt">
                  <el-input type="textarea" v-model="form.nrBt" placeholder="请输入题目标题"/>
                </el-form-item>
              </el-col>
            </el-row>

            <div v-show="form.nrLx == 0 || form.nrLx == 1">
              <el-row>
                <el-col :span="23">
                  <el-form-item v-show="form.nrA != null" label="选项A" prop="nrA">
                    <el-input v-model="form.nrA" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrB != null" label="选项B" prop="nrB">
                    <el-input v-model="form.nrB" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrC != null" label="选项C" prop="nrC">
                    <el-input v-model="form.nrC" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrD != null" label="选项D" prop="nrD">
                    <el-input v-model="form.nrD" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrE != null" label="选项E" prop="nrE">
                    <el-input v-model="form.nrE" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrF != null" label="选项F" prop="nrF">
                    <el-input v-model="form.nrF" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrG != null" label="选项G" prop="nrG">
                    <el-input v-model="form.nrG" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrH != null" label="选项H" prop="nrH">
                    <el-input v-model="form.nrH" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrI != null" label="选项I" prop="nrI">
                    <el-input v-model="form.nrI" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrJ != null" label="选项J" prop="nrJ">
                    <el-input v-model="form.nrJ" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrK != null" label="选项K" prop="nrK">
                    <el-input v-model="form.nrK" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrL != null" label="选项L" prop="nrL">
                    <el-input v-model="form.nrL" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrM != null" label="选项M" prop="nrM">
                    <el-input v-model="form.nrM" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrN != null" label="选项N" prop="nrN">
                    <el-input v-model="form.nrN" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item v-show="form.nrO != null" label="选项O" prop="nrO">
                    <el-input v-model="form.nrO" placeholder=""/>
                  </el-form-item>
                </el-col>
              </el-row>

            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button v-show="!isDisabled" type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">{{ isDisabled ? '退 出' : '取 消' }}</el-button>
          </div>
        </el-dialog>

        <!-- 导入对话框相关 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
          <el-upload ref="upload" accept=".xlsx, .xls" :limit="1"
                     :action="upload.url + '?updateSupport=' + upload.updateSupport" :headers="upload.headers"
                     :http-request="excelFileUploadMain" :disabled="upload.isUploading"
                     :on-progress="handleFileUploadProgress"
                     :auto-upload="false" drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip text-center" slot="tip">
              <!--            <div class="el-upload__tip" slot="tip">-->
              <!--              <el-checkbox v-model="upload.updateSupport"/>-->
              <!--              是否更新已经存在的用户数据-->
              <!--            </div>-->
              <span>仅允许导入xls、xlsx格式文件。</span>
              <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                       @click="importTemplate">下载模板
              </el-link>
            </div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
      <div v-else>
        <el-row>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="排序" sortable prop="nrPx" min-width="50px" align="center"/>
          <el-table-column label="标题" min-width="150px" align="center" prop="nrBt" show-overflow-tooltip/>
          <el-table-column label="题型" min-width="100px" align="center" prop="nrLx">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.quiz_type" :value="scope.row.nrLx"/>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" min-width="50px" align="center" prop="nrSfbt" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.is_required" :value="scope.row.nrSfbt"/>
            </template>
          </el-table-column>
          <el-table-column key="option" width="200px" label="选项 ( 点击查看 )" type="expand" align="center" prop="nr">
            <template slot-scope="scope">
              <div v-for="item in opinionList[scope.$index]"
                   style="font-size: 15px;margin-top: 10px; margin-left: 15px">
                <span style="font-weight: bold">{{ item[0] }} ：</span><span>{{ item[1] }}</span>
              </div>
            </template>
          </el-table-column>

        </el-table>

        <!--        <ExPagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"-->
        <!--                      :limit.sync="queryParams.pageSize" @pagination="getList"/>-->
      </div>
    </el-card>
    <!-- 题目关联Dialog -->
    <el-dialog title="题目关联" :visible.sync="titleRelateDialogVisible" width="650px" append-to-body>
      <el-form :model="form" label-width="86px">
        <el-form-item label="当前题号：">
          <el-input-number disabled v-model="form.nrPx" :min="1" :max="100" label="排序"></el-input-number>
        </el-form-item>
        <el-form-item label="当前标题：">
          <el-input disabled v-model="form.nrBt" placeholder="请输入题目标题"/>
        </el-form-item>
        <el-form-item label="关联题目：">
          <el-select v-model="form.nrId" style="width: 100%" @change="relateTitleChange"
                     placeholder="请选择关联的题目">
            <el-option
              v-for="item in relateTitleList"
              :key="item.id"
              :label="item.nrPx +'、'+ item.nrBt"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="font-weight: bold; text-align: center; color: red; font-size: 10px">( 当选择下面的选项中的任意一个时，“当前题目”才出现
          )
        </div>
        <br/>
        <el-form-item label="关联选项：" class="region-list-style">
          <el-checkbox-group v-model="nrSelect">
            <template v-for="item in relateCheckList" class="region-list-item">
              <el-checkbox :key="Math.random()" border
                           :label="Object.keys(item)[0]">
                <div class="relateItem">{{ Object.keys(item) + '、' + Object.values(item) }}</div>
              </el-checkbox>
            </template>

          </el-checkbox-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="titleRelateCancel">取消关联</el-button>
        <el-button type="primary" @click="titleRelateSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  findOne,
  addToList,
  editOnList,
  deleteData,
  handleImport,
  deleteAllRelation,
  getRelationTitleList,
  relateTitleOption,
} from "@/api/smartSchool/questionnaireManagement/QuestionnaireContent/request.js";

import {getToken} from "@/utils/auth";
import {isValidNum, ordinaryValidator} from "@/utils/utilLibrary/jaytherValidate";
import {closeCurrentTab} from "@/utils/utilLibrary/routerBatch/routerBatch";
import {QUESTION_STATE} from "@/enums/questionnaire/content";

export default {
  name: "GradeQuestionContent",
  dicts: ["quiz_type", "is_required"],

  data() {
    this.isValidNum = ordinaryValidator(isValidNum, '请填写数字', true)
    return {
      itemIndex: 0,
      dynamicForm: [],
      scrollHeight: document.body.scrollHeight + 'px',
      opinionList: "",
      questionnaireTitle: "",
      QUESTION_STATE,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 问卷调查内容表格数据
      activityList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      examId: null,
      // 问卷调查状态
      state: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nrBt: null,
      },
      // 题目关联列表
      relateTitleList: [],
      titleRelateDialogVisible: false,
      nrSelect: [],
      relateCheckList: [],
      // 表单参数
      form: {
        nrId: undefined,
        // relateCheckList: [],
        nrPx: null,
        nrLx: null,
        nrSfbt: null,
        nrBt: null,
        nrSelect: [],
        id: null,

        nrA: null,
        nrB: null,
        nrC: null,
        nrD: null,
        nrE: null,
        nrF: null,
        nrG: null,
        nrH: null,
        nrI: null,
        nrJ: null,
        nrK: null,
        nrL: null,
        nrM: null,
        nrN: null,
        nrO: null,
        nrP: null,
        nrQ: null,
        nrR: null,
        nrS: null,
        nrT: null,
        nrU: null,
        nrV: null,
        nrW: null,
        nrX: null,
        nrY: null,
        nrZ: null,
      },
      // 表单校验
      rules: {
        nrPx: [
          {required: true, message: "排序不能为空", trigger: "blur"}
        ],
        nrLx: [
          {required: true, message: "题型不能为空", trigger: "blur"}
        ],
        nrSfbt: [
          {required: true, message: "是否必填不能为空", trigger: "blur"}
        ],
        nrBt: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ]
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + `/dcwjNr/importData/${this.examId}`,
      },
      // 用户导出选项
      exportParam: {
        open: false,
        option: "0",
      },
      // 是否禁用表单
      isDisabled: false
    };
  },
  created() {
    // 获取问卷id
    this.examId = +this.$route.params.examId;
    // 获取当前问卷调查的状态
    this.state = this.$route.query && this.$route.query.state;
    this.questionnaireTitle = this.$route.query && this.$route.query.title;
    ;
    this.form.examId = this.examId;
    this.getList();
  },
  methods: {
    // 路由工具库模块
    closeCurrentTab,
    /** 查询问卷调查内容列表 */
    getList() {
      this.loading = true;
      getList({dcwjId: this.examId}).then(response => {
        this.activityList = response.rows
        this.nrPxMax = this.activityList[this.activityList.length - 1]?.nrPx ?? 0
        /** 处理选项内容开始 */
        let arr = response.rows.map((item) => {
          return item.nr
        })
        arr = arr.map((item) => {
          return item.split(";")
        })
        arr = arr.map((item) => {
          item.pop()
          return item
        })
        this.opinionList = arr.map((item) => {
          item = item.map((items) => {
            return items.split(":")
          })
          return item
        })
        /** 处理选项内容结束 */

        this.total = response.total;
        this.loading = false;
      }).catch(error => {
        console.error(error);
        this.loading = false;
      });
    },


    // 表单重置
    reset() {
      this.form = {
        nrPx: null,
        nrLx: null,
        nrBt: null,
        examId: this.examId,
        id: null,
        sort: null,
        quizTitle: null,
        nrA: " ",
        nrB: " ",
        nrC: " ",
        nrD: " ",
        nrE: null,
        nrF: null,
        nrG: null,
        nrH: null,
        nrI: null,
        nrJ: null,
        nrK: null,
        nrL: null,
        nrM: null,
        nrN: null,
        nrO: null,
        nrP: null,
        nrQ: null,
        nrR: null,
        nrS: null,
        nrT: null,
        nrU: null,
        nrV: null,
        nrW: null,
        nrX: null,
        nrY: null,
        nrZ: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.$set(this.form, 'nrPx', this.nrPxMax + 1)
      this.open = true;
      this.isDisabled = false;
      this.title = "添加问卷调查内容";
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids[0]
      let response = await findOne(id)
      if (response) {
        this.form = response.data;
        this.open = true;
        this.isDisabled = false;
        this.title = "修改问卷调查内容";
      }
    },
    /** 查看详情按钮 */
    async handleDetail(row) {
      this.reset();
      const id = row.id || this.ids[0]
      let response = await findOne(id)
      if (response) {
        this.form = response.data;
        this.open = true;
        this.isDisabled = true;
        this.title = "查看问卷调查内容";
      }
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          for (let item in this.form) {
            if (this.form[item] == " ") {
              this.form[item] = null
            }
          }
          let submitData = this.form
          if (this.form.nrLx == 0 || this.form.nrLx == 1) {
          } else {
            this.form.nrA = null,
              this.form.nrB = null,
              this.form.nrC = null,
              this.form.nrD = null,
              this.form.nrE = null,
              this.form.nrF = null,
              this.form.nrG = null,
              this.form.nrH = null,
              this.form.nrI = null
            this.form.nrJ = null,
              this.form.nrK = null,
              this.form.nrL = null,
              this.form.nrM = null,
              this.form.nrN = null,
              this.form.nrO = null,
              this.form.nrP = null,
              this.form.nrQ = null,
              this.form.nrR = null
            this.form.nrS = null,
              this.form.nrT = null,
              this.form.nrU = null,
              this.form.nrV = null,
              this.form.nrW = null,
              this.form.nrX = null,
              this.form.nrY = null,
              this.form.nrZ = null
          }
          this.form.nrSelect = this.nrSelect.toString()


          if (this.form.id != null) {
            editOnList(submitData, this.examId).then(response => {

              /** 清除关联题目id */
              this.form.nrId = null
              /** 清除关联题目列表 */
              this.relateTitleList = []
              /** 清除关联题目下的选项列表 */
              this.relateCheckList.splice(0)
              /** 清除关联题目下的所选的选项 */
              this.nrSelect = []
              this.form.nrSelect = []

              this.$modal.msgSuccess("修改成功");
              this.loading = false
              this.open = false;
              this.getList();
            });
          } else {
            addToList(submitData, this.examId).then(response => {
              /** 清除关联题目id */
              this.form.nrId = null
              /** 清除关联题目列表 */
              this.relateTitleList = []
              /** 清除关联题目下的选项列表 */
              this.relateCheckList.splice(0)
              /** 清除关联题目下的所选的选项 */
              this.nrSelect = []
              this.form.nrSelect = []

              this.$modal.msgSuccess("新增成功");
              this.loading = false
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除所选的调查问卷题目？').then(function () {
        return deleteData(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch((err) => {
        console.error(err)
      });
    },
    /** 导出按钮操作 */
    handleOpenExport() {
      this.download(`/dcwjNr/export/${this.examId}`, {}, `问卷内容${Date.now()}.xlsx`)
    },
    /** 主导出操作 */
    handleExport() {
      const allIds = this.activityList.map(item => item.id)
      const ids = (JSON.stringify(this.ids) !== '[]') ? this.ids : allIds
      switch (this.exportParam.option) {
        // 导出当前页(不按筛选条件过滤)
        case "0":
          this.download(`/dcwjNr/export/${allIds}`, {}, `问卷调查活动${Date.now()}.xlsx`);
          break;
        // 根据筛选框内容导出
        case "1":
          this.download(`/dcwjNr/export/${ids}`, this.queryParams, `问卷调查活动${Date.now()}.xlsx`);
          break;
        // 导出全部数据
        case "2":
          this.download('/dcwjNr/export', {}, `问卷调查活动${Date.now()}.xlsx`);
          break;
      }
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      // console.log(event, file, fileList);
    },
    // // 文件上传自定义函数
    async excelFileUploadMain(fileObj) {
      //将文件放进表单对象进行上传
      let res;
      let fd = new FormData();
      fd.append("file", fileObj.file);
      try {
        // res = (await handleImport(fd)).data;
        res = await handleImport(fd, this.examId);
        // console.log(res);
        //沿袭文件上传成功时的响应函数
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          res.msg +
          "</div>",
          "导入结果",
          {dangerouslyUseHTMLString: true}
        );
        this.getList();
      } catch (error) {
        console.error(error);
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$message.error(res.msg);
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    importTemplate() {
      this.download(
        "/dcwjNr/importTemplate",
        {},
        `问卷调查内容模板_${Date.now()}.xlsx`
      );
    },
    // 新增选项
    addDomain() {
      for (let item in this.form) {
        if (this.form[item] == null) {
          switch (item) {
            case "nrA":
              this.form.nrA = " "
              return
            case "nrB":
              this.form.nrB = " "
              return
            case "nrC":
              this.form.nrC = " "
              return
            case "nrD":
              this.form.nrD = " "
              return
            case "nrE":
              this.form.nrE = " "
              return
            case "nrF":
              this.form.nrF = " "
              return
            case "nrG":
              this.form.nrG = " "
              return
            case "nrH":
              this.form.nrH = " "
              return
            case "nrI":
              this.form.nrI = " "
              return
            case "nrJ":
              this.form.nrJ = " "
              return
            case "nrK":
              this.form.nrK = " "
            case "nrL":
              this.form.nrL = " "
              return
            case "nrM":
              this.form.nrM = " "
              return
            case "nrN":
              this.form.nrN = " "
              return
            case "nrO":
              this.form.nrO = " "
              return
            case "nrP":
              this.form.nrP = " "
              return
            case "nrQ":
              this.form.nrQ = " "
              return
            case "nrR":
              this.form.nrR = " "
              return
            case "nrS":
              this.form.nrS = " "
              return
            case "nrT":
              this.form.nrT = " "
            case "nrU":
              this.form.nrU = " "
              return
            case "nrV":
              this.form.nrV = " "
              return
            case "nrW":
              this.form.nrW = " "
              return
            case "nrX":
              this.form.nrX = " "
              return
            case "nrY":
              this.form.nrY = " "
              return
            case "nrZ":
              this.form.nrZ = " "
              return
            default:
              break
          }
        }
      }
    },
    // 删除选项
    delDomain() {
      for (let item in this.form) {
        if (this.form[item] == null) {
          switch (item) {
            case "nrB":
              this.form.nrA = null
              return
            case "nrC":
              this.form.nrB = null
              return
            case "nrD":
              this.form.nrC = null
              return
            case "nrE":
              this.form.nrD = null
              return
            case "nrF":
              this.form.nrE = null
              return
            case "nrG":
              this.form.nrF = null
              return
            case "nrH":
              this.form.nrG = null
              return
            case "nrI":
              this.form.nrH = null
              return
            case "nrJ":
              this.form.nrI = null
              return
            case "nrK":
              this.form.nrJ = null
            case "nrL":
              this.form.nrK = null
              return
            case "nrM":
              this.form.nrL = null
              return
            case "nrN":
              this.form.nrM = null
              return
            case "nrO":
              this.form.nrN = null
              return
            case "nrP":
              this.form.nrO = null
              return
            case "nrQ":
              this.form.nrP = null
              return
            case "nrR":
              this.form.nrQ = null
              return
            case "nrS":
              this.form.nrR = null
              return
            case "nrT":
              this.form.nrS = null
            case "nrU":
              this.form.nrT = null
              return
            case "nrV":
              this.form.nrU = null
              return
            case "nrW":
              this.form.nrV = null
              return
            case "nrX":
              this.form.nrW = null
              return
            case "nrY":
              this.form.nrX = null
              return
            case "nrZ":
              this.form.nrY = null
              return
            default:
              break
          }
        }
        // else {
        //   this.form.nrO = null
        // }


      }

    },

    /** 相关方法开始************************************** */

    /**题目关联按钮*/
    titleRelate() {
      /**获取可关联题目列表*/
      getRelationTitleList(this.examId, {nrPx: this.form.nrPx}).then((res) => {
        this.relateTitleList = res.rows
      })
      if (this.form.nrSelect) {
        this.nrSelect = this.form.nrSelect.split(',')
      }
      if (this.form.nrId) {
        /**获取关联题目下的选项列表*/
        relateTitleOption(this.form.nrId).then((res) => {
          let obj = res.data
          this.relateCheckList.splice(0)
          for (let i in obj) {
            let tem = {[i]: obj[i]}
            this.relateCheckList.push(tem)
          }
        })
      }
      this.titleRelateDialogVisible = true
    },


    /**关联题目改变*/
    relateTitleChange(data) {
      /**data为关联题目的id*/
      this.relateCheckList.splice(0)
      this.nrSelect.splice(0)
      this.form.nrSelect = []
      /**获取关联题目下的选项列表*/
      relateTitleOption(data).then((res) => {
        let obj = res.data
        for (let i in obj) {
          let tem = {[i]: obj[i]}
          this.relateCheckList.push(tem)
        }
      })
    },

    /**取消本题的题目关联 */
    titleRelateCancel() {
      /** 清除关联题目id */
      this.form.nrId = null
      /** 清除关联题目列表 */
      // this.relateTitleList = []
      /** 清除关联题目下的选项列表 */
      this.relateCheckList.splice(0)
      /** 清除关联题目下的所选的选项 */
      this.nrSelect = []
      this.form.nrSelect = []
    },

    /**删除所有题目之间的关联关系*/
    titleRelateDeleteAll() {
      this.$confirm('确认后将清空本问卷所有题目关联！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$modal.loading("正在删除关联关系，请稍后...");
        let res = await deleteAllRelation(this.examId)
        this.$modal.closeLoading();
        if (res.code == 200) {
          this.titleRelateCancel()
          this.$message({
            type: 'success',
            message: '删除题目关联成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: '删除题目关联失败!'
          });
        }
      }).catch(() => {
        this.$modal.closeLoading();
        this.$message({
          type: 'info',
          message: '已取消删除题目关联'
        });
      });

    },
    // 提交按钮
    titleRelateSubmit() {
      this.form.nrSelect = this.nrSelect.toString()
      this.titleRelateDialogVisible = false
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.titleRelateCancel()
      this.reset();
    },
    dialogClose1() {
      /** 清除关联题目下的选项列表 */
      this.relateCheckList.splice(0)
    }

    /** 相关方法结束************************************** */


  }
}
</script>

<style scoped>
/* 用来对齐 */
.region-list-style /deep/ .el-checkbox + .el-checkbox {
  margin-left: 0px;
}

.region-list-style /deep/ .el-checkbox {
  margin-right: 25px;
}

/* 用来调整每一项的宽度 */
.region-list-item {
  width: 300px;
  white-space: nowrap;
  /* text-overflow: ellipsis; */
  overflow: hidden;
}

.relateItem {
  width: 420px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

</style>

