<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="conditionSelect" @click="finishConponent(1)" type="default" size="small">暂存</el-button>
                    <el-button v-if="stepNum == 2" @click="finishConponent(2)" :disabled="conditionSelect" 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="125px" 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-row>
                        <el-col :span="6">
                            <div class="basic-item-icon">
                                <span class="require">*</span>
                                <el-form-item label="配置证书">
                                    <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-item  v-if="hasCertificate" label="组件完成(%)" prop="certificateCondition">
                        <el-input-number 
                        v-model="portalComponent.certificateCondition" 
                        controls-position="right"
                        @change="handleChange" 
                        :disabled="componentStatus == 3 || componentStatus == 4"
                        :step="10" 
                        :min="10" 
                        :max="100">
                        </el-input-number>
                    </el-form-item>
                </el-form>
            </div>
            <div class="" v-if="stepNum == 2">
                <div class="model-btn">
                    <el-button v-if="idType == 1" :disabled="conditionSelect" type="primary" size="small" @click="addModule">添加空白模块</el-button>
                    <el-button :disabled="conditionSelect" type="primary" size="small" @click="addFromModule" style="margin-left:0;">从预设模块添加</el-button>
                </div>
                <div class="tab-content">
                    <el-tabs type="card" v-model="firstTab" :closable="!conditionSelect" @tab-remove="removeTab">
                        <el-tab-pane 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="conditionSelect || idType == 2 || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)" size="small" placeholder="请选择模块名称" style="width:288px;"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" v-if="idType == 1">
                                            <el-form-item label="是否对外开放" prop="openFlag">
                                                <el-radio-group v-model="item.openFlag" @change="selectIsOpen(index)" :disabled="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)">
                                                    <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="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2)"
                                        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="conditionAnd && item.moduleType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1)) && idType == 1">
                                                        变更顺序:
                                                        <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="deleteTemplate(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="conditionSelect || item.moduleType == 2 || (item.id != '' && item.openFlag == 2) || idType == 2" size="small" maxlength='30' placeholder="请输入考试名称" style="width:288px;"></el-input>
                                                                        <span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
                                                                        <span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-delete" @click="deleteMatterCourse(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 v-model="item3.content2" @focus="examIDfocus(index,index1,index2,index3)" @change="changeExamID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="small" placeholder="请选择考试ID" style="width:288px;">
                                                                            <el-option
                                                                            v-for="(itemTest,indexTest) in testIdSelect"
                                                                            :key="indexTest"
                                                                            :label="itemTest.onlineExamName"
                                                                            :value="itemTest.id + ''">
                                                                            </el-option>
                                                                        </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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)">
                                                                            <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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" 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>
                                                        <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="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" size="small" maxlength='30' placeholder="请输入课程名称" style="width:288px;"></el-input>
                                                                    <span v-if="conditionAnd && item2.numFlag == 2 && index3 == 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-circle-plus" @click="addMatterCourse(index,index1,index2)" style="color:#449284;"></i></span>
                                                                    <span v-if="conditionAnd && item2.numFlag == 2 && index3 > 0 && item.moduleType == 1 && idType == 1 && (item.id == '' || (item.id != '' && item.openFlag == 1))"><i class="el-icon-delete" @click="deleteMatterCourse(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 v-model="item3.content2" @focus="courseIDfocus(index,index1,index2,index3)" @change="changeCourseID" :disabled="conditionSelect || item.moduleType == 2 || idType == 2 || (item.id != '' && item.openFlag == 2)" 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-row>
                                                    </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'
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,
            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,
            testIdSelect: [], // 考试ID下拉列表
            certificateIdSelect: [], // 证书下拉列表
            courseIdSelect: [],  // 课程下拉列表
            dialogData: [],
            portalComponent: {
                idType: '',
                organizationId: '',
                name: '',
                id: '',
                introduce: '',
                imageUrl:'',
                seqNo: '',
                certificateId: '', // 0 没有证书,配置证书为否
                certificateCondition: '60', // 证书完成率
                status: ''
            },
            componentList: {
                moduleModelList: [{
                    id: '',
                    name: '',
                    openFlag: '',  // 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: 150, 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: 20, message: '输入长度为2-20个字符', trigger: 'blur' },
                    { validator: function(rule, value, callback) {
                        validateModuleName(rule, value, callback, '模块名称已存在，请修改名称后保存')
                    },
                    trigger: 'blur' }
                ],
                "openFlag": [
                    { required: true, message: '请选择是否对外开放', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
      ...mapGetters([
            '_token',
            'idType'
      ])
    },
    created() {
        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.conditionSelect = vm.resultFlag == 2 || vm.componentStatus == 3 || vm.componentStatus == 4
        if(vm.componentStatus && vm.resultFlag) {
            vm.conditionAnd = vm.resultFlag == 1 && vm.componentStatus != 3 && vm.componentStatus != 4
        }
    },
    // 挂载到Dom完成时
    mounted: function() {
        commonUtil.resizeHeight()
    },
    methods: {
        // 根据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 = '是'
                        }
                    }
                })
            }
        },
        //  删除图片
        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 = 60
            }
        },
        // 获取组件完成率
        handleChange(value) {
            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.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.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
                }else {
					vm.$message.info(res.message)
				}
            })
        },
        // 根据考试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
                }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
                }else {
					vm.$message.info(res.message)
				}
            })
        },
        // 模块是否对外开放
        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
                }
            }
        },
        // 删除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('删除模块会将改模块下已有模板同时删除，确认需要删除吗？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                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 + ''
                                    })
                                }else {
                                    vm.componentList.moduleModelList.splice(i,1)
                                    vm.firstTab = i + ''
                                }
                            }).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.getModuleData()
                                vm.firstTab = i + ''
                            })
                        }else {
                            vm.componentList.moduleModelList.splice(i,1)
                            vm.firstTab = i + ''
                        }
                    }
                    break
                }
            }
        },
        // 添加空白模块
        addModule() {
            vm.componentList.moduleModelList.push({
                id: '',
                name: '',
                openFlag: 1,  // 1不开放  2开放
                moduleType: 1, // 2为从预设模块中添加
                templetModelList: []
            })
        },
        // 添加模板
        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: '',
                            content4: ''
                        }]
                    })
                }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: ''
                        }]
                    })   
                }
            }
            vm.templetIndex ++
        },
        // 删除模板
        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
                }
            }
        },
        // 添加多个课程
        addMatterCourse(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: ''
                                    })
                                    break
                                }
                            }
                            break
                        }
                    }
                    break
                }
            }
        },
        // 删除多个课程(多个考试)元件
        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.$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) {
                        return
                    }else {
                        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) {
                        vm.$router.push({ path: 'item-component' })
                    } 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>


