

<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item prop="taskName" label="任务名称">
                <el-input v-model="queryForm.taskName" placeholder="任务名称"></el-input>
            </el-form-item>
            <el-form-item prop="grade" label="级部">
                <el-input v-model="queryForm.grade" placeholder="级部"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd()">新增</el-button>
            </el-col>

        </el-row>
        <!-- 列表 -->
        <div class="listBlock">
            <div class="itemBlock" v-for="(task, index) in tasks" :key="index">
                <!-- 任务详细信息 -->
                <div class="task-info">
                    <div class="task-name">{{ task.taskName }}</div>
                    <!-- 右上角显示已选人数/全部人数 -->
                    <div class="task-count">
                        <div class="count">
                            {{ task.yxrs }}/{{ task.zrs }}
                        </div>
                        <div class="sun">总人数/已选人数</div>
                    </div>
                </div>
                <div class="task-level">
                    <span>级部：{{ task.grade }}</span>
                    <span>创建人：{{ task.createBy }}</span>
                </div>
                <div class="task-time">
                    <div>创建时间：{{ task.createTime }}</div>
                </div>
                <!-- 按钮 -->
                <div class="task-buttons">
                    <el-button size="mini" icon="el-icon-edit" round @click="handleUpdate(task)">修改</el-button>
                    <el-button type="primary" size="small" round @click="performance(task.id, task.grade)">成绩管理</el-button>
                    <el-button type="success" size="small" round
                        @click="courseSelectionsituation(task.id, task.yxrs, task.zrs)">选课情况</el-button>
                    <el-button type="warning" size="small" round @click="springView(task.id, task.grade)">春季选课情况</el-button>
                    <el-button type="danger" size="small" round
                        @click="artisticView(task.id, task.grade)">艺体选课情况</el-button>
                    <el-button class="purpleBtn" size="small" round
                        @click="summerViewing(task.id, task.grade)">夏季选课情况</el-button>
                    <el-button class="rowBtn" size="small" round
                        @click="secondaryDivision(task.id, task.grade)">夏季二次分班</el-button>
                </div>
            </div>
        </div>
        <!-- 新增/修改弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px">
                <div>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="任务名称" prop="taskName">
                                <el-input v-model="form.taskName" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="发布时间">
                                <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" :style="{ width: '100%' }">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="级部" prop="grade">
                                <el-input v-model="form.grade" placeholder="请输入" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="春季" prop="cjkmList">
                                <el-select v-model="form.cjkmList" multiple placeholder="请选择" :style="{ width: '100%' }"
                                    @change="handleCjkmChange">
                                    <el-option v-for="(item, index) in dict.type.specialty" :key="index" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="夏季" prop="xjkmList">
                                <el-select v-model="form.xjkmList" multiple placeholder="请选择" :style="{ width: '100%' }"
                                    @change="handleXjkmChange">
                                    <el-option v-for="(item, index) in dict.type.summer_course" :key="index"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="16">
                            <el-form-item label="艺体" prop="ytkmList">
                                <el-select v-model="form.ytkmList" multiple placeholder="请选择" :style="{ width: '100%' }"
                                    @change="handleYtkmChange">
                                    <el-option v-for="(item, index) in dict.type.art_subject" :key="index"
                                        :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div style="text-align: center">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import { dataCurricula, addCurricula, updateCurricula, getCurricula, getDept }
    from "@/api/smartSchool/gradeWork/courseSelection/taskPublishing.js";
