<template>
  <div v-loading.fullscreen.lock="fullLoading" :element-loading-text="loadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)" class="app-container">

    <div class="sign">
      <ol>
        <li>
          德、智、体、美、劳全面发展，平时注重道德修养，勤俭节约，弘扬正能量，树立良好形象。
        </li>
        <li>
          以身作则，为人表率，具有较强的集体观念和集体荣誉感。热心为同学服务，待人诚恳、谦虚、有礼貌。
        </li>
        <li>
          积极参加学校开展的第二课堂活动，第二课堂成绩单学分认定为优秀。在各级各类活动（竞赛）中成绩突出。
        </li>
        <li>
          积极参加体育锻炼及其他文体活动，身体健康，体能考核成绩为良好及以上。(体测成绩80分以上)
        </li>
        <li>
          参评学年各科平均学分绩75分以上（含75分），考查课“中等”及以上，平均学分绩班级排名前30%，学年综合素质测评班级排名前30%。
        </li>
        <li>
          <span style="text-decoration: underline;color: lightskyblue;cursor: pointer;"
                @click="lookMore"
          >查看更多</span>
        </li>
      </ol>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addVClick">提交申请</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-view" size="mini"
                   @click="myScoreVClick"
        >查看我的成绩</el-button>
      </el-col>
    </el-row>

    <!-- 查看我的申请 -->
    <el-table v-loading="loading" :data="table_data">
      <el-table-column label="奖项" prop="typeName" />
      <el-table-column label="申请状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.audius_detail_type" :value="scope.row.applyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="提交时间" prop="applyTime" align="center" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-view"
                     @click="lookVClick(scope.row)"
          >查看详情</el-button>
          <el-button v-if="scope.row.applyStatus == '1'" type="text" size="mini" icon="el-icon-close"
                     @click="cancelVClick(scope.row)"
          >取消申请</el-button>
          <el-button v-if="scope.row.applyStatus == '10'" type="text" size="mini" icon="el-icon-refresh"
                     @click="refreshVClick(scope.row)"
          >重新提交</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 title="申请三好学生" :visible.sync="addV" width="600px">

      <el-form label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="政治面貌">
              <el-input v-model="addForm.zzmm" size="mini" class="addForm-input"
                        placeholder="请输入政治面貌(例如：群众、共青团员)"
              />
            </el-form-item>
            <el-form-item label="第二课堂学分认定">
              <el-select v-model="addForm.classtwoSure" size="mini" placeholder="第二学分成绩认定">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                           :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="青年大学习学习率">
                            <el-input size="mini" class="addForm-input" v-model="addForm.youthPercent"
                                placeholder="请输入青年大学学习率，单位为%"></el-input>
                        </el-form-item> -->
            <el-form-item label="职务">
              <el-input v-model="addForm.classPost" size="mini" class="addForm-input"
                        placeholder="请输入职务(例如：班长，没有填 无)"
              />
            </el-form-item>
            <el-form-item label="获奖情况">
              <el-input v-model="addForm.goodHis" type="textarea" :maxlength="1000"
                        :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input" placeholder="请输入获奖情况"
              />
            </el-form-item>
            <el-form-item label="主要事迹">
              <el-input v-model="addForm.mainHis" type="textarea" :maxlength="1000"
                        :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                        placeholder="请输入主要事迹，字数100字以上"
              />
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="doApply">提交申请</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 title="辅导员审核"
                 :status="isEmpty(lookForm.fdyComment) ? 'wait' : getStepStatus(lookForm.fdyComment)"
        >
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.fdyNoName) ? '' : lookForm.fdyNoName }}
            </div>
            <div>
              {{ isEmpty(lookForm.fdyComment) ? '' : lookForm.fdyComment }}
            </div>
            <div>
              {{ isEmpty(lookForm.fdyTime) ? '' : lookForm.fdyTime }}
            </div>
          </template>
        </el-step>

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

        <el-step title="学工审核"
                 :status="isEmpty(lookForm.finalComment) ? 'wait' : getStepStatus(lookForm.finalComment)"
        >
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.finalNoName) ? '' : lookForm.finalNoName }}
            </div>
            <div>
              {{ isEmpty(lookForm.finalComment) ? '' : lookForm.finalComment }}
            </div>
            <div>
              {{ isEmpty(lookForm.finalTime) ? '' : lookForm.finalTime }}
            </div>
          </template>
        </el-step>
      </el-steps>
      <hr>
      <el-form label-width="160px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="政治面貌">
              <el-input v-model="lookForm.zzmm" size="mini" class="addForm-input" readonly />
            </el-form-item>
            <el-form-item label="职务">
              <el-input v-model="lookForm.classPost" size="mini" class="addForm-input"
                        readonly
              />
            </el-form-item>
            <!-- <el-form-item label="青年大学习学习率">
                            <el-input size="mini" class="addForm-input" v-model="lookForm.youthPercent"
                                placeholder="请输入青年大学学习率，单位为%" readonly></el-input>
                        </el-form-item> -->
            <el-form-item label="第二课堂学分认定">
              <el-input v-model="lookForm.classtwoSure" size="mini" class="addForm-input"
                        readonly
              />
            </el-form-item>
            <el-form-item label="获奖情况">
              <el-input v-model="lookForm.goodHis" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                        class="addForm-input" readonly
              />
            </el-form-item>
            <el-form-item label="主要事迹">
              <el-input v-model="lookForm.mainHis" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                        class="addForm-input" readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!isEmpty(lookForm.fdyComment)" label="辅导员审核意见">
              <el-input v-model="lookForm.fdyComment" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                        class="addForm-input" readonly
              />
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.deptComment)" label="学院审核意见">
              <el-input v-model="lookForm.deptComment" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                        class="addForm-input" readonly
              />
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.finalComment)" label="学工审核意见">
              <el-input v-model="lookForm.finalComment" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                        class="addForm-input" readonly
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="myScoreV" title="我的成绩">
      <el-table :data="Final_grade">
        <el-table-column label="学年" prop="stuYearName" align="center" />
        <el-table-column label="平均学分绩" prop="stuScore" align="center" />
        <el-table-column label="综合素质总成绩" prop="cphScore" align="center" />
        <el-table-column label="体能测试成绩" prop="sportScore" align="center" />
        <el-table-column label="平均学分绩班级排名" align="center">
          <template slot-scope="scope">
            {{ scope.row.stuClassRank + '/' + scope.row.classCount }}
          </template>
        </el-table-column>
        <el-table-column label="综合素质总成绩班级排名" align="center">
          <template slot-scope="scope">
            {{ scope.row.cphClassRank + '/' + scope.row.classCount }}
          </template>
        </el-table-column>
      </el-table>
      <el-table :data="count_list">
        <el-table-column label="学年" prop="stuYearName" align="center" />
        <el-table-column label="课程总门数" prop="courseCount" align="center" />
        <el-table-column label="通过门数" prop="passCount" align="center" />
        <el-table-column label="未通过门数" prop="unpassCount" align="center" />
      </el-table>
      <el-table v-loading="course_loading" :data="score_list">
        <el-table-column label="学年" prop="stuYearName" align="center" />
        <el-table-column label="课程名称" prop="courseName" align="center" />
        <el-table-column label="课程得分" prop="courseScore" align="center" />
        <el-table-column label="是否通过" align="center">
          <template slot-scope="scope">
            {{ scope.row.isPass == "true" ? "通过" : "未通过" }}
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="courseTotal > 0" :total="courseTotal" :page.sync="courseParams.pageNum"
                  :limit.sync="courseParams.pageSize" @pagination="listOwnScoreClassRank"
      />
    </el-dialog>

    <el-dialog :visible.sync="lookMoreV">
      <MoreDetail />
    </el-dialog>


    <el-dialog title="重新提交" :visible.sync="refreshV" width="600px">

      <el-form label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="政治面貌">
              <el-input v-model="refreshForm.zzmm" size="mini" class="addForm-input"
                        placeholder="请输入政治面貌(例如：群众、共青团员)"
              />
            </el-form-item>
            <el-form-item label="第二课堂学分认定">
              <el-select v-model="refreshForm.classtwoSure" size="mini" placeholder="第二学分成绩认定">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                           :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="青年大学习学习率">
                            <el-input size="mini" class="addForm-input" v-model="refreshForm.youthPercent"
                                placeholder="请输入青年大学学习率，单位为%"></el-input>
                        </el-form-item> -->
            <el-form-item label="职务">
              <el-input v-model="refreshForm.classPost" size="mini" class="addForm-input"
                        placeholder="请输入职务(例如：班长，没有填 无)"
              />
            </el-form-item>
            <el-form-item label="获奖情况">
              <el-input v-model="refreshForm.goodHis" type="textarea" :maxlength="1000"
                        :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input" placeholder="请输入获奖情况"
              />
            </el-form-item>
            <el-form-item label="主要事迹">
              <el-input v-model="refreshForm.mainHis" type="textarea" :maxlength="1000"
                        :autosize="{ minRows: 10, maxRows: 10 }" class="addForm-input"
                        placeholder="请输入主要事迹，字数100字以上"
              />
            </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>


  </div>
