<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="mgb20">
                    <div class="flex-between">
                        <div class="per_title" v-preventReClick @click="goback()">
                            <i class="el-icon-arrow-left"></i>
                            <span class="per_back">返回</span>
                            <span class="per_school" v-text="form.courseId != '' ? '编辑课程' : '新建课程'"></span>
                        </div>
                        <el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button>
                    </div>           
                </el-card>

                <el-card shadow="hover" class="mgb20 ">
                    <div class="flex-center mgb20">
                        <p class="addhr_tag"></p>
                        <span>课程信息</span>
                    </div>
                    <div class="border-b-dashed"></div>

                    <div>
                        <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                            <el-col :span="6" :offset="5">
                                <el-form-item label="课程名称" prop="courseName">
                                    <el-input placeholder="请输入课程名称" v-model="form.courseName" @change="changeName"></el-input>
                                </el-form-item>

                                <el-form-item label="学科类别" prop="disciplineId">
                                    <el-select v-model="form.disciplineId" clearable placeholder="请选择学科类别"
                                     @change="getProfessionalClass()" @clear="clearsubjectType()">
                                        <el-option v-for="(item,index) in subjectList" :key="index" :label="item.disciplineName" :value="item.disciplineId"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="专业" prop="professionalId">
                                    <el-select v-model="form.professionalId" clearable placeholder="请选择专业"
                                    :disabled="form.professionalClassId ? false : true">
                                        <el-option v-for="(item,index) in ProfessionalList" :key="index" :label="item.professionalName" :value="item.professionalId"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="市场价格" prop="marketPrice">
                                    <el-input placeholder="请输入市场价格" v-model="form.marketPrice">
                                        <template slot="append">万元/年</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>

                            <el-col :span="6" :offset="2">
                                <el-form-item label="预计课时" prop="courseHours">
                                    <el-select v-model="form.courseHours" clearable placeholder="请选择预计课时">
                                        <el-option v-for="(item,index) in hoursList" :key="index" :label="item.name" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="专业类" prop="professionalClassId">
                                    <el-select v-model="form.professionalClassId" clearable placeholder="请选择专业类"
                                    :disabled="form.disciplineId ? false : true" @change="getProfessional()" @clear="clearProfessionalClass()">
                                        <el-option v-for="(item,index) in ProfessionalClassList" :key="index" :label="item.professionalClassName" :value="item.professionalClassId"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="预计课时">
                                    <el-select v-model="form.courseType" clearable placeholder="请选择课程类别">
                                        <el-option v-for="(item,index) in CourseTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="14" :offset="5">
                                <el-form-item label="课程简介" prop="courseIntroduction">
                                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入课程简介" v-model="form.courseIntroduction"></el-input>
                                </el-form-item>
                                <el-form-item label="教学目标" prop="teachingGoal">
                                    <el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入教学目标" v-model="form.teachingGoal"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </div>
                </el-card>

                <el-card shadow="hover" class="mgb20">
                    <div class="mgb20 flex-between">
                        <div class="flex-center ">
                            <p class="addhr_tag"></p>
                            <span>练习配置</span>
                        </div>
                        <el-button @click="curVisible=true" icon="el-icon-plus" circle></el-button>
                    </div>
                    <div class="border-b-dashed"></div>
                    <div>
                        <el-table :data="curData" class="table" stripe header-align="center">
                            <el-table-column type="index" width="100" label="序号" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="项目名称" align="center">
                            </el-table-column>
                            <el-table-column prop="appName" label="应用名称" align="center">
                            </el-table-column>
                            <el-table-column label="资源配置" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="EditCur(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="展示控制" align="center">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.contral"
                                        :active-value="0"
                                        :inactive-value="1">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="添加控制" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!-- 考核配置 -->
                <el-card shadow="hover" class="mgb20">
                    <div class="mgb20 flex-between">
                        <div class="flex-center ">
                            <p class="addhr_tag"></p>
                            <span>考核配置</span>
                        </div>
                        <el-button @click="showAssess=true" icon="el-icon-plus" circle></el-button>
                    </div>
                    <div class="border-b-dashed"></div>
                    <!-- 实训配置 -->
                    <div>
                        <el-table :data="curData" class="table" stripe header-align="center">
                            <el-table-column type="index" width="100" label="序号" align="center">
                            </el-table-column>
                            <el-table-column prop="name" label="项目名称" align="center">
                            </el-table-column>
                            <el-table-column prop="appName" label="应用名称" align="center">
                            </el-table-column>
                            <el-table-column label="资源配置" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="EditCur(scope.row)">编辑</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="展示控制" align="center">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.contral"
                                        :active-value="0"
                                        :inactive-value="1">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="添加控制" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>

                <!-- 资源配置 -->
                <!-- <el-card shadow="hover" class="mgb20">
                    <div class="mgb20 flex-between">
                        <div class="flex-center ">
                            <p class="addhr_tag"></p>
                            <span>资源配置</span>
                        </div>
                        <div class="flex-between">
                            <el-button type="primary" size="small" round class="mag" @click="getConfig">添加章节</el-button>
                            <el-button type="primary" size="small" round class="mag" @click="getConfig">编辑顺序</el-button>
                        </div>
                    </div>
                    <div class="border-b-dashed"></div>
                </el-card> -->

                <courseconfig></courseconfig>

            </el-col>
            
            <!-- 应用配置 -->
            <el-dialog :visible.sync="curVisible" width="50%" center>
                <div class="flex-between mgb20">
                    <div class="flex-center">
                        <p class="addhr_tag"></p>
                        <span>应用列表</span>
                    </div>
                    <div>
                        <el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="configSearch" clearable></el-input>
                    </div>
                </div>
                <el-table :data="permissionData" class="table" stripe header-align="center" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="100" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="systemName" label="系统名称" align="center">
                    </el-table-column>
                    <el-table-column prop="systemAttribution" label="系统类型" align="center">
                    </el-table-column>
                    <el-table-column prop="systemType" label="系统归属" align="center">
                    </el-table-column>
                    <el-table-column prop="systemStatus" label="系统状态" align="center">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="curVisible = false">取 消</el-button>
                    <el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 考核配置弹框 -->
            <el-dialog :visible.sync="showAssess" width="50%" center>
                <div class="flex-between mgb20">
                    <div class="flex-center">
                        <p class="addhr_tag"></p>
                        <span>应用列表</span>
                    </div>
                    <div>
                        <el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="configSearch" clearable></el-input>
                    </div>
                </div>
                <el-table :data="permissionData" class="table" stripe header-align="center" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column type="index" width="100" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="systemName" label="系统名称" align="center">
                    </el-table-column>
                    <el-table-column prop="systemAttribution" label="系统类型" align="center">
                    </el-table-column>
                    <el-table-column prop="systemType" label="系统归属" align="center">
                    </el-table-column>
                    <el-table-column prop="systemStatus" label="系统状态" align="center">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showAssess = false">取 消</el-button>
                    <el-button type="primary" v-preventReClick >确 定</el-button>
                </span>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
