<template>
    <div class="">
        <!-- 查询表单 -->
        <el-form :inline="true" :model="courseSearchForm" class="demo-form-inline">
            <el-form-item label="课程名称">
                <el-input v-model="courseSearchForm.courseName" placeholder="课程名称"></el-input>
            </el-form-item>
            <el-form-item label="性质">
                <el-select v-model="courseSearchForm.courseType" placeholder="性质">
                    <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
                        :value="index + 1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="courseListGet">查询</el-button>
                <el-button plain @click="courseSearchClear">清除</el-button>
                <el-button type="success" @click="courseAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <br><br>

        <!-- 课程表格 -->
        <el-table :data="courseList.data">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column label="性质" width="150px">
                <template slot-scope="scope">
                    <div>{{ courseTypes[scope.row.type - 1] }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="credit" label="学分" width="70px"></el-table-column>
            <el-table-column prop="grade" label="年级" width="80px"></el-table-column>
            <el-table-column label="专业" width="120px">
                <template slot-scope="scope">
                    <div>{{ courseMajors[scope.row.major - 1] }}</div>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="50px">
                <template slot-scope="scope">
                    <el-popover trigger="click" placement="left">
                        <div style="max-width: 320px;">
                            <p v-if="scope.row.detail.length > 0">{{ scope.row.detail }}</p>
                            <p v-else>没有备注信息</p>
                        </div>
                        <i class="el-icon-info" slot="reference"></i>
                    </el-popover>

                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <div>
                        <el-button size="mini" type="primary" @click="courseEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="courseDeleteSubmit(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <br><br>

        <!-- 分页器 -->
        <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="courseList.total">
        </el-pagination>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑课程" :visible.sync="courseEditDialogVisible">
            <el-form :model="courseEditForm">
                <el-form-item label="课程名称">
                    <el-col :span="16">
                        <el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程性质">
                    <el-col :span="16">
                        <el-select v-model="courseEditForm.type" placeholder="课程性质">
                            <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
                                :value="index + 1"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程学分">
                    <el-col :span="16">
                        <el-input-number v-model="courseEditForm.credit"></el-input-number>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程年级">
                    <el-col :span="16">
                        <el-input v-model="courseEditForm.grade" placeholder="课程年级"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程专业">
                    <el-col :span="16">
                        <el-select v-model="courseEditForm.major" placeholder="课程专业">
                            <el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
                                :label="courseMajor" :value="index + 1"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程备注">
                    <el-col :span="16">
                        <el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
                        </el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="courseEditDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="courseEditSubmit()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加弹出框 -->
        <el-dialog title="添加课程" :visible.sync="courseAddDialogVisible">
            <el-form :model="courseEditForm" :rules="courseRules">
                <el-form-item label="课程名称" prop="name">
                    <el-col :span="16">
                        <el-input v-model="courseEditForm.name" placeholder="课程名称" width="200px"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程性质" prop="type">
                    <el-col :span="16">
                        <el-select v-model="courseEditForm.type" placeholder="课程性质">
                            <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
                                :value="index + 1"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程学分" prop="credit">
                    <el-col :span="16">
                        <el-input-number v-model.number="courseEditForm.credit" step="0.5"></el-input-number>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程年级" prop="grade">
                    <el-col :span="16">
                        <el-input v-model.number="courseEditForm.grade" placeholder="课程年级"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程专业" prop="major">
                    <el-col :span="16">
                        <el-select v-model="courseEditForm.major" placeholder="课程专业">
                            <el-option v-for="(courseMajor, index) in courseMajors" :key="courseMajor"
                                :label="courseMajor" :value="index + 1"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="课程备注" prop="detail">
                    <el-col :span="16">
                        <el-input type="textarea" autosize placeholder="备注内容" v-model="courseEditForm.detail">
                        </el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="courseAddDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="courseAddSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            courseSearchForm: {
                courseName: '',
                courseType: ''
            },
            courseTypes: ['公共基础必修课',
                '公共选修课',
                '学科基础课',
                '专业必修课',
                '专业选修课',
                '集中性实践教学环节'],
            courseMajors: ['软件工程', '空间信息', '大数据'],
            courseList: {
                total: 0,
                pageSize: 10,
                page: 1,
                data: []

            },
            courseEditDialogVisible: false,
            courseEditForm: { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" },
            courseAddDialogVisible: false,
            courseRules:{
                name:[
                    { required: true, message: '请输入课程名称', trigger: 'blur' },
                    { min: 4, max: 25, message: '长度在 4 到 25 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '课程性质不能为空' },
                ],
                credit:[
                    { required: true, message: '课程学分不能为空' },
                    { type: 'number', message: 'invalid' }
                ],
                grade:[
                    { required: true, message: '课程年级不能为空' },
                    { type: 'number', message: 'invalid' }
                ],
                major:[
                    { required: true, message: '课程专业不能为空' },
                ],
                detail:[
                    { max: 200, message: '长度应小于 200 个字符', trigger: 'blur' }
                ]
            },
        };
    },
    methods: {
        courseSearchClear() {
            this.courseSearchForm.courseName = '';
            this.courseSearchForm.courseType = '';
            this.courseListGet();
        },
        courseEdit(course) {
            this.courseEditForm = course;
            this.courseEditDialogVisible = true;
        },
        courseAdd() {
            this.courseEditForm = { id: -1, name: "", type: "", credit: "", grade: "", major: "", detail: "" }
            this.courseAddDialogVisible = true;
        },
        handleSizeChange(val) {
            this.courseList.pageSize = val;
            this.courseListGet();
        },
        handleCurrentChange(val) {
            this.courseList.page = val;
            this.courseListGet();
        },
        courseEditSubmit() {
            this.$confirm('确定要保存' + this.courseEditForm.name + '编辑吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $.ajax({
                    url: this.$apiUrl + "/courseAction/edit",
                    method: "POST",
                    data: this.courseEditForm,
                    success: (data) => {
                        if (!data.success) {
                            this.$message({
                                type: 'error',
                                message: '保存编辑失败',
                                showClose: true
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '保存编辑成功',
                                showClose: true
                            });
                            this.courseEditDialogVisible = false;
                        }
                        this.courseListGet();
                    },
                    error: (xhr) => {
                        this.$message({
                            type: 'error',
                            message: '请求数据失败，code=' + xhr.status,
                            showClose: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消保存',
                    showClose: true
                });
            });
        },
        courseAddSubmit() {
            this.$confirm('确定要添加' + this.courseEditForm.name + '编辑吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $.ajax({
                    url: this.$apiUrl + "/courseAction/add",
                    method: "POST",
                    data: this.courseEditForm,
                    success: (data) => {
                        if (!data.success) {
                            this.$message({
                                type: 'error',
                                message: '添加失败',
                                showClose: true
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '添加成功',
                                showClose: true
                            });
                            this.courseAddDialogVisible = false;
                        }
                        this.courseListGet();
                    },
                    error: (xhr) => {
                        this.$message({
                            type: 'error',
                            message: '请求数据失败，code=' + xhr.status,
                            showClose: true
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消添加',
                    showClose: true
                });
            });
        },
        courseDeleteSubmit(course) {
            this.$confirm('确定要删除' + course.name + '吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $.ajax({
                    url: this.$apiUrl + "/courseAction/delete",
                    method: "POST",
                    data: { id: course.id },
                    success: (data) => {
                        if (!data.success) {
                            this.$message({
                                type: 'error',
                                message: '删除失败',
                                showClose: true
                            });
                        } else {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                                showClose: true
                            });
                        }
                        this.courseListGet();
                    },
                    error: (xhr) => {
                        this.$message({
                            type: 'error',
                            message: '请求数据失败，code=' + xhr.status,
                            showClose: true
                        });
                    }
                });
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '取消删除',
                    showClose: true
                });
            });
        },
        courseListGet() {
            $.ajax({
                url: this.$apiUrl + "/courseAction/get",
                method: "GET",
                data: {
                    page: this.courseList.page,
                    pageSize: this.courseList.pageSize,
                    keyword: this.courseSearchForm.courseName,
                    courseType: this.courseSearchForm.courseType
                },
                success: (data) => {
                    console.log(data);
                    this.courseList.data = data.data;
                    this.courseList.total = data.count;
                },
                error: (xhr) => {
                    this.$message({
                        type: 'error',
                        message: '请求数据失败，code=' + xhr.status,
                        showClose: true
                    });
                }
            });
        },
    },
    mounted() {
        this.courseListGet();
    }
};
</script>