</template>
<script>

import { cancelOwnApply, reApply } from '@/api/stuCQS/good/apply'

import {
    goodStuApply, getMyApply, getMyGrade, verifyApplySHXS
    , countOwnPassOther, listOwnScoreClassRankOther
} from '@/api/stuCQS/good/MeritStudent'
import { isEmpty } from '@/api/helpFunc'
import lodash from 'lodash'
import MoreDetail from '@/views/stuCQS/good/MoreDetail.vue'


export default {
    name: 'MeritstudentApply',
    dicts: ['audius_detail_type'],
    components: {
        MoreDetail
    },
    data() {
        return {
            isEmpty,
            can_list: [],
            addV: false,
            addForm: {
                zzmm: '',
                classPost: '',
                goodHis: '',
                mainHis: '',
                bornTime: '',
                material: null,
                classtwoSure: '',
                youthPercent: '100'
            },
            term_list: [],
            fullLoading: false,

            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            total: 0,
            loading: false,
            table_data: [],

            lookV: false,
            lookForm: {},
            //附件
            material_list: [],
            count_list: [],//计数
            score_list: [],//课程分数
            Final_grade: [],//最终成绩
            myScoreV: false,
            courseTotal: 0,
            courseParams: {
                pageNum: 1,
                pageSize: 10
            },
            course_loading: false,

            lookMoreV: false,
            // 第二课堂学分认定
            options: [
                {
                    value: '合格',
                    label: '合格',
                },
                {
                    value: '不合格',
                    label: '不合格',
                }
            ],

            refreshForm: {},
            refreshV: false,
        }
    },
    created() {
        this.listCan()
        this.getList()
        this.initTerm()
    },
    methods: {
        getStepStatus(data) {
            if ((data.includes('同意') && !data.includes('不同意')) || data.includes('通过') || (data.includes('符合') && !data.includes('不符合'))) {
                return 'success'
            } else {
                return 'error'
            }
        },
        getStep(data) {
            if (!isEmpty(data.finalComment)) {
                return 4
            } else if (!isEmpty(data.deptComment)) {
                return 3
            } else if (!isEmpty(data.fdyComment)) {
                return 2
            } else {
                return 1
            }
        },
        async reApply() {
            let sdata = { ...this.refreshForm }
            if (isEmpty(sdata.zzmm)) {
                this.$message.info('请填写政治面貌')
                return
            }
            if (isEmpty(sdata.classPost)) {
                this.$message.info('请填写职务')
                return
            }
            // if (isEmpty(sdata.youthPercent)) {
            // this.$message.info("请填写青年大学习学习率");
            //return;
            //}
            if (isEmpty(sdata.classtwoSure)) {
                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
            sdata.applyId = sdata.apply_id
            let res = await reApply(sdata)
            this.fullLoading = false
            if (res.code == 200) {
                this.refreshV = false
                this.resetAddForm()
                this.$message.success(res.msg)
                this.getList()
            }
        },
        refreshVClick(v) {
            this.refreshForm = { ...v }
            this.refreshV = true
        },

        lookMore() {
            this.lookMoreV = true
            window.open('http://zhxg.gxsdxy.cn/file/pypxnotify.pdf')
        },
        cancelVClick(v) {
            if (v != null) {
                console.log(v)
                let id = v.apply_id
                if (!isEmpty(id)) {
                    this.$prompt('清输入取消理由', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^.+$/,
                        inputErrorMessage: '不能为空'
                    }).then(async ({ value }) => {
                        let sdata = {
                            id: id,
                            reason: value
                        }
                        this.fullLoading = true
                        let res = await cancelOwnApply(sdata)
                        this.fullLoading = false
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            this.getList()
                        }

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        })
                    })

                }
            }
        },
        async listOwnScoreClassRank() {
            this.course_loading = true
            // 查询我的成绩
            let res = await getMyGrade(this.courseParams)
            let countRes = await countOwnPassOther()
            let rankList = await listOwnScoreClassRankOther()
            if (countRes.code == 200) {
                this.count_list = [...countRes.data]
            }
            if (rankList.code == 200) {
                this.Final_grade = [...rankList.data]
            }
            if (res.code == 200) {
                this.score_list = lodash.cloneDeep(res.rows)
                this.myScoreV = true
                this.courseTotal = res.total
            }
            this.course_loading = false
        },
        async listOwnScoreClassRankS() {
            this.course_loading = true
            // 查询我的成绩
            let res = await getMyGrade(this.courseParams)
            this.course_loading = false
            if (res.code == 200) {
                this.score_list = lodash.cloneDeep(res.rows)
                this.courseTotal = res.total
            }
        },


        myScoreVClick() {
            this.listOwnScoreClassRank()
        },

        lookVClick(v) {
            console.log(v)
            this.lookForm = lodash.cloneDeep(v)
            if (!isEmpty(this.lookForm.material)) {
                this.material_list = this.lookForm.material.split(',')
            }
            this.lookV = true
        },


        async getList() {
            this.loading = true
            let res = await getMyApply(this.queryParams)
            this.loading = false

            if (res.code == 200) {
                this.table_data = lodash.cloneDeep(res.rows)
            }
        },


        async listCan() {
            // let res = await listXyjxjCanType();
            // if (res.code == 200) {
            //     this.can_list = lodash.cloneDeep(res.data);
            // }
        },
        async initTerm() {
            // let res1 = await listXyjxjCanType();
            // if (res1.code == 200) {
            //     let data = lodash.cloneDeep(res1.data);
            //     if (!isEmpty(data) && data != []) {
            //         let year = data[0].stuYearId;
            //         let res2 = await listTermByYear(year);
            //         if (res2.code == 200) {
            //             this.term_list = lodash.cloneDeep(res2.data);
            //         }
            //     }
            // }

        },
        async addVClick() {
            this.loadingText = '提示：正在校验资格';
            this.fullLoading = true;
            try {
                const verify = await verifyApplySHXS();
                if (verify.code != 200) {
                  this.$message && this.$message.warning(verify.msg || '未通过资格校验');
                  return;
                }
                this.addV = true;
                this.course_loading = true;
                const res = await getMyGrade(this.courseParams);
                const countRes = await countOwnPassOther();
                const rankList = await listOwnScoreClassRankOther();
                if (countRes.code == 200) {
                  this.count_list = [...countRes.data];
                }
                if (rankList.code == 200) {
                  this.Final_grade = [...rankList.data];
                }
                this.course_loading = false;
                if (res.code == 200) {
                  this.score_list = lodash.cloneDeep(res.rows);
                  this.courseTotal = res.total;
                }
              } catch (e) {
                this.$message && this.$message.error('校验失败，请稍后再试');
              } finally {
                this.fullLoading = false;
                this.loadingText = '提示：处理中...';
              }
            },
            // ... existing code ...
            resetAddForm() {
                this.addForm = {
                    zzmm: '',
                    classPost: '',
                    goodHis: '',
                    mainHis: '',
                    bornTime: '',
                    material: null
                }
            }

    }
}
</script>
<style lang="scss" scoped>
.addForm-input {
    width: 400px;
}

.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>