export default {
    name: 'taskPublishing',
    dicts: ['specialty', 'art_subject', 'summer_course'],
    data() {
        return {
            tasks: [],
            queryForm: {
                taskName: "",
                grade: "",

            },

            form: {
                id: "",
                taskName: "",
                grade: "",
                startTime: "",
                endTime: "",
                cjkmList: [],
                xjkmList: [],
                ytkmList: [],

            },
            //新增弹窗
            open: false,
            rules: {},
            // 加载遮罩
            loading: true,
            // 记录条数
            total: 0,
            title: "",
            // 详情
            look: false,
            // 日期范围
            dateRange: [],
        };
    },
    created() {
        this.getList();

    },
    methods: {
        handleCjkmChange(val) {
            console.log('val', val);
            console.log('dict', this.dict.type.specialty);
            let arr = []
            const newArr = val.map(i => {
                this.dict.type.specialty.filter(item => {
                    if (i == item.value) {
                        console.log('i == item.value ', i == item.value);
                        console.log('item', item);
                        arr.push(item)
                        this.cjkmList = arr.map(item => {
                            return {
                                dictType: item.raw.dictType,
                                dictLabel: item.raw.dictLabel,
                                dictValue: item.raw.dictValue,
                                dictSort: item.raw.dictSort,
                            }

                        })
                    }
                })

            })

            console.log('this.cjkmList', this.cjkmList);
        },
        handleXjkmChange(val) {
            console.log('val', val);
            console.log('dict', this.dict.type.specialty);
            let arr = []
            const newArr = val.map(i => {
                this.dict.type.summer_course.filter(item => {
                    if (i == item.value) {
                        console.log('i == item.value ', i == item.value);
                        console.log('item', item);
                        arr.push(item)
                        this.xjkmList = arr.map(item => {
                            return {
                                dictType: item.raw.dictType,
                                dictLabel: item.raw.dictLabel,
                                dictValue: item.raw.dictValue,
                                dictSort: item.raw.dictSort,
                            }

                        })
                    }
                })

            })

            console.log('this.xjkmList', this.xjkmList);
        },
        handleYtkmChange(val) {
            console.log('val', val);
            console.log('dict', this.dict.type.specialty);
            let arr = []
            const newArr = val.map(i => {
                this.dict.type.art_subject.filter(item => {
                    if (i == item.value) {
                        console.log('i == item.value ', i == item.value);
                        console.log('item', item);
                        arr.push(item)
                        this.ytkmList = arr.map(item => {
                            return {
                                dictType: item.raw.dictType,
                                dictLabel: item.raw.dictLabel,
                                dictValue: item.raw.dictValue,
                                dictSort: item.raw.dictSort,
                            }

                        })
                    }
                })

            })

            console.log('this.ytkmList', this.ytkmList);
        },

        /** 获取列表数据 */
        getList() {
            const params = {
                taskName: this.queryForm.taskName,
                grade: this.queryForm.grade,
            };
            dataCurricula(params).then(response => {
                this.tasks = response.rows;
                this.total = response.total;
            }).catch(err => {
                this.loading = false;
            })
        },
        //新增按钮操作
        handleAdd() {
            this.reset();
            this.open = true;
            getDept().then(response => {
                this.form.grade = response.data.grade;
                console.log(this.form.grade);
            })
                .catch(err => {
                    this.loading = false;
                });
            this.title = "新增任务发布";
        },
        // 成绩管理按钮 grade级部 ID任务ID
        performance(id, grade) {
            this.$router.push({
                path: "/gradeWork/courseSelection/performance",
                query: {
                    id,
                    grade
                }
            });
        },
        // 选课情况按钮 total总人数 choose已选人数
        courseSelectionsituation(id, total, choose) {
            this.$router.push({
                path: "/gradeWork/courseSelection/courseSelectionsituation",
                query: {
                    id, total, choose
                }
            });
        },
        // 春季选课按钮 grade级部 ID任务ID
        springView(id, grade) {
            this.$router.push({
                path: "/gradeWork/courseSelection/springView",
                query: {
                    id,
                    grade
                }
            });
        },
        //艺体选课按钮
        artisticView(id, grade) {
            this.$router.push({
                path: "/gradeWork/courseSelection/artisticView",
                query: {
                    id,
                    grade
                }
            });
        },
        //夏季选课按钮
        summerViewing(id, grade) {
            console.log("grade", grade)
            this.$router.push({
                path: "/gradeWork/courseSelection/summerViewing",
                query: {
                    id,
                    grade
                }
            });
        },
        //夏季二次选课按钮
        secondaryDivision(id, grade) {
            this.$router.push({
                path: "/gradeWork/courseSelection/secondaryDivision",
                query: {
                    id,
                    grade
                }
            });
        },

        // 取消按钮
        cancel() {
            this.open = false;
            // this.resetQuery();
            this.reset();
        },
        // 搜索按钮
        handleQuery() {
            this.throttle(() => {
                this.queryForm.pageNum = 1;
                this.getList();
            });
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 提交表单
        submitForm() {
            this.throttle(() => {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            // 编辑
                            const params = {
                                id: this.form.id,
                                taskName: this.form.taskName,
                                startTime: this.dateRange[0],
                                endTime: this.dateRange[1],
                                cjkmList: this.cjkmList,
                                xjkmList: this.xjkmList,
                                ytkmList: this.ytkmList,
                            };

                            updateCurricula(params).then(response => {
                                console.log(params, 'params');
                                console.log("res1111");
                                this.$message.success("修改成功");
                                console.log("res", response);
                                this.open = false;
                                this.getList();
                            }).catch(err => {
                                // 处理错误
                            });
                        } else {
                            // 新增
                            const params = {
                                taskName: this.form.taskName,
                                grade: this.form.grade,
                                startTime: this.dateRange[0],
                                endTime: this.dateRange[1],
                                cjkmList: this.cjkmList,
                                xjkmList: this.xjkmList,
                                ytkmList: this.ytkmList,
                            };
                            console.log(params, 'params');
                            addCurricula(params).then(response => {
                                this.$message.success("新增成功");
                                this.open = false;
                                this.getList();
                            }).catch(err => {

                            });
                        }
                    }
                });
            })
        },


        // 编辑按钮
        handleUpdate(task) {
            this.title = '修改';
            this.open = true;
            getCurricula(task.id).then(response => {
                this.form = response.data;
                console.log(this.form, 'this.form ');
                this.form.cjkmList = response.data.cjkmList.map(item => {
                    return item.dictValue
                })
                this.form.xjkmList = response.data.xjkmList.map(item => {
                    return item.dictValue
                })
                this.form.ytkmList = response.data.ytkmList.map(item => {
                    return item.dictValue
                })
                this.dateRange = [response.data.startTime, response.data.endTime];
                this.$modal.closeLoading();
            }).catch(err => {

            })
        },
        // 重置表单
        reset() {
            // 重置对话框表单
            this.form = {
                taskName: "",
                grade: "",
            };
            this.dateRange = [];
            this.resetForm('form');
        },


    },
};
</script>