import courseconfig from './courseconfig.vue'
    export default {
        components:{
            courseconfig:courseconfig
        },
        data (){
            return {
                form: {
                    courseName: '',
                    courseType: '',
                    disciplineId: '',
                    professionalClassId: '',
                    professionalId: '',
                    courseHours: '',
                    marketPrice: '',
                    courseIntroduction: '',
                    teachingGoal: '',
                    courseId : this.$store.state.courseId,
                    systemId: ''
                },
                rules: {
                    courseName: [
                        { required: true, message: '请输入用户姓名', trigger: 'blur' }
                    ],
                    disciplineId: [
                        { required: true, message: '请选择学科类别', trigger: 'change' }
                    ],
                    professionalId: [
                        { required: true, message: '请选择专业', trigger: 'change' }
                    ],
                    marketPrice: [
                        { required: true, message: '请输入市场价格', trigger: 'blur' },
                        { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }
                    ],
                    courseHours: [
                        { required: true, message: '请选择预计课时', trigger: 'change' }
                    ],
                    professionalClassId: [
                        { required: true, message: '请选择专业类', trigger: 'change' }
                    ],
                    courseType: [
                        { required: true, message: '请选择课程类别', trigger: 'change' }
                    ],
                    courseIntroduction: [
                        { required: true, message: '请输入课程简介', trigger: 'blur' }
                    ],
                    teachingGoal: [
                        { required: true, message: '请输入教学目标', trigger: 'blur' }
                    ]
                },
                permissionData: [],
                curVisible: false,// 联系配置弹框
                showAssess:false,// 考核配置弹框
                curData: [
                    {name:'项目名称',appName:'应用',asset:false,switch:false,contral:false}
                ],
                subjectList: [],
                ProfessionalClassList: [],
                ProfessionalList: [],
                CourseTypeList: [{
                    name: '实训课程',
                    value: 1
                },
                {
                    name: '理论课程',
                    value: 2
                }],
                hoursList: [{
                    name: '32课时',
                    value: 1
                },
                {
                    name: '64课时',
                    value: 2
                }],
                configSearch: '',
                multipleSelection: [],
                NoAdd: true
            }
        },
        watch: {
            configSearch(newVal){
                this.getConfig()
            }
        },
        mounted() {
            // if(this.form.courseId){
            //     let data = {
            //         courseId: this.form.courseId
            //     }
            //     this.$get(this.api.queryCourseDetails,data).then((res) => {
            //             this.form = {
            //                 courseName: res.message[0].course.courseName,
            //                 courseType: res.message[0].course.courseType,
            //                 disciplineId: res.message[0].course.disciplineId,
            //                 professionalClassId: res.message[0].course.professionalClassId,
            //                 professionalId: res.message[0].course.professionalId,
            //                 courseHours: res.message[0].course.courseHours,
            //                 marketPrice: res.message[0].course.marketPrice,
            //                 courseIntroduction: res.message[0].course.courseIntroduction,
            //                 teachingGoal: res.message[0].course.teachingGoal,
            //                 courseId : res.message[0].course.courseId,
            //                 systemId: res.message[0].course.systemId
            //             }
            //             this.getProfessionalClassData()
            //             this.getProfessionalData()
            //             this.curData = res.message[0].serviceConfigList
            //             // let arr1 = this.curData
            //             // let result1 = arr1.map(e => e.systemId)
            //             // const set = new Set(result1);
            //             // let set1 = [...set].join()
            //             // this.form.systemId = this.form.systemId.concat(set1)            
            //         }).catch((res) => {
            //     })
            // }
            // this.getSubject()
        },
        methods: {
            saveAdd(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if(this.NoAdd){
                            if(this.curData.length != 0){
                                let data = {
                                    course: this.form,
                                    serviceConfigList: this.curData
                                }
                                if(this.form.courseId){
                                    this.$post(this.api.updateCourse,data).then((res) => {
                                            this.$message.success('编辑成功');
                                            this.$router.replace('/curriculum')
                                        }).catch((res) => {
                                    })
                                }else{
                                    this.$post(this.api.addCourse,data).then((res) => {
                                            this.$message.success('添加成功');
                                            this.$router.replace('/curriculum')
                                        }).catch((res) => {
                                    })
                                }
                            }else{
                                this.$message.warning('请添加实训配置！');
                            }
                        }else{
                            this.$message.warning('该课程已存在');
                        }
                    }else{
                        return false;
                    }
                })
            },
            // 获取应用配置
            getConfig(){
                let data = {
                    searchContent: this.configSearch,
                    systemId: this.form.systemId
                }
                this.$get(this.api.queryAppConfig,data).then((res) => {
                        this.curVisible = true
                        res.message.map(e => {
                            e.systemStatus = this.systemStatus(e.systemStatus)
                            e.systemType = this.systemAttributionStatus(e.systemType)
                            e.systemAttribution = this.systemTypeStatus(e.systemAttribution)
                        })
                        this.permissionData = res.message
                    }).catch((res) => {
                })
            },
            // 获取学科类别
            getSubject(){
                this.$get(this.api.queryCourseDiscipline).then(res => {
                    this.subjectList = res.message
                }).catch(res => {});
            },
            // 清空学科类别
            clearsubjectType(){
                this.form.professionalClassId = '',
                this.form.professionalId = ''
            },
            // 获取专业类
            getProfessionalClass(){
                this.clearsubjectType()
                this.getProfessionalClassData()
            },
            getProfessionalClassData(){
                let data = {
                    disciplineId: this.form.disciplineId
                }
                this.$get(this.api.queryCourseProfessionalClass,data).then(res => {
                    this.ProfessionalClassList = res.message
                }).catch(res => {});
            },
            // 清空专业类
            clearProfessionalClass(){
                this.form.professionalId = ''
            },
            // 获取专业
            getProfessional(){
                this.clearProfessionalClass()
                this.getProfessionalData()
            },
            getProfessionalData(){
                let data = {
                    professionalClassId: this.form.professionalClassId
                }
                this.$get(this.api.queryCourseProfessional,data).then(res => {
                    this.ProfessionalList = res.message
                }).catch(res => {});
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 绑定实训配置
            addSystem() {
                let arr = this.multipleSelection
                let result = arr.map(e => e.systemId).join()
                this.form.systemId = this.form.systemId.concat(`,${result}`)
                if (this.form.systemId.substr(0,1)==','){
                    this.form.systemId = this.form.systemId.substr(1);
                }
                this.curVisible = false
                this.getTrianConfig()
            },
            // 查询实训配置
            getTrianConfig(){
                let data = {
                    systemId: this.form.systemId
                }
                this.$get(this.api.queryTrainingConfig,data).then((res) => {
                        var arritem = {
                            isShow: 0
                        }
                        let arryNew = []
                        res.message.map(item => {
                            arryNew.push(Object.assign({}, item, arritem))
                        })
                        this.curData = arryNew
                    }).catch((res) => {
                })
            },
            // 编辑实训配置
            EditCur(row){
                if(this.form.courseId){
                    this.$store.commit("systemData", { system_id : row.projectId});
                    this.$router.push('/addlink');
                }else{
                    this.$message.warning('请先保存课程再进行编辑项目！');
                }
            },
            handleDelete(index, row){
                this.$confirm('此操作将删除该项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message.success('删除成功');
                    this.curData.splice(index, 1);
                    let arr1 = this.curData
                    let result1 = arr1.map(e => e.systemId)
                    const set = new Set(result1);
                    let set1 = [...set].join()
                    this.form.systemId = set1
                }).catch(() => {
                    this.$message.info("已取消删除");          
                });
            },
            goback(){
                this.$router.go(-1)
            },
            // 查询课程是否存在
            changeName(){
                let data = {
                    courseName: this.form.courseName
                }
                this.$get(this.api.queryCourseNameIsExists,data).then((res) => {
                    if(res.message.length != 0){
                        this.$message.warning('该课程已存在');
                        this.NoAdd = false
                    }else{
                        this.NoAdd = true
                    }
                }).catch((res) => {
                })
            }
        }
    }
</script>

<style scoped>
.border_lf{
    border-left: 1px dashed #eee;
    padding: 0 60px;
}
.border_lf label{
    width: 120px;
}
.pad_none{
    padding: 0 0 0 60px;
}
.mar_input{
    margin-right: 80px;
}
.marb30{
    margin-bottom: 30px;
}
.tab_temp label{
    width: 60px;
}
.mar10{
    margin-top: 10px;
}
.radio_icon{
    font-size: 26px;
    color: #9278FF;
}
.card-curriculum{
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 120px;
}
</style>