<template>
    <div class="app-container">
        <div class="sign">
            <ol>
                <li>
                    德、智、体、美、劳全面发展,在校期间未受纪律处分.
                </li>
                <li>
                    学习勤奋,成绩优异,第一学期至第五学期所有课程的平均学分绩专业排名前10%.
                </li>
                <li>
                    积极参加学校开展的第二课堂活动活动,第二课堂成绩单学分认定为优秀.身体健康,体能考核成绩达标.(每学年体测成绩60分以上)
                </li>
                <li>
                    获得过校级及以上"三好学生""优秀学生干部""优秀共青团员""优秀共青团干部"中的其中一项荣誉.
                </li>
                <li>
                    积极参与各级各类校园文化活动和社会实践活动;在各级各类活动(竞赛)中成绩突出;在就业创业方面作为优秀典型.
                </li>
                <!-- <li>
                    积极参与各级各类校园文化活动和社会实践活动;在各级各类活动(竞赛)中成绩突出;六个学期青年大学习率达98%以上;在就业创业方面作为优秀典型.
                </li> -->
                <li>
                    同等条件下,获得国家奖学金或国家励志奖学金等国家级奖励的毕业生应优先推荐.
                </li>
                <li>
                    认定为校级优秀毕业生,才有资格推荐为上级优秀毕业生.
                </li>
            </ol>
        </div>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-plus" size="mini" @click="handleAdd">我要申请</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-view" size="mini"
                    @click="lookRankVClick">查看我的相关成绩</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="biyeapplyList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="学号" align="center" prop="stuNo" />
            <el-table-column label="第二课堂学分总分值认定" align="center" prop="classTwo" />
            <!-- <el-table-column label="青年大学习学习率" align="center" prop="youthStudy" /> -->
            <el-table-column label="政治面貌" align="center" prop="zzmm" />
            <el-table-column label="职务" align="center" prop="classPost" />
            <el-table-column label="申请状态" align="center" width="120px">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.audius_detail_type" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="el-icon-view"
                        @click="lookVClick(scope.row)">查看详情</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="cancelVClick(scope.row)"
                        v-if="scope.row.applyStatus == '1'">取消申请</el-button>
                    <el-button v-if="scope.row.applyStatus == 10" type="text" size="mini" icon="el-icon-refresh"
                        @click="reApplyVClick(scope.row)" fixed="right">重新提交</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <el-dialog :visible.sync="lookRankV" title="我的相关成绩">
            <el-table :data="rank_data">
                <el-table-column label="学业成绩专业排名" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.majorRank + "/" + scope.row.majorCount }}
                    </template>
                </el-table-column>
                <el-table-column label="专业排名百分比(四舍五入保留整数)" align="center">
                    <template slot-scope="scope">
                        {{ Math.round(Math.round(scope.row.majorRank / scope.row.majorCount * 10000) / 100) + "%" }}
                    </template>
                </el-table-column>
            </el-table>
            <el-table :data="sport_data">
                <el-table-column label="学年" align="center" prop="stuYearName" />
                <el-table-column label="体测成绩" align="center" prop="sportScore" />
            </el-table>

        </el-dialog>

        <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form class="submitForm" ref="form" :model="form" :rules="rules" label-width="180px" size="mini">
                <el-form-item label="学年">
                    <el-select v-model="form.stuYearId" class="addForm-input">
                        <el-option v-for="(v, i) in year_list" :key="i" :label="v.stuYearName"
                            :value="v.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="第二课堂学分总分值认定" prop="classTwo">
                    <el-input v-model="form.classTwo" placeholder="请输入第二课堂学分总分值认定" />
                </el-form-item>
                <!-- <el-form-item label="青年大学习学习率" prop="youthStudy">
                    <el-input v-model="form.youthStudy" placeholder="请输入青年大学习学习率" />
                </el-form-item> -->
                <el-form-item label="政治面貌" prop="zzmm">
                    <el-input v-model="form.zzmm" placeholder="请输入政治面貌" />
                </el-form-item>
                <el-form-item label="职务" prop="classPost">
                    <el-input v-model="form.classPost" placeholder="请输入职务" />
                </el-form-item>
                <el-form-item label="获奖情况" prop="goodHis">
                    <el-input :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }" v-model="form.goodHis"
                        type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="主要事迹" prop="mainHis">
                    <el-input :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }" v-model="form.mainHis"
                        type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="doApply">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="reApplyV" title="重新申请优秀毕业生">
            <el-form label-width="180px" class="apply-form">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="学年">
                            <el-select v-model="reApplyForm.stuYearId" class="addForm-input">
                                <el-option v-for="(v, i) in year_list" :key="i" :label="v.stuYearName"
                                    :value="v.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="第二课堂学分总分值认定" prop="classTwo">
                            <el-input v-model="reApplyForm.classTwo" placeholder="请输入第二课堂学分总分值认定" />
                        </el-form-item>
                        <!-- <el-form-item label="青年大学习学习率" prop="youthStudy">
                            <el-input v-model="reApplyForm.youthStudy" placeholder="请输入青年大学习学习率" />
                        </el-form-item> -->
                        <el-form-item label="政治面貌" prop="zzmm">
                            <el-input v-model="reApplyForm.zzmm" placeholder="请输入政治面貌" />
                        </el-form-item>
                        <el-form-item label="职务" prop="classPost">
                            <el-input v-model="reApplyForm.classPost" placeholder="请输入职务" />
                        </el-form-item>
                        <el-form-item label="获奖情况" prop="goodHis">
                            <el-input :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }"
                                v-model="reApplyForm.goodHis" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="主要事迹" prop="mainHis">
                            <el-input :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }"
                                v-model="reApplyForm.mainHis" type="textarea" placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" size="mini" @click="reApply">提交申请</el-button>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
        </el-dialog>


        <el-dialog :visible.sync="lookV" title="查看详情" fullscreen>
            <el-steps :active="getStep(lookForm)">
                <el-step title="学生提交申请" description=""></el-step>

                <el-step title="辅导员审核"
                    :status="isEmpty(lookForm.fdyCmt) ? 'wait' : getStepStatus(lookForm.fdyCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.fdyNoName) ? '' : lookForm.fdyNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.fdyCmt) ? '' : lookForm.fdyCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.fdyTime) ? '' : lookForm.fdyTime }}
                        </div>
                    </template>
                </el-step>

                <el-step title="学院审核"
                    :status="isEmpty(lookForm.xwCmt) ? 'wait' : getStepStatus(lookForm.xwCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.xwNoName) ? '' : lookForm.xwNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.xwCmt) ? '' : lookForm.xwCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.xwTime) ? '' : lookForm.xwTime }}
                        </div>
                    </template>
                </el-step>

                <el-step title="学工审核"
                    :status="isEmpty(lookForm.jwcCmt) ? 'wait' : getStepStatus(lookForm.jwcCmt)">
                    <template slot="description">
                        <div>
                            {{ isEmpty(lookForm.xgNoName) ? '' : lookForm.xgNoName }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.jwcCmt) ? '' : lookForm.jwcCmt }}
                        </div>
                        <div>
                            {{ isEmpty(lookForm.xgTime) ? '' : lookForm.xgTime }}
                        </div>
                    </template>
                </el-step>
            </el-steps>
            <hr />
            <el-form label-width="180px" class="apply-form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="学年">
                            <el-input size="mini" class="addForm-input" v-model="lookForm.stuYearName"
                                readonly></el-input>
                        </el-form-item>
                        <el-form-item label="政治面貌">
                            <el-input size="mini" class="addForm-input" v-model="lookForm.zzmm" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-input size="mini" class="addForm-input" v-model="lookForm.classPost"
                                readonly></el-input>
                        </el-form-item>
                        <el-form-item label="第二课堂学分总分值认定" prop="classTwo">
                            <el-input v-model="lookForm.classTwo" placeholder="请输入第二课堂学分总分值认定" readonly />
                        </el-form-item>
                        <!-- <el-form-item label="青年大学习学习率" prop="youthStudy">
                            <el-input v-model="lookForm.youthStudy" placeholder="请输入青年大学习学习率" readonly />
                        </el-form-item> -->
                        <el-form-item label="获奖情况">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                                v-model="lookForm.goodHis" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="主要事迹">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                                v-model="lookForm.mainHis" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="辅导员审核意见" v-if="!isEmpty(lookForm.fdyCmt)">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                                v-model="lookForm.fdyCmt" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="学院审核意见" v-if="!isEmpty(lookForm.xwCmt)">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                                v-model="lookForm.xwCmt" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="学工审核意见" v-if="!isEmpty(lookForm.jwcCmt)">
                            <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                                v-model="lookForm.jwcCmt" readonly></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>




    </div>
