<template>
  <div class="create-component-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
    >
    </bread-crumb>
    <div class="create-content screenSet" id="screenSet">
      <div class="step-content">
        <el-steps :active="stepNum" simple>
          <span class="step-one" :class="stepNum == 1 ? 'class-1' : 'class-2'"
            >1</span
          >
          <el-step
            title="基础信息"
            :class="stepNum == 1 ? 'class-1-text' : 'class-2-text'"
          ></el-step>
          <span class="step-two" :class="stepNum == 2 ? 'class-1' : 'class-2'"
            >2</span
          >
          <el-step
            title="选择模块"
            :class="stepNum == 2 ? 'class-1-text' : 'class-2-text'"
          ></el-step>
        </el-steps>
        <div class="btn-container">
          <el-button
            v-if="stepNum == 1 && (componentStatus == 1 || !componentStatus)"
            @click="storageAndNext(1)"
            type="default"
            size="small"
            >暂存</el-button
          >
          <el-button
            v-if="stepNum == 1"
            @click="storageAndNext(2)"
            type="primary"
            size="small"
            style="margin-left: 0"
            >下一步</el-button
          >
          <el-button
            v-if="stepNum == 2 && (componentStatus == 1 || !componentStatus)"
            :disabled="newconditionSelect"
            @click="finishConponent(1)"
            type="default"
            size="small"
            >暂存</el-button
          >
          <el-button
            v-if="stepNum == 2"
            @click="finishConponent(2)"
            :disabled="newconditionSelect"
            type="primary"
            size="small"
            style="margin-left: 0"
            >完成</el-button
          >
        </div>
      </div>
      <div class="first-step" v-if="stepNum == 1">
        <el-form
          ref="basicInfoForm"
          class="basic-form"
          :model="portalComponent"
          :rules="rules"
          label-width="175px"
          label-suffix=":"
          size="small"
          style="margin-bottom: 30px"
        >
          <el-form-item label="组件名称" prop="name">
            <el-input
              type="text"
              v-model="portalComponent.name"
              @blur="componentName"
              size="small"
              placeholder="请输入组件名称"
              style="width: 30%"
            ></el-input>
            <span class="word-num"
              >{{ portalComponent.name.replace(/\s+/g, "").length }}/20</span
            >
            <p class="component-name" v-if="isStorage">输入组件名称</p>
          </el-form-item>
          <el-form-item label="组件简介" prop="introduce">
            <el-input
              type="textarea"
              rows="4"
              cols="10"
              v-model="portalComponent.introduce"
              size="small"
              placeholder="请输入组件简介"
              style="width: 37%"
            ></el-input>
            <span class="word-num"
              >{{
                portalComponent.introduce.replace(/\s+/g, "").length
              }}/150</span
            >
          </el-form-item>
          <!-- <div class="basic-item-icon">
                        <span class="require">*</span>
                        <el-form-item label="组件图片" prop="imageUrl">
                            <el-upload
                                v-model="portalComponent.imageUrl"
                                class="bg-uploader"
                                action="#"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="portalComponent.imageUrl" @mouseover.stop="imgMouseOver=true" :src="portalComponent.imageUrl" class="bg-img">
                                <img v-if="!portalComponent.imageUrl" class="bg-img" src="../../assets/image/small.png">
                                <div class="img-delete" v-show="imgMouseOver" @click.stop="deleteImg" @mouseout.stop="imgMouseOver=false"><i class="el-icon-delete"></i></div>
                                <div class="limit-text">
                                    <p>尺寸大小:750*420</p>
                                    <p>限制大小: 2.0 Mb</p>
                                    <p>支持.jpg,.png格式</p>
                                </div>
                            </el-upload>
                        </el-form-item>
                        <p class="upload-message" v-if="uploadImgMessage">请上传组件图片</p>
                    </div> -->
          <el-form-item
            label="组件内的模块完成比率须≥"
            prop="certificateCondition"
          >
            <el-input-number
              v-model="portalComponent.certificateCondition"
              controls-position="right"
              @change="handleChange"
              :disabled="componentStatus == 3 || componentStatus == 4"
              :precision="0"
              :step="1"
              :min="0"
              :max="100"
            >
            </el-input-number>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <div class="basic-item-icon">
                <el-form-item label="配置证书" required>
                  <el-radio-group
                    v-model="certificateLable"
                    @change="selectCertificate"
                    :disabled="componentStatus == 3 || componentStatus == 4"
                  >
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="10" v-if="hasCertificate">
              <el-form-item label="选择证书" prop="certificateId">
                <el-select
                  v-model="portalComponent.certificateId"
                  @change="selectChange"
                  :disabled="componentStatus == 3 || componentStatus == 4"
                  placeholder="请选择证书"
                  style="width: 352px"
                >
                  <el-option
                    v-for="(item, index) in certificateIdSelect"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="" v-if="stepNum == 2">
        <div class="model-btn">
          <el-button
            v-if="idType == 1"
            type="primary"
            size="small"
            @click="addModule"
            >添加空白模块</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="addFromModule"
            style="margin-left: 0"
            >从预设模块添加</el-button
          >
        </div>
        <div v-if="reRender" class="tab-content">
          <el-tabs
            type="card"
            closable
            v-model="firstTab"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              class="sort-tabs"
              v-for="(item, index) in componentList.moduleModelList"
              :key="index"
              :label="'模块' + parseInt(index + 1)"
              :name="'' + parseInt(index + 1)"
            >
              <div>
                <el-form
                  ref="moduleForm"
                  :model="item"
                  :rules="moduleRules"
                  label-suffix=":"
                  label-width="130px"
                  style="width: 100%"
                >
                  <el-row>
                    <el-col :span="10">
                      <el-form-item label="模块名称" prop="name">
                        <el-input
                          v-model="item.name"
                          @blur="moduleNameValidate(index)"
                          :disabled="fieldDisabled(item)"
                          size="small"
                          placeholder="请选择模块名称"
                          style="width: 288px"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8" v-if="idType == 1">
                      <el-form-item label="是否对外开放" prop="openFlag">
                        <el-radio-group
                          v-model="item.openFlag"
                          @change="selectIsOpen(index)"
                        >
                          <!-- :disabled="fieldDisabled(item) || item.openDisabled" -->
                          <el-radio :label="2">是</el-radio>
                          <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="idType == 1">
                      <el-form-item label="通过标准" prop="passType">
                        <el-radio-group
                          v-model="item.passType"
                          @change="selectStandard(index)"
                        >
                          <el-radio :label="1">全部完成</el-radio>
                          <el-radio :label="2">无要求</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6" v-if="idType == 1">
                      <el-form-item label="是否启用" prop="status">
                        <el-radio-group
                          v-model="item.status"
                          @change="selectIsOpenStatus(index)"
                          :disabled="fieldDisabled(item)"
                        >
                          <el-radio :label="2">是</el-radio>
                          <el-radio :label="1">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col> -->
                  </el-row>
                </el-form>
                <div class="template-btn" v-if="idType == 1">
                  <span class="word-size">添加一个模板</span>
                  <el-button
                    :disabled="fieldDisabled(item)"
                    v-for="(_item, _index) in templateDataList"
                    :key="_index"
                    type="primary"
                    size="small"
                    @click="addTemplate(_item, index)"
                    style="margin-right: 0px"
                    >{{ _item.name }}</el-button
                  >
                </div>
                <div
                  v-for="(item1, index1) in item.templetModelList"
                  :key="index1"
                >
                  <el-form
                    ref="templateForm"
                    :model="item1"
                    label-suffix=":"
                    label-width="110px"
                    style="width: 100%"
                  >
                    <div class="template-content">
                      <div class="template-content-div">
                        <div class="title">
                          {{ item1.name }}
                          <!-- <span v-if="newfieldDisabled(item)"> -->
                          <span>
                            变更顺序:
                            <i
                              class="el-icon-caret-bottom"
                              @click="sortUp(index, index1)"
                              style="font-size: 17px"
                            ></i>
                            <i
                              class="el-icon-caret-top"
                              @click="sortDown(index, index1)"
                              style="font-size: 17px"
                            ></i>
                            <i
                              class="el-icon-delete"
                              @click="beforeDeleteTemplate(index, index1)"
                              style="color: red"
                            ></i>
                          </span>
                        </div>
                        <div
                          v-for="(item2, index2) in item1.partModelList"
                          :key="index2"
                        >
                          <!-- 考试 -->
                          <div v-if="item2.type == 1">
                            <div class="partText" v-if="index2 > 0">
                              {{ item2.introduce }}
                            </div>
                            <div
                              v-for="(item3,
                              index3) in item2.partContentModelList"
                              :key="index3"
                            >
                              <el-row>
                                <el-col :span="10" class="item-icon">
                                  <span class="require">*</span>
                                  <el-form-item label="考试名称">
                                    <el-input
                                      v-model="item3.content1"
                                      :disabled="fieldDisabled(item)"
                                      size="small"
                                      maxlength="30"
                                      placeholder="请输入考试名称"
                                      style="width: 288px"
                                    ></el-input>
                                    <span
                                      v-if="item2.numFlag == 2 && index3 == 0"
                                      ><i
                                        class="el-icon-circle-plus"
                                        @click="
                                          addMatterCourse(index, index1, index2)
                                        "
                                        style="color: #449284"
                                      ></i
                                    ></span>
                                    <span
                                      v-if="item2.numFlag == 2 && index3 > 0"
                                      ><i
                                        class="el-icon-delete"
                                        @click="
                                          beforeDeleteMatterCourse(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="color: red"
                                      ></i
                                    ></span>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="10" class="item-icon">
                                  <span class="require">*</span>
                                  <el-form-item label="关联考试">
                                    <el-select
                                      placeholder="请选择"
                                      v-model="item3.content3"
                                      @focus="
                                        examIDfocus(
                                          index,
                                          index1,
                                          index2,
                                          index3
                                        )
                                      "
                                      @change="handleExamTypeChange"
                                      size="small"
                                      :disabled="fieldDisabled(item)"
                                    >
                                      <el-option
                                        v-for="(examItem,
                                        examTypeIndex) in examTypeList"
                                        :key="examTypeIndex"
                                        :label="examItem.text"
                                        :value="examItem.type"
                                      >
                                      </el-option>
                                    </el-select>
                                    <el-select
                                      v-model="item3.content2"
                                      filterable
                                      @focus="
                                        examIDfocus(
                                          index,
                                          index1,
                                          index2,
                                          index3
                                        )
                                      "
                                      @change="changeExamID"
                                      :disabled="fieldDisabled(item)"
                                      size="small"
                                      placeholder="请选择考试ID"
                                      style="width: 288px"
                                    >
                                      <!-- 所有考试 列表-->
                                      <template v-if="item3.content3 == 0">
                                        <el-option
                                          v-for="(itemTest,
                                          indexTest) in testIdSelect"
                                          :key="indexTest"
                                          :label="itemTest.onlineExamName"
                                          :value="itemTest.id + ''"
                                        >
                                        </el-option>
                                      </template>
                                      <!-- 需审核考试 列表 -->
                                      <template v-if="item3.content3 == 1">
                                        <el-option
                                          v-for="(itemTest,
                                          indexTest) in examSelectList"
                                          :key="indexTest"
                                          :label="itemTest.onlineExamName"
                                          :value="itemTest.id + ''"
                                        >
                                        </el-option>
                                      </template>
                                    </el-select>
                                  </el-form-item>
                                </el-col>
                              </el-row>
                              <el-row>
                                <el-col :span="10" class="item-icon">
                                  <span class="require">*</span>
                                  <el-form-item label="配置证书">
                                    <el-radio-group
                                      v-model="item3.certificateFlag"
                                      :disabled="fieldDisabled(item)"
                                    >
                                      <el-radio :label="2">是</el-radio>
                                      <el-radio :label="1">否</el-radio>
                                    </el-radio-group>
                                  </el-form-item>
                                </el-col>
                                <el-col
                                  :span="10"
                                  v-if="item3.certificateFlag == 2"
                                  class="item-icon"
                                >
                                  <span class="require">*</span>
                                  <el-form-item label="选择证书">
                                    <el-select
                                      v-model="item3.content4"
                                      :disabled="fieldDisabled(item)"
                                      size="small"
                                      placeholder="请选择证书"
                                      style="width: 288px"
                                    >
                                      <el-option
                                        v-for="(itemCertificate,
                                        indexCertificate) in certificateIdSelect"
                                        :key="indexCertificate"
                                        :label="itemCertificate.name"
                                        :value="itemCertificate.id + ''"
                                      >
                                      </el-option>
                                    </el-select>
                                  </el-form-item>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                          <!-- 课程 -->
                          <div v-if="item2.type == 2">
                            <div class="partText" v-if="index2 > 0">
                              {{ item2.introduce }}
                            </div>
                            <div class="sortable-course">
                              <el-row
                                v-for="(item3,
                                index3) in item2.partContentModelList"
                                :key="index3"
                              >
                                <el-col :span="10" class="item-icon">
                                  <span class="require">*</span>
                                  <el-form-item label="课程名称">
                                    <el-input
                                      v-model="item3.content1"
                                      :disabled="fieldDisabled(item)"
                                      size="small"
                                      maxlength="30"
                                      placeholder="请输入课程名称"
                                      style="width: 288px"
                                    ></el-input>
                                    <span
                                      v-if="item2.numFlag == 2 && index3 == 0"
                                      ><i
                                        class="el-icon-circle-plus"
                                        @click="
                                          addMatterCourse(index, index1, index2)
                                        "
                                        style="color: #449284"
                                      ></i>
                                      <i
                                        class="el-icon-caret-bottom"
                                        @click="
                                          sortCourseDown(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="font-size: 17px"
                                      ></i>
                                      <i
                                        class="el-icon-caret-top"
                                        @click="
                                          sortCourseUp(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="font-size: 17px"
                                      ></i>
                                    </span>
                                    <span
                                      v-if="item2.numFlag == 2 && index3 > 0"
                                      ><i
                                        class="el-icon-delete"
                                        @click="
                                          beforeDeleteMatterCourse(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="color: red"
                                      ></i>
                                      <i
                                        class="el-icon-caret-bottom"
                                        @click="
                                          sortCourseDown(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="font-size: 17px"
                                      ></i>
                                      <i
                                        class="el-icon-caret-top"
                                        @click="
                                          sortCourseUp(
                                            index,
                                            index1,
                                            index2,
                                            index3
                                          )
                                        "
                                        style="font-size: 17px"
                                      ></i>
                                    </span>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="10" class="item-icon">
                                  <span class="require">*</span>
                                  <el-form-item label="关联课程">
                                    <el-select
                                      v-model="item3.content2"
                                      filterable
                                      @focus="
                                        courseIDfocus(
                                          index,
                                          index1,
                                          index2,
                                          index3
                                        )
                                      "
                                      @change="changeCourseID"
                                      :disabled="fieldDisabled(item)"
                                      size="small"
                                      placeholder="请选择课程ID"
                                      style="width: 288px"
                                    >
                                      <el-option
                                        v-for="(itemCourse,
                                        indexCourse) in courseIdSelect"
                                        :key="indexCourse"
                                        :label="itemCourse.name"
                                        :value="itemCourse.id + ''"
                                      >
                                      </el-option>
                                    </el-select>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                  <el-form-item label="是否有试看限制">
                                    <el-radio-group v-model="item3.content5">
                                      <el-radio label="1">是</el-radio>
                                      <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="10" v-if="item3.content5 == 1">
                                  <el-form-item label="试看时长">
                                    <el-input
                                      maxlength="8"
                                      type="input"
                                      rows="4"
                                      v-model="item3.content6"
                                      size="small"
                                      placeholder="请输入试看时长"
                                      style="width: 300px"
                                    ></el-input>
                                    <span class="word-num">(秒)</span>
                                  </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                  <el-form-item label="是否隐藏">
                                    <el-radio-group v-model="item3.content7">
                                      <el-radio label="1">是</el-radio>
                                      <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                  </el-form-item>
                                </el-col>
                              </el-row>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="columnFormVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="resourceForm"
        class="creat-form"
        :model="selectResource"
        label-width="145px"
        label-suffix=":"
        size="small"
      >
        <el-form-item label="请选择一个模块" prop="">
          <el-select
            v-model="selectResource.resourceModuleSelect"
            @change="selectChange"
            placeholder="请选择资源包"
            style="width: 60%"
          >
            <el-option
              v-for="(item, index) in resourceArray"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        class="default-module"
        v-for="(item, index) in dialogData.templetModelList"
        :key="index"
      >
        <el-form
          ref="dialogEmplateForm"
          label-suffix=":"
          label-width="80px"
          style="width: 100%"
        >
          <div class="dialog-template-content">
            <div v-for="(item1, index1) in item.partModelList" :key="index1">
              <!-- 考试 -->
              <div v-if="item1.type == 1">
                <div
                  v-for="(item2, index2) in item1.partContentModelList"
                  :key="index2"
                >
                  <el-row>
                    <el-col :span="10">
                      <el-form-item label="考试名称">
                        <span>{{ item2.content1 }}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10">
                      <el-form-item label="配置证书">
                        <span v-if="item2.certificateFlag == 2">是</span>
                        <span v-else>否</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 课程 -->
              <div v-if="item1.type == 2">
                <el-row
                  v-for="(item2, index2) in item1.partContentModelList"
                  :key="index2"
                >
                  <el-col :span="10">
                    <el-form-item label="课程名称">
                      <span>{{ item2.content1 }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer dialog-foot">
        <el-button
          type="default"
          size="small"
          @click="columnFormVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" size="small" @click="submitDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
// import { validateWord150 } from "../../utils/validate.js"
import { mapGetters } from "vuex";
import {
  openLoading,
  closeLoading,
  isNotEmptyUtils,
  isEmptyList,
  isNotEmptyList,
} from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import Sortable from "sortablejs";

let vm = null;
// 判断组件是否重名
let validateRepeatWord = function (rule, value, callback, message) {
  let req = {
    token: vm._token,
    name: value,
    idType: vm.idType, // 1内部  2外部
    id: null || vm.componentId,
  };
  if (vm.itemName != value) {
    vm.GET("portal/portalComponent/checkComponentName", req).then((res) => {
      if (res.code == "000000") {
        if (res.data.resultFlag == 2) {
          callback(new Error(message));
        } else {
          callback();
        }
      }
    });
  } else {
    callback();
  }
};
// 判断模块是否重名(对外开放时候验证)
let validateModuleName = function (rule, value, callback, message) {
  for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
    if (vm.firstTab == parseInt(i + 1)) {
      vm.GET("portal/portalComponent/checkModuleName", {
        name: value,
        openFlag: vm.componentList.moduleModelList[i].openFlag,
      }).then((res) => {
        if (res.code == "000000") {
          if (res.data > 0) {
            vm.componentList.moduleModelList[i].name = "";
            callback(new Error(message));
            return;
          } else {
            callback();
          }
        }
      });
      break;
    }
  }
};
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      columnFormVisible: false,
      uploadImgMessage: false,
      imgMouseOver: false,
      itemName: "",
      examName: "",
      examIndex: "",
      examIndex1: "",
      examIndex2: "",
      examIndex3: "",
      courseName: "",
      courseIndex: "",
      courseIndex1: "",
      courseIndex2: "",
      courseIndex3: "",
      stepNum: 1,
      componentId: "",
      componentStatus: "",
      resultFlag: "",
      conditionSelect: false,
      newconditionSelect: false,
      conditionAnd: true,
      isStorage: false,
      dialogTitle: "选择模板",
      curmbFirst: "教培项目",
      curmbSecond: "项目组件",
      curmbThird: "新增项目组件",
      jumPathThird: "/item-component",
      firstTab: "1",
      hasCertificate: false,
      certificateLable: "否",
      portCertificateLable: "否",
      moduleIndex: "",
      editableTabs: [
        {
          title: "模块 1",
          name: "1",
        },
      ],
      templateDataList: [],
      templetIndex: 0,
      examTypeList: [
        // 考试类型：  0所有考试 1需审核考试
        { text: "所有考试", type: "0" },
        { text: "需审核考试", type: "1" },
      ],
      testIdSelect: [], // 考试ID下拉列表 （所有考试）
      examSelectList: [], // 考试ID下拉列表 （需审核考试）
      certificateIdSelect: [], // 证书下拉列表
      courseIdSelect: [], // 课程下拉列表
      dialogData: [],
      portalComponent: {
        idType: "",
        organizationId: "",
        name: "",
        id: "",
        introduce: "",
        imageUrl: "",
        seqNo: "",
        certificateId: "", // 0 没有证书,配置证书为否
        certificateCondition: "100", // 证书完成率
        status: "",
      },
      componentList: {
        moduleModelList: [
          {
            id: "",
            name: "",
            openFlag: "", // 1 否 不开放  2 是 开放,
            passType: "1", //1：全部完成  2：无要求
            templetModelList: [],
          },
        ],
      },
      resourceArray: [],
      selectResource: {
        resourceModuleSelect: "",
      },
      rules: {
        name: [
          { required: true, message: "输入组件名称", trigger: "blur" },
          { min: 2, max: 20, message: "输入长度为2-20个字符", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              validateRepeatWord(
                rule,
                value,
                callback,
                "该组件名称已存在，请使用一个新的组件名称"
              );
            },
            trigger: "blur",
          },
        ],
        introduce: [
          { required: true, message: "请输入组件简介", trigger: "blur" },
          {
            min: 1,
            max: 151,
            message: "超出可输入的最大长度",
            trigger: "blur",
          },
        ],
        certificateId: [
          { required: true, message: "请选择证书", trigger: "blur" },
        ],
        certificateCondition: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
      },
      moduleRules: {
        name: [
          { required: true, message: "请输入模块名称", trigger: "blur" },
          { min: 2, max: 40, message: "输入长度为2-40个字符", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              validateModuleName(
                rule,
                value,
                callback,
                "模块名称已存在，请修改名称后保存"
              );
            },
            trigger: "blur",
          },
        ],
        openFlag: [
          { required: true, message: "请选择是否对外开放", trigger: "blur" },
        ],
        // stauts: [
        //   { required: true, message: "请选择是否启用", trigger: "blur" },
        // ],
      },
      reRender: true,
    };
  },
  computed: {
    ...mapGetters(["_token", "idType"]),
  },
  created() {
    console.log("#######==========#####");
    vm = this;
    vm.componentId = vm.$route.query.id;
    vm.componentStatus = vm.$route.query.status; // 3 启用  4 禁用
    vm.resultFlag = vm.$route.query.resultFlag; // 判断可编辑范围是基础信息还是全部信息  1 为全部  2 为基础
    vm.getCertificateList(); // 获取证书列表
    vm.componentBasicInfo(); // 根据ID查询组件基本信息
    vm.getTestListData(); // 获取考试列表
    vm.getCourseData(); // 获取课程列表
    vm.getTemplateData(); // 获取模板信息
    vm.conditionSelect =
      vm.resultFlag == 2 || vm.componentStatus == 3 || vm.componentStatus == 4;
    //        vm.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 4
    vm.newconditionSelect = vm.componentStatus == 4;
    if (vm.componentStatus && vm.resultFlag) {
      //vm.conditionAnd = vm.resultFlag == 1 && vm.componentStatus != 3 && vm.componentStatus != 4
      vm.conditionAnd = vm.componentStatus != 4;
    }
  },
  // 挂载到Dom完成时
  mounted: function () {
    commonUtil.resizeHeight();
    console.log("idType==>", vm.idType);
  },
  methods: {
    // 模块可以拖动排序
    tabDrop() {
      this.$nextTick(() => {
        var $ul = this.$el.querySelector(".tab-content .el-tabs__nav");
        var that = this;
        var updateFunc = function (event) {
          var newIndex = event.newIndex,
            oldIndex = event.oldIndex;
          //   var oldItem = that.componentList.moduleModelList[oldIndex];
          //   var newItem = that.componentList.moduleModelList[newIndex];

          //   that.$set(that.componentList.moduleModelList, oldIndex, newItem);
          //   that.$set(that.componentList.moduleModelList, newIndex, oldItem);

          const currRow = that.componentList.moduleModelList.splice(
            oldIndex,
            1
          )[0];
          that.componentList.moduleModelList.splice(newIndex, 0, currRow);
          that.$forceUpdate();
          console.log(
            "that.componentList.moduleModelList",
            that.componentList.moduleModelList
          );

          // 暴力重新渲染！
          that.reRender = false;
          // 借助nextTick和v-if重新渲染
          that.$nextTick(function () {
            that.reRender = true;
            that.$nextTick(function () {
              // 重新渲染之后，重新进行Sortable绑定
              new Sortable(
                that.$el.querySelector(".tab-content .el-tabs__nav"),
                {
                  onUpdate: updateFunc,
                }
              );
            });
          });
        };
        new Sortable($ul, {
          onUpdate: updateFunc,
        });
      });
    },

    // 根据ID查询组件基本信息
    componentBasicInfo() {
      if (vm.componentId) {
        openLoading(vm);
        vm.GET("portal/portalComponent/queryPortalComponentById", {
          id: vm.componentId,
        }).then((res) => {
          closeLoading(vm);
          if (res.code == "000000") {
            vm.portalComponent = res.data.portalComponent;
            vm.itemName = vm.portalComponent.name;
            if (!vm.portalComponent.certificateId) {
              vm.hasCertificate = false;
              vm.certificateLable = "否";
            } else {
              vm.hasCertificate = true;
              vm.certificateLable = "是";
            }
          }
        });
      }
    },

    selectStandard(index) {},
    //  删除图片
    deleteImg() {
      vm.portalComponent.imageUrl = "";
      vm.imgMouseOver = false;
    },
    // 是否配置证书
    selectCertificate(val) {
      vm.portalComponent.certificateId = "";
      if (val == "否") {
        vm.hasCertificate = false;
        //vm.portalComponent.certificateCondition = 0
      } else {
        vm.hasCertificate = true;
        //vm.portalComponent.certificateCondition = 100
      }
      vm.portalComponent.certificateCondition = 100;
    },
    // 获取组件完成率
    handleChange(value) {
      console.log(value);
      if (value == 1) {
      }
      vm.portalComponent.certificateCondition = value;
    },
    // 获取证书下拉列表
    getCertificateList() {
      vm.GET("portal/portalComponent/CertificateList").then((res) => {
        if (res.code == "000000") {
          vm.certificateIdSelect = res.data.certificateList;
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 暂存(下一步)
    storageAndNext(flag) {
      if (vm.componentId) {
        // 编辑
        vm.submitBasicData(
          flag,
          "portal/portalComponent/updatePortalComponent"
        );
      } else {
        // 新增
        vm.submitBasicData(
          flag,
          "portal/portalComponent/insertPortalComponent"
        );
      }
    },
    submitBasicData(flag, url) {
      if (flag == 1) {
        // 暂存
        vm.portalComponent.status = 1;
        if (!vm.portalComponent.name) {
          vm.isStorage = true;
          return;
        } else {
          vm.isStorage = false;
        }
        vm.submitBasic(flag, url);
      } else {
        // 下一步
        vm.isStorage = false;
        if (!vm.componentId) {
          vm.portalComponent.status = 1;
        }
        if (!vm.portalComponent.imageUrl) {
          vm.uploadImgMessage = true;
          // return
        } else {
          vm.uploadImgMessage = false;
        }
        vm.$refs.basicInfoForm.validate((valid) => {
          if (valid) {
            vm.submitBasic(flag, url);
          } else {
            return false;
          }
        });
      }
    },
    componentName() {
      vm.isStorage = false;
    },
    submitBasic(flag, url) {
      let req = {
        token: vm._token,
        name: vm.portalComponent.name,
        idType: vm.idType, // 1内部  2外部
        id: null || vm.componentId,
      };
      if (vm.portalComponent.name != vm.itemName) {
        vm.GET("portal/portalComponent/checkComponentName", req).then((res) => {
          if (res.code == "000000") {
            if (res.data.resultFlag == 2) {
              vm.$message.info("该组件名称已存在，请使用一个新的组件名称");
              return;
            } else {
              vm.portalComponent.idType = vm.idType;
              vm.portalComponent.id = vm.componentId;
              vm.POST(url, { model: vm.portalComponent }).then((res) => {
                if (res.code == "000000") {
                  if (!vm.componentId) {
                    vm.componentId = res.data;
                  }
                  if (flag == 2) {
                    vm.stepNum = 2;
                    //vm.getTemplateData()
                    vm.getModuleData();
                    vm.tabDrop();
                    // vm.getTestListData()
                    // vm.getCourseData()
                  } else {
                    vm.$message.info("暂存成功！");
                  }
                }
              });
            }
          } else {
            vm.$message.info(res.message);
          }
        });
      } else {
        vm.portalComponent.idType = vm.idType;
        vm.portalComponent.id = vm.componentId;
        vm.POST(url, { model: vm.portalComponent }).then((res) => {
          if (res.code == "000000") {
            if (!vm.componentId) {
              vm.componentId = res.data;
            }
            if (flag == 2) {
              vm.stepNum = 2;
              //vm.getTemplateData()
              vm.getModuleData();
              vm.tabDrop();
              // vm.getTestListData()
              // vm.getCourseData()
            } else {
              vm.$message.info("暂存成功！");
            }
          }
        });
      }
    },
    // 上传组件图片
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG && !isLt2M) {
        vm.$message.error("图片不符合规范，请根据规范上传图片");
        return;
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        image.onload = function () {
          let _this = this;
          if (_this.width != 750 || _this.height != 420) {
            vm.$message.info("图片不符合规范，请根据规范上传图片");
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function (path) {
              closeLoading(vm);
              vm.portalComponent.imageUrl = path.fullPath;
              vm.uploadImgMessage = false;
            });
          }
        };
      };
    },
    // 获取考试下拉列表
    getTestListData() {
      vm.GET("portal/portalComponent/OnlineExamList").then((res) => {
        if (res.code == "000000") {
          vm.testIdSelect = res.data.onlineExamList;
          vm.testIdSelect.unshift({
            id: 0,
            onlineExamName: "无考试",
          });
          for (let i = 0; i < vm.testIdSelect.length; i++) {
            let type = vm.testIdSelect[i].isNeedApproval; // isNeedApproval: 0 全部考试 1 需审核考试
            if (type && type == 1) {
              vm.examSelectList.push(vm.testIdSelect[i]);
            }
          }
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 考试种类切换 清空考试选择
    handleExamTypeChange(value) {
      vm.componentList.moduleModelList[vm.examIndex].templetModelList[
        vm.examIndex1
      ].partModelList[vm.examIndex2].partContentModelList[
        vm.examIndex3
      ].content2 = "";
    },
    // 根据考试ID填充考试名称
    changeExamID(value) {
      let examName = "";
      for (let i = 0; i < vm.testIdSelect.length; i++) {
        if (value == vm.testIdSelect[i].id) {
          examName = vm.testIdSelect[i].onlineExamName;
        }
      }
      if (
        !vm.componentList.moduleModelList[vm.examIndex].templetModelList[
          vm.examIndex1
        ].partModelList[vm.examIndex2].partContentModelList[vm.examIndex3]
          .content1
      ) {
        vm.componentList.moduleModelList[vm.examIndex].templetModelList[
          vm.examIndex1
        ].partModelList[vm.examIndex2].partContentModelList[
          vm.examIndex3
        ].content1 = examName;
      }
    },
    examIDfocus(index, index1, index2, index3) {
      vm.examIndex = index;
      vm.examIndex1 = index1;
      vm.examIndex2 = index2;
      vm.examIndex3 = index3;
    },
    // 获取课程下拉列表
    getCourseData() {
      vm.GET("portal/portalComponent/CourseList").then((res) => {
        if (res.code == "000000") {
          vm.courseIdSelect = res.data.courseList;
          vm.courseIdSelect.unshift({
            id: 0,
            name: "无课程",
          });
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 根据课程ID填充课程名称
    changeCourseID(value) {
      let courseName = "";
      for (let i = 0; i < vm.courseIdSelect.length; i++) {
        if (value == vm.courseIdSelect[i].id) {
          courseName = vm.courseIdSelect[i].name;
        }
      }
      if (
        !vm.componentList.moduleModelList[vm.courseIndex].templetModelList[
          vm.courseIndex1
        ].partModelList[vm.courseIndex2].partContentModelList[vm.courseIndex3]
          .content1
      ) {
        vm.componentList.moduleModelList[vm.courseIndex].templetModelList[
          vm.courseIndex1
        ].partModelList[vm.courseIndex2].partContentModelList[
          vm.courseIndex3
        ].content1 = courseName;
      }
    },
    courseIDfocus(index, index1, index2, index3) {
      vm.courseIndex = index;
      vm.courseIndex1 = index1;
      vm.courseIndex2 = index2;
      vm.courseIndex3 = index3;
    },
    // 获取默认模板
    getTemplateData() {
      vm.GET("portal/portalComponent/TempletConfigList").then((res) => {
        if (res.code == "000000") {
          vm.templateDataList = res.data.templetConfigModelList;
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 通过编辑获取模块信息
    getModuleData() {
      vm.GET("portal/portalComponent/ModuleList", {
        componentId: vm.componentId,
      }).then((res) => {
        if (res.code == "000000") {
          vm.componentList.moduleModelList = res.data.moduleModelList;
          vm.setOpenStatusFromData(vm.componentList.moduleModelList);
        } else {
          vm.$message.info(res.message);
        }
      });
    },
    // 从接口数据的status判断启用状态
    setOpenStatusFromData(list) {
      // 1模块未启用  2模块已启用
      for (let i = 0; i < list.length; i++) {
        if (list[i].status == 2) {
          vm.componentList.moduleModelList[i].statusFlag = true;
        } else {
          vm.componentList.moduleModelList[i].statusFlag = false;
          vm.componentList.moduleModelList[i].openDisabled = true;
        }
      }
    },
    fieldDisabledStandard(item) {
      return vm.componentStatus == 3 || vm.componentStatus == 4;
    },
    fieldDisabled(item) {
      return false;
      //   return vm.conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || vm.idType == 2 || item.statusFlag
      //   return vm.newconditionSelect || item.moduleType == 2 || vm.idType == 2 || (vm.componentStatus != 1 && vm.componentStatus != 2 && item.statusFlag);
    },
    newfieldDisabled(item) {
      return false;
      //conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.status == 1)) && idType == 1
      // return vm.conditionAnd && ((vm.componentStatus == 1 || vm.componentStatus == 2) || ((vm.componentStatus != 1 || vm.componentStatus != 2) && !item.statusFlag)) && item.moduleType == 1 && vm.idType == 1
    },
    // 选择是否启用状态
    // selectIsOpenStatus(index) {
    //   const status = vm.componentList.moduleModelList[index].status;
    //   if (status == 1) {
    //     vm.componentList.moduleModelList[index].openFlag = 1;
    //     vm.componentList.moduleModelList[index].openDisabled = true;
    //   } else {
    //     vm.componentList.moduleModelList[index].openDisabled = false;
    //   }
    //   vm.$forceUpdate();
    // },
    // 模块是否对外开放
    selectIsOpen(index) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          if (vm.componentList.moduleModelList[i].name) {
            vm.GET("portal/portalComponent/checkModuleName", {
              name: vm.componentList.moduleModelList[i].name,
              openFlag: vm.componentList.moduleModelList[i].openFlag,
            }).then((res) => {
              if (res.code == "000000") {
                if (res.data > 0) {
                  vm.componentList.moduleModelList[i].name = "";
                  vm.$message.info("模块名称已存在，请修改名称后保存");
                }
              }
            });
          }
          break;
        }
      }
      //          const openFlag = vm.componentList.moduleModelList[index].openFlag;
      //          if(openFlag == 2){
      ////            vm.componentList.moduleModelList[index].openFlag = 1;
      //            vm.componentList.moduleModelList[index].statusFlag = true;
      //          }
      //          vm.$forceUpdate();
    },

    // 删除模块前进行确认
    beforeRemoveTab(targetName) {
      // 模板不为空
      vm.$confirm("确定要删除此模块及包含的内容吗？<br>（<span style='color:red;font-size:12px;'>如需更新学情报告，可通过上下架项目实现</span>）", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "放弃",
        dangerouslyUseHTMLString: true,
        type: "warning",
      })
        .then(() => {
          vm.removeTab(targetName);
        })
        .catch(() => {
          vm.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 删除tab
    removeTab(targetName) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (targetName - 1 == i) {
          if (
            isNotEmptyUtils(
              vm.componentList.moduleModelList[i].templetModelList
            )
          ) {
            // 模板不为空
            vm.$confirm(
              "删除模块会将改模块下已有模板同时删除，确认需要删除吗？<br/>（<span style='color:red;font-size:12px;'>如需更新学情报告，可通过上下架项目实现</span>）",
              "提示",
              {
                confirmButtonText: "确定删除",
                cancelButtonText: "放弃",
                dangerouslyUseHTMLString: true,
                type: "warning",
              }
            )
              .then(() => {
                if (
                  vm.componentList.moduleModelList[i].id != "" &&
                  vm.componentList.moduleModelList[i].moduleType == 1
                ) {
                  vm.GET("portal/portalComponent/deletePortalModuleById", {
                    id: vm.componentList.moduleModelList[i].id,
                  }).then((res) => {
                    if (res.code == "000000") {
                      vm.$message.info("成功删除模块！");
                    }
                    // vm.getModuleData();
                    // vm.firstTab = i + "";
                    vm.componentList.moduleModelList.splice(i, 1);
                    vm.firstTab = "1";
                  });
                } else {
                  vm.componentList.moduleModelList.splice(i, 1);
                  vm.firstTab = "1";
                }
              })
              .catch(() => {
                vm.$message({
                  type: "info",
                  message: "已取消删除",
                });
              });
          } else {
            if (vm.componentList.moduleModelList[i].id) {
              vm.GET("portal/portalComponent/deletePortalModuleById", {
                id: vm.componentList.moduleModelList[i].id,
              }).then((res) => {
                if (res.code == "000000") {
                  vm.$message.info("成功删除模块！");
                }
                vm.componentList.moduleModelList.splice(i, 1);
                // vm.getModuleData();
                vm.firstTab = "1";
              });
            } else {
              vm.componentList.moduleModelList.splice(i, 1);
              vm.firstTab = "1";
            }
          }
          break;
        }
      }
    },
    // 添加空白模块
    addModule() {
      vm.componentList.moduleModelList.push({
        id: "",
        name: "",
        openFlag: 1, // 1不开放  2开放
        moduleType: 1, // 2为从预设模块中添加
        status: 2, // 1 不启用  2启用
        passType: 1,
        templetModelList: [],
      });
      //vm.componentList.moduleModelList[(vm.componentList.moduleModelList.length - 1)].openDisabled = true;
    },
    // 添加模板
    addTemplate(item, index) {
      vm.templetIndex =
        vm.componentList.moduleModelList[index].templetModelList.length;
      vm.componentList.moduleModelList[index].templetModelList.push({
        name: item.name,
        type: item.type,
        partModelList: [],
      });
      for (let i = 0; i < item.partConfigModelList.length; i++) {
        if (item.partConfigModelList[i].type == 1) {
          // 考试
          vm.componentList.moduleModelList[index].templetModelList[
            vm.templetIndex
          ].partModelList.push({
            titleName: "",
            type: 1, // 1考试  2课程
            name: "",
            id: "", // 新增时为空
            seqNo: "",
            conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制  2有限制
            numFlag: item.partConfigModelList[i].numFlag, // 1为单个  2为可以无限添加
            templetSeqNo: "",
            introduce: item.partConfigModelList[i].introduce,
            partContentModelList: [
              {
                certificateFlag: 1, // 是否有证书  1无  2有
                id: "",
                seqNo: "",
                content1: "",
                content2: "",
                content3: "0",
                content4: "",
                content5: "0",
                content6: "",
              },
            ],
          });
        } else if (item.partConfigModelList[i].type == 2) {
          // 课程
          vm.componentList.moduleModelList[index].templetModelList[
            vm.templetIndex
          ].partModelList.push({
            titleName: "",
            type: 2, // 1考试  2课程
            name: "",
            id: "", // 新增时为空
            seqNo: "",
            conditionFlag: item.partConfigModelList[i].conditionFlag, // 1为没有限制  2有限制
            numFlag: item.partConfigModelList[i].numFlag, // 1为单个  2为可以无限添加
            templetSeqNo: "",
            introduce: item.partConfigModelList[i].introduce,
            partContentModelList: [
              {
                id: "",
                seqNo: "",
                content1: "",
                content2: "",
                content3: "0",
                content4: "",
                content5: "0",
                content6: "",
                content7: "",
              },
            ],
          });
        }
      }
      vm.templetIndex++;
    },

    // 删除模板前
    beforeDeleteTemplate(index, index1) {
      vm.$confirm("确定要删除此模板吗？<br/>（<span style='color:red;font-size:12px;'>如需更新学情报告，可通过上下架项目实现</span>）", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "放弃",
        dangerouslyUseHTMLString: true,
        type: "warning",
      })
        .then(() => {
          vm.deleteTemplate(index, index1);
        })
        .catch(() => {
          vm.$message({
            type: "info",
            message: "已取消删除",
          });
        });

    },

    // 删除模板
    deleteTemplate(index, index1) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          if (vm.componentList.moduleModelList[i].templetModelList[index1].id) {
            vm.GET("portal/portalComponent/deletePortalTemplateById", {
              id:
                vm.componentList.moduleModelList[i].templetModelList[index1].id,
            }).then((res) => {
              if (res.code == "000000") {
                vm.$message.info("成功删除模板！");
                vm.getModuleData();
              }
            });
          } else {
            vm.componentList.moduleModelList[i].templetModelList.splice(
              index1,
              1
            );
          }
          break;
        }
      }
    },

    // 课程排序-向上
    sortCourseUp(index, index1, index2, index3) {
      // 不是第一个元素，才可能上移
      if (index3 > 0) {
        let item = vm.componentList.moduleModelList[index].templetModelList[
          index1
        ].partModelList[index2].partContentModelList.splice(index3, 1)[0];
        vm.componentList.moduleModelList[index].templetModelList[
          index1
        ].partModelList[index2].partContentModelList.splice(
          index3 - 1,
          0,
          item
        );
        vm.$forceUpdate();
      }
    },

    // 课程排序-向下
    sortCourseDown(index, index1, index2, index3) {
      let pLength =
        vm.componentList.moduleModelList[index].templetModelList[index1]
          .partModelList[index2].partContentModelList.length - 1;
      console.log(index3, pLength);
      if (index3 <= pLength && pLength > 0) {
        console.log("in sort");
        let item = vm.componentList.moduleModelList[index].templetModelList[
          index1
        ].partModelList[index2].partContentModelList.splice(index3, 1)[0];
        vm.componentList.moduleModelList[index].templetModelList[
          index1
        ].partModelList[index2].partContentModelList.splice(
          parseInt(index3 + 1),
          0,
          item
        );
        vm.$forceUpdate();
      }
    },

    // 添加多个课程
    addMatterCourse(index, index1, index2) {
      console.log(index, index1, index2);
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          for (
            let j = 0;
            j < vm.componentList.moduleModelList[i].templetModelList.length;
            j++
          ) {
            if (index1 == j) {
              for (
                let q = 0;
                q <
                vm.componentList.moduleModelList[i].templetModelList[j]
                  .partModelList.length;
                q++
              ) {
                if (index2 == q) {
                  vm.componentList.moduleModelList[i].templetModelList[
                    j
                  ].partModelList[q].partContentModelList.push({
                    id: "",
                    seqNo: "",
                    content1: "",
                    content2: "",
                    content3: "0",
                    content4: "",
                    content5: "0",
                    content6: "",
                    content7: "",
                  });
                  break;
                }
              }
              break;
            }
          }
          break;
        }
      }
    },

    // 删除多个课程(多个考试)元件的确认框
    beforeDeleteMatterCourse(index, index1, index2, index3) {
      // 删除模块前进行确认
      vm.$confirm("确定要删除此课程吗？<br>（<span style='color:red;font-size:12px;'>如需更新学情报告，可通过上下架项目实现</span>）", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "放弃",
        dangerouslyUseHTMLString: true,
        type: "warning",
      })
        .then(() => {
          vm.deleteMatterCourse(index, index1, index2, index3);
        })
        .catch(() => {
          vm.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 删除多个课程(多个考试)元件
    deleteMatterCourse(index, index1, index2, index3) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          for (
            let j = 0;
            j < vm.componentList.moduleModelList[i].templetModelList.length;
            j++
          ) {
            if (index1 == j) {
              for (
                let q = 0;
                q <
                vm.componentList.moduleModelList[i].templetModelList[j]
                  .partModelList.length;
                q++
              ) {
                if (index2 == q) {
                  if (
                    vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[q].partContentModelList[index3].id
                  ) {
                    vm.GET("portal/portalComponent/deletePortalPartById", {
                      id:
                        vm.componentList.moduleModelList[i].templetModelList[j]
                          .partModelList[q].partContentModelList[index3].id,
                    }).then((res) => {
                      if (res.code == "000000") {
                        vm.$message.info("成功删除模板元件内容！");
                        vm.getModuleData();
                      }
                    });
                  } else {
                    vm.componentList.moduleModelList[i].templetModelList[
                      j
                    ].partModelList[q].partContentModelList.splice(index3, 1);
                  }
                  break;
                }
              }
              break;
            }
          }
          break;
        }
      }
    },
    // 模板下移
    sortUp(index, index1) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          if (
            index1 !=
            vm.componentList.moduleModelList[i].templetModelList.length - 1
          ) {
            // 判断是最后一个不能下移
            let temp =
              vm.componentList.moduleModelList[i].templetModelList[index1];
            vm.$set(
              vm.componentList.moduleModelList[i].templetModelList,
              index1,
              vm.componentList.moduleModelList[i].templetModelList[index1 + 1]
            );
            vm.$set(
              vm.componentList.moduleModelList[i].templetModelList,
              parseInt(index1 + 1),
              temp
            );
          }
          break;
        }
      }
    },
    // 模板下移
    sortDown(index, index1) {
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index == i) {
          if (index1 != 0) {
            // 判断是第一个不能上移
            let temp =
              vm.componentList.moduleModelList[i].templetModelList[index1];
            vm.$set(
              vm.componentList.moduleModelList[i].templetModelList,
              index1,
              vm.componentList.moduleModelList[i].templetModelList[index1 - 1]
            );
            vm.$set(
              vm.componentList.moduleModelList[i].templetModelList,
              parseInt(index1 - 1),
              temp
            );
          }
          break;
        }
      }
    },
    // 模块名称失去焦点校验
    moduleNameValidate(index) {
      let moduleValue = vm.componentList.moduleModelList[index].name;
      for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
        if (index != i && vm.componentList.moduleModelList[i].name != "") {
          if (moduleValue == vm.componentList.moduleModelList[i].name) {
            vm.componentList.moduleModelList[index].name = "";
            vm.$message.info("模块名称已存在，请修改名称后保存");
          }
        }
      }
    },
    // 完成(暂存)
    finishConponent(flag) {
      let req = null;
      if (flag == 2) {
        req = {
          id: vm.componentId,
          status: 2,
        };
      } else {
        req = {
          id: vm.componentId,
          status: 1,
        };
      }
      if (
        vm.componentList.moduleModelList &&
        vm.componentList.moduleModelList.length > 0
      ) {
        for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
          if (flag == 2) {
            // 完成
            if (!vm.componentList.moduleModelList[i].name) {
              vm.$message.info("请输入模块名称");
              return;
            }
            if (
              isEmptyList(
                vm.componentList.moduleModelList[i].templetModelList
              ) &&
              vm.componentList.moduleModelList[i].status == 2
            ) {
              vm.$message.info("模块内容不能为空");
              return;
            }
            for (
              let j = 0;
              j < vm.componentList.moduleModelList[i].templetModelList.length;
              j++
            ) {
              for (
                let k = 0;
                k <
                vm.componentList.moduleModelList[i].templetModelList[j]
                  .partModelList.length;
                k++
              ) {
                // 考试
                if (
                  vm.componentList.moduleModelList[i].templetModelList[j]
                    .partModelList[k].type == 1
                ) {
                  if (
                    !vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[k].partContentModelList[0].content1 ||
                    !vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[k].partContentModelList[0].content2
                  ) {
                    vm.$message.info(
                      vm.componentList.moduleModelList[i].templetModelList[j]
                        .name + "中考试为空，请添加考试保存"
                    );
                    return;
                  }
                } else {
                  if (
                    !vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[k].partContentModelList[0].content1 ||
                    !vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[k].partContentModelList[0].content2
                  ) {
                    vm.$message.info(
                      vm.componentList.moduleModelList[i].templetModelList[j]
                        .name + "中课程为空，请添加课程保存"
                    );
                    return;
                  }
                }
              }
            }
          }
          vm.componentList.moduleModelList[i].componentId = vm.componentId;
        }
        vm.finishModule(req, flag);
      } else {
        if (flag == 2) {
          vm.$message.info("模块内容不能为空");
          return;
        } else {
          vm.finishModule(req, flag);
        }
      }
    },
    finishModule(req, flag) {
      if (isNotEmptyList(vm.componentList.moduleModelList)) {
        for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
          if (
            isNotEmptyList(vm.componentList.moduleModelList[i].templetModelList)
          ) {
            for (
              let j = 0;
              j < vm.componentList.moduleModelList[i].templetModelList.length;
              j++
            ) {
              for (
                let k = 0;
                k <
                vm.componentList.moduleModelList[i].templetModelList[j]
                  .partModelList.length;
                k++
              ) {
                if (
                  vm.componentList.moduleModelList[i].templetModelList[j]
                    .partModelList[k].type == 1
                ) {
                  // 考试
                  if (
                    vm.componentList.moduleModelList[i].templetModelList[j]
                      .partModelList[k].partContentModelList[0].content4
                  ) {
                    for (let q = 0; q < vm.certificateIdSelect.length; q++) {
                      if (
                        vm.componentList.moduleModelList[i].templetModelList[j]
                          .partModelList[k].partContentModelList[0].content4 ==
                        vm.certificateIdSelect[q].id
                      ) {
                        vm.componentList.moduleModelList[i].templetModelList[
                          j
                        ].partModelList[k].partContentModelList[0].content3 =
                          vm.certificateIdSelect[q].name;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      vm.$nextTick(() => {
        for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
          if (!vm.componentList.moduleModelList[i].name) {
            if (flag == 2) {
              return;
            }
          }
        }
        console.log(vm.componentList.moduleModelList);
        vm.POST("portal/portalComponent/insertOrUpdatePortalModule", {
          model: vm.componentList.moduleModelList,
          status: flag,
        }).then((res) => {
          if (res.code == "000000") {
            vm.enableComponent(req, flag);
          }
        });
      });
    },
    // 启用
    enableComponent(req, flag) {
      vm.GET("portal/portalComponent/disableOrStart", req).then((res) => {
        if (res.code == "000000") {
          if (flag == 2) {
            let query = {};
            if (this.$route.query.pageNum) {
              query = { pageNum: this.$route.query.pageNum };
            }
            vm.$router.push({ path: "item-component", query: query });
          } else {
            vm.$message.info("暂存成功！");
          }
        } else {
          vm.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    // 从资源包中添加模块
    addFromModule() {
      vm.columnFormVisible = true;
      vm.GET("portal/portalComponent/ModuleList", { openFlag: 2 }).then(
        (res) => {
          if (res.code == "000000") {
            vm.resourceArray = res.data.moduleModelList;
            for (let i = 0; i < vm.componentList.moduleModelList.length; i++) {
              vm.compareArray(vm.componentList.moduleModelList[i].id);
            }
          }
        }
      );
    },
    compareArray(id) {
      for (let j = 0; j < vm.resourceArray.length; j++) {
        if (id == vm.resourceArray[j].id) {
          vm.resourceArray.splice(j, 1);
        }
      }
    },
    // 选择资源包
    selectChange(val) {
      if (vm.resourceArray && vm.resourceArray.length > 0) {
        for (let i = 0; i < vm.resourceArray.length; i++) {
          if (val == vm.resourceArray[i].id) {
            vm.dialogData = vm.resourceArray[i];
            break;
          }
        }
      }
    },
    // 确定选择预设模块
    submitDialog() {
      vm.columnFormVisible = false;
      if (isNotEmptyUtils(vm.dialogData)) {
        vm.dialogData.moduleType = 2;
        vm.dialogData.mappingId = null;
        vm.componentList.moduleModelList.push(vm.dialogData);
        vm.firstTab = vm.componentList.moduleModelList.length + "";
        vm.dialogData = [];
        vm.selectResource.resourceModuleSelect = "";
      }
    },
  },
};
</script>
<style lang="scss">
.create-component-wrap {
  .create-content {
    background: #fff;
  }
  .first-step {
    padding-top: 20px;
    .el-form-item {
      margin-bottom: 25px;
    }
    .bg-img {
      width: 84px;
      height: 100px;
    }
    .word-num {
      font-size: 12px;
      color: #999;
      padding-top: 5px;
    }
    .bg-uploader {
      img {
        float: left;
      }
      .limit-text {
        float: left;
        margin-left: 10px;
        padding-top: 20px;
        p {
          font-size: 12px;
          color: #999;
        }
      }
    }
    .component-name {
      color: #f56c6c;
      font-size: 12px;
      line-height: 1;
      padding-top: 1px;
      position: absolute;
      top: 100%;
      left: 0;
    }
    .basic-item-icon {
      position: relative;
      .require {
        position: absolute;
        left: 51px;
        top: 4px;
        color: #f56c6c;
      }
      .upload-message {
        position: absolute;
        left: 128px;
        top: 105px;
        font-size: 12px;
        color: #f56c6c;
      }
      .img-delete {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 84px;
        height: 100px;
        background: #000;
        opacity: 0.7;
        z-index: 999;
        i {
          color: #fff;
          margin-top: 39px;
          margin-left: 0px;
        }
      }
    }
  }
  .step-content {
    overflow: hidden;
    height: 60px;
    border-bottom: 1px solid #efefef;
    .el-step.is-simple .el-step__head {
      display: none;
    }
    .class-1 {
      color: #449284;
      border: 1px solid #449284 !important;
    }
    .class-2 {
      color: #999;
      border: 1px solid #999 !important;
    }
    .class-1-text .el-step__title {
      color: #449284 !important;
    }
    .class-2-text .el-step__title {
      color: #999 !important;
    }
    .el-steps--simple {
      float: left;
      padding: 20px 0 0 5%;
      width: 350px;
      background: #fff;
      .el-step__icon {
        display: none;
      }
      .el-step__title {
        font-size: 12px;
      }
      .el-step.is-simple .el-step__arrow::after,
      .el-step.is-simple .el-step__arrow::before {
        height: 11px;
      }
      .step-one,
      .step-two {
        display: block;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 34px;
        height: 18px;
        margin-top: 3px;
        margin-right: 10px;
        text-align: center;
      }
    }
    .btn-container {
      float: right;
      margin: 12px 20px 0;
      span {
        display: inline-block;
        width: 40px;
        line-height: 12px;
      }
      button:nth-child(2) span {
        color: #fff;
      }
    }
  }
  .model-btn {
    padding: 20px;
    span {
      color: #fff;
    }
  }
  .tab-content {
    .el-tabs__header {
      margin-left: 20px;
      .el-tabs__item {
        font-size: 12px;
      }
    }
    .template-btn {
      background: #f3f3f3;
      padding: 10px;
    }
    .template-content-div {
      margin: 20px;
      border-bottom: 1px dotted #ccc;
      .title {
        margin-bottom: 20px;
        span {
          float: right;
          color: #666;
          font-size: 12px;
        }
      }
      .item-icon {
        position: relative;
        span.require {
          position: absolute;
          left: 37px;
          top: 12px;
          color: #f56c6c;
        }
      }
    }
    .matter-test,
    .train-test,
    .matter-train-test {
      .tip {
        font-size: 12px;
        color: #aaa;
        margin-left: 57px;
        margin-bottom: 20px;
      }
    }
    .partText {
      font-size: 12px;
      margin-left: 44px;
      color: #999;
      padding: 0px 0 15px;
    }
  }
  .module-form {
    .el-input__inner {
      border: none;
    }
    .el-select .el-input__inner {
      border: 1px solid #dcdfe6;
    }
  }
  .el-dialog {
    .el-dialog__header {
      padding: 15px;
      border-bottom: 1px solid #e1e1e1;
      .el-dialog__title {
        color: #449284;
        font-size: 16px;
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding-top: 30px;
      // border-top: 1px solid #e1e1e1;
    }
    .default-module {
      border-bottom: 1px dotted #e1e1e1;
      .dialog-template-content {
        input {
          border: none;
        }
        .el-form-item {
          margin-bottom: 0px;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