<style lang="scss" scoped>
.listBlock {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}

.itemBlock {
    width: 49%;
    padding: 15px 20px 5px 20px;
    margin: 0 1.5% 1.5% 0;
    border-radius: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.listBlock .itemBlock:nth-child(2n) {
    margin-right: 0px !important;
}

.purpleBtn {
    color: #FFFFFF;
    background-color: #B66D93;
    border: 1px solid #B66D93;
}

.rowBtn {
    color: #FFFFFF;
    background-color: #D3C1B1;
    border: 1px solid #D3C1B1;
}

.task-name {
    color: #777;
    font-size: 38px;
    font-weight: 500;
    text-align: left;
}

.task-level {
    margin-bottom: 6px;
    color: rgba(108, 108, 108, 1);
    font-size: 13px;
    text-align: left;
}

.task-level>span {
    margin-right: 25px;
}

.task-time {
    color: rgba(108, 108, 108, 1);
    font-size: 13px;
    text-align: left;
}

.task-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}

.task-count {
    text-align: center;
    padding-right: 10px;
}

.task-count>.count {
    color: rgba(90, 123, 244, 1);
    font-size: 38px;
    font-weight: bold;
}

.task-count>.sun {
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: left;
    font-weight: bold;
}

.task-buttons {
    margin-top: 20px;
}

.task-buttons button {
    margin-bottom: 10px;
}

.el-card {
    margin-bottom: 20px;
}
</style>

