<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div>
                <div class="flex-center mgb20">
                    <p class="hr_tag"></p>
                    <span>筛选</span>
                </div>
                <div>
                    <el-form label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="学科类别">
                                <el-select v-model="form.categoryId" clearable
                                            @change="getProfessionalClass()" @clear="clearClass()">
                                    <el-option v-for="(item,index) in subjectList" :key="index"
                                                :label="item.disciplineName"
                                                :value="item.disciplineId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="专业类">
                                <el-select v-model="form.professionalCategoryId" clearable
                                            :disabled="form.categoryId ? false : true"
                                            @change="getProfessional()" @clear="clearProfess()">
                                    <el-option v-for="(item,index) in ProfessionalClassList" :key="index"
                                                :label="item.professionalClassName"
                                                :value="item.professionalClassId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="专业">
                                <el-select v-model="form.professionalId" clearable
                                            :disabled="form.professionalCategoryId ? false : true"
                                            @change="getData()">
                                    <el-option v-for="(item,index) in ProfessionalList" :key="index"
                                                :label="item.professionalName"
                                                :value="item.professionalId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="课程类别">
                                <el-select v-model="form.curriculumType" clearable
                                            @change="getData()">
                                    <el-option label="理论课程" :value="0"></el-option>
                                    <el-option label="实训课程" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <el-input placeholder="请输入课程名称" prefix-icon="el-icon-search"
                                            v-model="form.curriculumName" clearable
                                            @keyup.enter.native="onSearch"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover" class="card">
            <div class="flex-between mgb20">
                <div class="flex-center">
                    <p class="hr_tag"></p>
                    <span>课程列表</span>
                </div>
                <div>
                    <el-button type="primary" round @click="addcourse" v-auth>新增课程</el-button>
                    <el-button type="primary" round @click="delAllSelection" v-auth>批量删除</el-button>
                </div>
            </div>
            <el-table v-loading="loading" :data="courseData" class="table" ref="table" stripe header-align="center"
                        @selection-change="handleSelectionChange" :row-key="getRowKeys">
                <el-table-column type="selection" width="55" align="center"
                                    :reserve-selection="true"></el-table-column>
                <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                <el-table-column prop="curriculumName" label="课程名称" align="center"></el-table-column>
                <el-table-column prop="curriculumType" label="课程类型" align="center">
                    <template slot-scope="scope">
                        <span class="ellipsis">{{ courseTypeStatus[scope.row.curriculumType] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="配置的实训应用" align="center">
                    <template slot-scope="scope">
                        <span class="ellipsis">{{ scope.row.sysName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderVolume" label="订单量" align="center"></el-table-column>
                <el-table-column prop="expectedCourse" label="预计课时" align="center"></el-table-column>
                <el-table-column label="上架/下架" align="center">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.isEnable"
                            :active-value="0"
                            :inactive-value="1"
                            @change="changeSwitch($event, scope.row)"
                            v-auth="'/curriculum:上下架'">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row)" v-auth>编辑</el-button>
                        <el-button type="text" @click="config(scope.row)" v-auth>内容设置</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)" v-auth>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" :current-page="pageNo"
                                layout="total, prev, pager, next" :total="totals"></el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "customer",
    data() {
        return {
            courseTypeStatus: {
                0: "理论课程",
                1: "实训课程"
            },
            name: localStorage.getItem("ms_username"),
            courseData: [],
            form: {
                categoryId: "",
                professionalCategoryId: "",
                professionalId: "",
                curriculumType: "",
                curriculumName: ""
            },
            pageNo: +this.$route.query.page || 1,
            pageSize: 10,
            totals: 0,
            subjectList: [], // 学科类别
            ProfessionalClassList: [], // 专业类
            ProfessionalList: [], // 专业
            multipleSelection: [],
            loading: false,
            searchTimer: null
        };
    },
    watch: {
        "form.curriculumName": function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    mounted() {
        this.getSubject();
        this.getData();
    },
    methods: {
        getRowKeys(row) {
            return row.cid;
        },
        // 获取列表数据
        getData() {
            let data = {
                ...this.form,
                pageNum: this.pageNo,
                pageSize: this.pageSize
            };
            this.$post(this.api.curriculumList, data).then(res => {
                this.courseData = res.page.records;
                this.totals = res.page.total;
                this.loading = false;
            }).catch(err => {
            });
        },
        initData() {
            this.pageNo = 1;
            this.getData();
        },
        // 获取学科类别
        getSubject() {
            this.$get(this.api.courseDiscipline).then(res => {
                this.subjectList = res.list;
            }).catch(err => {
            });
        },
        // 清除学科类别
        clearClass() {
            this.form.professionalCategoryId = "";
            this.form.professionalId = "";
        },
        // 获取专业类
        getProfessionalClass() {
            this.clearClass();
            this.getProfessionalClassData();
            this.pageNo = 1;
            this.getData();
        },
        getProfessionalClassData() {
            let data = {
                disciplineId: this.form.categoryId
            };
            this.$get(this.api.courseProfessionalClass, data).then(res => {
                this.ProfessionalClassList = res.list;
            }).catch(err => {
            });
        },
        // 清除专业类
        clearProfess() {
            this.form.professionalId = "";
        },
        // 获取专业
        getProfessional() {
            this.clearProfess();
            this.getProfessionalData();
            this.pageNo = 1;
            this.getData();
        },
        getProfessionalData() {
            let data = {
                professionalClassId: this.form.professionalCategoryId
            };
            this.$get(this.api.courseProfessional, data).then(res => {
                this.ProfessionalList = res.list;
            }).catch(err => {
            });
        },
        // 新建课程
        addcourse() {
            this.$router.push("/addcurriculum");
        },
        // 编辑
        edit(row) {
            this.$router.push(`/addcurriculum?cid=${row.cid}`);
        },
        // 内容设置
        config(row) {
            this.$router.push(`/contentSettings?cid=${row.cid}&name=${row.curriculumName}`);
        },
        // 删除
        handleDelete(row) {
            this.$confirm("确定要删除吗？", "提示", {
                type: "warning"
            }).then(() => {
                this.$post(`${this.api.delCourse}?cids=${row.cid}`).then(res => {
                    this.getData();
                    this.$message.success("删除成功");
                }).catch(err => {
                });
            }).catch(() => {
            });
        },
        // 处理多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 批量删除
        delAllSelection() {
            if (this.multipleSelection.length) {
                this.$confirm("确定要删除吗？", "提示", {
                    type: "warning"
                }).then(() => {
                    let ids = this.multipleSelection.map(i => i.cid);
                    this.$post(`${this.api.delCourse}?cids=${ids.toString()}`).then(res => {
                        if(ids.length == this.courseData.length){
                            if(this.pageNo > 1){
                                this.pageNo = this.pageNo-1
                            }
                        }
                        this.getData();
                        this.$message.success("删除成功");
                        this.$refs.table.clearSelection()
                    }).catch(err => {
                    });
                }).catch(() => {
                });
            } else {
                this.$message.warning("请先选择课程 ！");
            }
        },
        // 处理页码切换
        handleCurrentChange(val) {
            this.pageNo = val;
            this.$router.push(`curriculum?page=${val}`)
            this.getData();
        },
        // 课程名称条件搜索
        onSearch() {
            this.pageNo = 1;
            this.getData();
        },
        // 上下架
        changeSwitch(value, row) {
            this.$post(`${this.api.isShelves}?cid=${row.cid}&isEnable=${value}`).then((res) => {
                this.getData();
                this.$message.success("修改上下架状态成功！");
            }).catch((res) => {
            });
        }
    }
};
</script>

<style scoped>
.card {
    min-height: calc(100vh - 300px);
}
.mag {
    margin-right: 20px;
}
</style>