</template>

<script>
import { cancelApply, doApply, getOwnStuScoreMajorRank, listOwnApply, listOwnSportScore, reApply } from "@/api/comprehensive/biyeapply";

import { listAllYear as listYear } from "@/api/stuCQS/basedata/year";
import lodash from "lodash";

import { fullLoading, isEmpty } from "@/api/helpFunc";
export default {
    name: "Biyeapply",
    dicts: ['audius_detail_type'],
    data() {
        return {

            isEmpty,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 优秀毕业生表格数据
            biyeapplyList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                stuNo: null,
                stuYearId: null,
                classTwo: null,
                youthStudy: null,
                zzmm: null,
                classPost: null,
                goodHis: null,
                mainHis: null,
                fdyCmt: null,
                xwCmt: null,
                jwcCmt: null,
                applyStatus: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
            },

            year_list: [],

            lookRankV: false,
            rank_data: [],
            sport_data: [],


            reApplyV: false,
            reApplyForm: {
                youthStudy: "",
                classTwo: "",
                zzmm: "",
                classPost: "",
                goodHis: "",
                mainHis: "",
                stuYearId: null,
                id: null
            },

            lookV: false,
            lookForm: {},
        };
    },
    created() {
        this.getList();
        this.listStuYear();
    },
    methods: {
        getStepStatus(data) {
            if ((data.includes('同意') && !data.includes('不同意')) || data.includes('通过') || (data.includes('符合') && !data.includes('不符合'))) {
                return 'success';
            } else {
                return 'error';
            }
        },
        getStep(data) {
            if (!isEmpty(data.jwcCmt)) {
                return 4;
            } else if (!isEmpty(data.xwCmt)) {
                return 3;
            } else if (!isEmpty(data.fdyCmt)) {
                return 2;
            } else {
                return 1;
            }
        },
        lookVClick(val) {
            this.lookForm = lodash.cloneDeep(val);
            this.lookV = true;
        },

        async reApply() {
            let sdata = { ...this.reApplyForm };
            sdata.youthStudy = "100%";
            if (isEmpty(sdata.stuYearId)) {
                this.$message.info("请选择学年");
                return;
            }

            // if (isEmpty(sdata.youthStudy)) {
            //     this.$message.info("请填写青年大学习学习率");
            //     return;
            // }

            if (isEmpty(sdata.classTwo)) {
                this.$message.info("请填写第二课堂学分总分值认定");
                return;
            }

            if (isEmpty(sdata.zzmm)) {
                this.$message.info("请填写政治面貌");
                return;
            }

            if (isEmpty(sdata.classPost)) {
                this.$message.info("请填写职务");
                return;
            }

            if (isEmpty(sdata.goodHis)) {
                this.$message.info("请填写获奖记录");
                return;
            }

            if (isEmpty(sdata.mainHis)) {
                this.$message.info("请填写主要事迹");
                return;
            }
            if (sdata.mainHis.length < 100) {
                this.$message.info("主要事迹字数需要100字以上");
                return;
            }



            this.fullLoading = true;
            let res = await reApply(sdata);
            this.fullLoading = false;
            if (res.code == 200) {
                this.reApplyV = false;
                this.$message.success(res.msg);
                this.getList();
            }
        },

        reApplyVClick(v) {
            this.reApplyForm = { ...v };
            this.reApplyV = true;
        },

        async lookRankVClick() {
            let loading = fullLoading(this);
            let res = await getOwnStuScoreMajorRank();
            let res1 = await listOwnSportScore();
            loading.close();
            if (res.code == 200) {
                this.rank_data = [res.data];
            }
            if (res1.code == 200) {
                this.sport_data = [...res1.data.filter(x => x.sportScore != 0)];
            }

            this.lookRankV = true;

        },

        cancelVClick(val) {
            if (val != null) {
                let id = val.id;
                if (!isEmpty(id)) {
                    this.$prompt('清输入取消理由', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^.+$/,
                        inputErrorMessage: '不能为空'
                    }).then(async ({ value }) => {
                        let sdata = {
                            id: id,
                            reason: value
                        };
                        let loading = fullLoading(this);
                        let res = await cancelApply(sdata);
                        loading.close();
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.getList();
                        }

                    }).catch((ex) => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                        console.log(ex);
                    });
                }
            }
        },
        async doApply() {
            let sdata = { ...this.form };
            sdata.youthStudy = "100%";
            if (isEmpty(sdata.stuYearId)) {
                this.$message.info("请选择学年");
                return;
            }

            // if (isEmpty(sdata.youthStudy)) {
            //     this.$message.info("请填写青年大学习学习率");
            //     return;
            // }

            if (isEmpty(sdata.classTwo)) {
                this.$message.info("请填写第二课堂学分总分值认定");
                return;
            }

            if (isEmpty(sdata.zzmm)) {
                this.$message.info("请填写政治面貌");
                return;
            }

            if (isEmpty(sdata.classPost)) {
                this.$message.info("请填写职务");
                return;
            }

            if (isEmpty(sdata.goodHis)) {
                this.$message.info("请填写获奖记录");
                return;
            }

            if (isEmpty(sdata.mainHis)) {
                this.$message.info("请填写主要事迹");
                return;
            }
            if (sdata.mainHis.length < 100) {
                this.$message.info("主要事迹字数需要100字以上");
                return;
            }

            doApply(sdata).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                    this.open = false;
                }
            })

        },

        async listStuYear() {
            let res = await listYear();
            if (res.code == 200) {
                this.year_list = [...res.data];
            }
        },

        /** 查询优秀毕业生列表 */
        getList() {
            this.loading = true;
            listOwnApply(this.queryParams).then(response => {
                this.biyeapplyList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                stuNo: null,
                stuYearId: null,
                classTwo: null,
                youthStudy: null,
                zzmm: null,
                classPost: null,
                goodHis: null,
                mainHis: null,
                fdyCmt: null,
                xwCmt: null,
                jwcCmt: null,
                applyStatus: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        async handleAdd() {
            let loading = fullLoading(this);
            let res1 = await getOwnStuScoreMajorRank();
            loading.close();
            if (res1.code == 200) {
                let data = res1.data;
                console.log(data);
                let stuRank = Math.round(Math.round(data.majorRank / data.majorCount * 10000) / 100);
                if (stuRank > 10) {
                    this.$message.error("您的学业成绩未达到专业前10%");
                    return;
                }

                this.reset();
                this.open = true;
                this.title = "申请优秀毕业生";
            }



        },
    }
};
</script>
<style scoped>
.submitForm .el-form-item {
    margin-bottom: 0px;
}

.sign {
    width: 100%;
    border: 1px solid rgb(163, 211, 255);
    font-size: small;
    margin-bottom: 10px;
    border-radius: 2px;
}
</style>