<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="140px">
            <el-form-item label="学号" prop="stuNo">
                <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="姓名" prop="stuName">
                <el-input v-model="queryParams.stuName" placeholder="请输入姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="班级" prop="className">
                <el-input v-model="queryParams.className" placeholder="请输入班级" clearable
                    @keyup.enter.native="handleQuery" />
            </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="manyVClick">批量通过</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini"
                    @click="handleExport">导出execl</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="#" align="center" prop="id" />
            <el-table-column label="学年" align="center" prop="stuYearName" />
            <el-table-column label="班级" align="center" prop="className" />
            <el-table-column label="学号" align="center" prop="stuNo" />
            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="审核状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.knzz_tufa_apply_status" :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 size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">审核</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit"
                        @click="editVClick(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 @close="getList" title="审核" :visible.sync="lookV" :fullscreen="true" :destroy-on-close="true">
            <el-row>
                <el-col :span="12">
                    <TufaLook v-if="lookV" :formData="lookForm" />
                </el-col>
                <el-col :span="12">
                    <!-- 中职毕业证下载 -->
                    <el-form label-width="120px" v-if="lookForm.diplomaCertificate">
                        <el-form-item label="中职毕业证">
                            <el-button type="primary" size="mini" icon="el-icon-download" @click="downloadDiploma">下载毕业证
                            </el-button>

                            <el-button type="primary" size="mini" icon="el-icon-view" @click="lookBiye">预览毕业证
                            </el-button>

                            <el-dialog :visible.sync="lookBiyeV" :destroy-on-close="true" append-to-body>
                                <span slot="title">中职毕业证预览</span>
                                <iframe v-if="lookBiyeUrl" :src="lookBiyeUrl" style="width: 100%; height: 80vh;"
                                    frameborder="0"></iframe>
                            </el-dialog>

                        </el-form-item>
                    </el-form>
                    <el-form label-width="200px" size="mini" class="lookForm">
                        <el-form-item label="是否通过">
                            <el-select @change="changeAuditRes" v-model="auditRes">
                                <el-option label="通过" value="通过"></el-option>
                                <el-option label="驳回" value="驳回"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="意见">
                            <el-input type="textarea" v-model="auditForm.fdyCmt" />
                        </el-form-item>
                        <el-form-item label="签名">
                            <el-upload style="display: inline;" :before-upload="boolImg"
                                accept="image/jpg,image/jpeg,image/png,image/bmp" :limit="1" class="avatar-uploader"
                                :action="upload.url" :headers="upload.headers" :show-file-list="false"
                                :file-list="upload.fileList" :on-success="handleAvatarSuccess">
                                <img v-if="auditForm.fdySign" :src="baseurl + auditForm.fdySign" width="200px"
                                    height="50px" class="avatar">
                                <span v-else> 点击上传</span>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label=" ">
                            <el-button type="primary" @click="doAudit" plain>审核</el-button>
                        </el-form-item>
                    </el-form>
                    <hr />
                    <el-timeline>
                        <el-timeline-item v-if="lookForm.fdyCmt && lookForm.fdyDate" :timestamp="lookForm.fdyDate"
                            color="green" placement="top">
                            <el-card>
                                <div>
                                    <strong>辅导员审核</strong>
                                    <div>{{ lookForm.fdyCmt }}</div>
                                    <img v-if="lookForm.fdySign" :src="baseurl + lookForm.fdySign" alt="辅导员签名"
                                        style="max-width:100px;margin-top:8px;" />
                                </div>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item v-if="lookForm.xwCmt && lookForm.xwDate" :timestamp="lookForm.xwDate"
                            color="green" placement="top">
                            <el-card>
                                <div>
                                    <strong>院系审核</strong>
                                    <div>{{ lookForm.xwCmt }}</div>
                                    <img v-if="lookForm.xwSign" :src="baseurl + lookForm.xwSign" alt="院系签名"
                                        style="max-width:100px;margin-top:8px;" />
                                </div>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item v-if="lookForm.xgCmt && lookForm.xgDate" :timestamp="lookForm.xgDate"
                            color="green" placement="top">
                            <el-card>
                                <div>
                                    <strong>学工审核</strong>
                                    <div>{{ lookForm.xgCmt }}</div>
                                    <img v-if="lookForm.xgSign" :src="baseurl + lookForm.xgSign" alt="学工签名"
                                        style="max-width:100px;margin-top:8px;" />
                                </div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-col>
            </el-row>

        </el-dialog>


        <el-dialog title="批量审核" :visible.sync="manyV" :destroy-on-close="true">
            <el-form label-width="120px" size="mini" class="lookForm">
                <el-form-item label="是否通过">
                    <el-select @change="changeManyRes" v-model="manyRes">
                        <el-option label="通过" value="通过"></el-option>
                        <el-option label="驳回" value="驳回"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="意见">
                    <el-input type="textarea" v-model="manyCmt" />
                </el-form-item>
                <el-form-item label="签名">
                    <el-upload style="display: inline;" :before-upload="boolImg"
                        accept="image/jpg,image/jpeg,image/png,image/bmp" :limit="1" class="avatar-uploader"
                        :action="upload.url" :headers="upload.headers" :show-file-list="false"
                        :file-list="upload.fileList" :on-success="handleAvatarSuccess1">
                        <img v-if="manySign" :src="baseurl + manySign" width="200px" height="50px" class="avatar">
                        <span v-else> 点击上传</span>
                    </el-upload>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="doMany" plain>审核</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

        <el-dialog @close="getList" title="修改" :visible.sync="editV" width="900px">
            <el-form label-width="200px" size="mini" class="lookForm">
                <el-form-item label="学号">
                    <el-input v-model="editForm.stuNo" readonly />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="editForm.stuName" readonly />
                </el-form-item>
                <el-form-item label="入学时间">
                    <el-input v-model="editForm.inTime" />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="editForm.stuPhone" />
                </el-form-item>
                <el-form-item label="银行卡号">
                    <el-input v-model="editForm.bankCard" />
                </el-form-item>
                <el-form-item label="开户行">
                    <el-input v-model="editForm.bankAddr" />
                </el-form-item>
                <el-form-item label="就读中职学校">
                    <el-input v-model="editForm.zzxx" />
                </el-form-item>
                <el-form-item label="家庭人口数">
                    <el-input v-model="editForm.familyNum" />
                </el-form-item>
                <el-form-item label="家庭月收入">
                    <el-input v-model="editForm.monthMoney" />
                </el-form-item>
                <el-form-item label="人均月收入">
                    <el-input v-model="editForm.perMoney" />
                </el-form-item>
                <el-form-item label="收入来源">
                    <el-input v-model="editForm.moneySrc" />
                </el-form-item>

                <el-form-item label="申请理由">
                    <p style="line-height:18pt; margin:0pt; orphans:0; text-align:justify; widows:0">
                        <span style="font-family:仿宋; font-size:12pt">本人基于如下第</span><span
                            style="font-family:仿宋; font-size:12pt;">
                            <input style="width: 40px;" v-model="editForm.applyReasonNum" type="text"
                                class="underline-input" placeholder="请输入">
                        </span><span style="font-family:仿宋; font-size:12pt">种原因,符合学费补助申请条件,特提出申请,请审核.</span>
                    </p>
                    <p style="line-height:18pt; margin:0pt; orphans:0; text-align:justify; widows:0">
                        <span style="margin-left: 23px">1.监测对象家庭学生(脱贫不稳定家庭学生、边缘易致贫家庭学生、突发严重困难家庭学生):</span>
                        <el-radio-group @change="changeApplyReason" v-model="editForm.applyReason">
                            <el-radio :label="'未消除风险;'">未消除风险;
                            </el-radio>
                            <el-radio :label="'已消除风险;'">已消除风险;
                            </el-radio>
                            <br>
                            <el-radio :label="'2.城乡低保家庭学生;'">2.城乡低保家庭学生;</el-radio>
                            <br />
                            <el-radio :label="'3.特困救助供养家庭学生;'">3.特困救助供养家庭学生;</el-radio>
                            <br />
                            <el-radio :label="'4.孤儿(含事实无人抚养儿童);'">4.孤儿(含事实无人抚养儿童);</el-radio>
                            <br />
                            <el-radio :label="'5.脱贫家庭学生(原建档立卡学生);'">5.脱贫家庭学生(原建档立卡学生);</el-radio>
                            <br />
                            <el-radio :label="'6.家庭经济困难残疾学生;'">6.家庭经济困难残疾学生;</el-radio>
                            <br />
                            <el-radio :label="'7.因重大自然灾害、重大事故和重大疾病等导致家庭经济困难的学生;'">
                                7.因重大自然灾害、重大事故和重大疾病等导致家庭经济困难的学生;
                            </el-radio>
                            <br />
                            <el-radio :label="'8.其他家庭经济困难因素.'">8.其他家庭经济困难因素.</el-radio>
                        </el-radio-group>
                    </p>
                </el-form-item>
                <el-form-item label="申请理由补充说明(填写)">
                    <el-input type="textarea" v-model="editForm.applyExtraReason" />
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="doEdit" plain>提交修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>

import { boolImg, CheckImgExists, isEmpty, fullLoading } from "@/api/helpFunc";
import { getTokenKeySessionStorage as getToken } from "@/utils/auth";


import TufaApply from "@/views/comprehensive/knzzZsgApply/cpnt/TufaApply.vue";
import TufaLook from "@/views/comprehensive/knzzZsgApply/cpnt/TufaLook.vue";

import { listFdy as listView, doAudit, doMany, fdyEdit as doEdit } from "@/api/comprehensive/knzzZsgApply";

import { getOwnSign } from "@/api/workstudy/post";

export default {
    name: "tufa-fdy",
    dicts: ['knzz_tufa_apply_status'],
    components: {
        TufaApply,
        TufaLook
    },
    data() {
        return {
            loading: true,
            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,

            },

            lookForm: {},
            lookV: false,

            auditForm: {
                fdySign: "",
                fdyCmt: ""
            },
            auditRes: null,

            upload: {
                headers: { Authorization: "Bearer " + getToken() },
                url: process.env.VUE_APP_BASE_API + "/common/upload",
                fileList: []
            },
            baseurl: process.env.VUE_APP_BASE_API + "/",
            boolImg,

            manyV: false,
            ids: [],
            manyStatus: null,
            manyCmt: "",
            manyRes: null,
            manySign: "",

            editForm: {},
            editV: false,

            lookBiyeV: false,
            lookBiyeUrl: ''
        }
    },
    created() {
        this.getList();
        this.getOwnSign();
    },
    methods: {
        lookBiye() {
            const isAbsoluteUrl = this.lookForm.diplomaCertificate.startsWith('http');
            const pdfUrl = isAbsoluteUrl
                ? this.lookForm.diplomaCertificate
                : `${this.baseurl}${this.lookForm.diplomaCertificate}`;
            this.lookBiyeUrl = pdfUrl;
            this.lookBiyeV = true;
        },

        changeApplyReason(v) {
            if (v != "1.监测对象家庭学生(脱贫不稳定家庭学生、边缘易致贫家庭学生、突发严重困难家庭学生):") {
                this.editForm.applyReason1 = "";
            }
        },
        async doEdit() {
            let sdata = { ...this.editForm };
            if (isEmpty(sdata.inTime)) {
                this.$message.info("请填写入学时间");
                return false;
            }
            if (isEmpty(sdata.stuPhone)) {
                this.$message.info("请填写联系电话");
                return false;
            }
            if (isEmpty(sdata.bankCard)) {
                this.$message.info("请填写银行卡号");
                return false;
            }
            if (isEmpty(sdata.bankAddr)) {
                this.$message.info("请填写开户行");
                return false;
            }
            if (isEmpty(sdata.zzxx)) {
                this.$message.info("请填写就读中职学校");
                return false;
            }
            if (isEmpty(sdata.familyNum)) {
                this.$message.info("请填写家庭人口数");
                return false;
            }
            if (isEmpty(sdata.monthMoney)) {
                this.$message.info("请填写家庭月收入");
                return false;
            }
            if (isEmpty(sdata.perMoney)) {
                this.$message.info("请填写人均月收入");
                return false;
            }
            if (isEmpty(sdata.moneySrc)) {
                this.$message.info("请填写收入来源");
                return false;
            }
            if (isEmpty(sdata.applyReasonNum)) {
                this.$message.info("请填写申请理由序号");
                return false;
            }
            if (isEmpty(sdata.applyReason)) {
                this.$message.info("请填写申请理由");
                return false;
            }
            if (isEmpty(sdata.diplomaCertificate)) {
                this.$message.info("请上传中职毕业证pdf");
                return false;
            }
            if (sdata.applyReason && sdata.applyReason.indexOf("1.监测对象家庭学生") === 0 && isEmpty(sdata.applyReason1)) {
                this.$message.info("请选择监测对象家庭学生的风险情况");
                return false;
            }
            if (isEmpty(sdata.applySign)) {
                this.$message.info("请上传申请人签名");
                return false;
            }
            let loading = fullLoading(this);
            let res = await doEdit(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success("修改成功");
                this.editV = false;
                this.getList();
            }
        },
        editVClick(row) {
            console.log(row);
            this.editForm = {};
            this.editForm = { ...row };
            this.editV = true;
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleAvatarSuccess1(response, file, fileList) {
            this.manySign = response.fileName;
            this.upload.fileList = [];
            this.$forceUpdate();
        },
        changeManyRes(v) {
            switch (v) {
                case '通过':
                    this.manyStatus = 2;
                    this.manyCmt = '经班级评审小组评议,同意推荐该同学申请广西中等职业学校毕业生升入高等学校就读的家庭经济困难学生学费补助.';
                    break;
                case '驳回':
                    this.manyStatus = 10;
                    this.manyCmt = '驳回,驳回原因:';
                    break;
                default:
                    this.manyStatus = null;
                    this.manyCmt = '';
                    break;
            }
        },
        manyVClick() {
            if (this.ids.length == 0) {
                this.$message.info("请至少选择一条数据");
                return;
            } else {
                this.manyV = true;
            }
        },
        async doMany() {
            if (isEmpty(this.manyRes)) {
                this.$message.info("请选择是否通过");
                return;
            }
            if (isEmpty(this.manyCmt)) {
                this.$message.info("请输入意见");
                return;
            }
            if (isEmpty(this.manySign)) {
                this.$message.info("请上传签名图片");
                return;
            }
            let sdata = [];
            this.ids.map(x => {
                let temp = {
                    id: x,
                    applyStatus: this.manyStatus,
                    fdyCmt: this.manyCmt,
                    fdySign: this.manySign
                };
                sdata.push(temp);
            });
            let loading = fullLoading(this);
            let res = await doMany(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.manyV = false;
                this.getList();
                this.ids = [];
            }

        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
        },
        getFileName(path) {
            if (!path) return '';
            return path.split('/').pop();
        },
        downloadDiploma() {
            if (!this.lookForm.diplomaCertificate) return;
            const isAbsoluteUrl = this.lookForm.diplomaCertificate.startsWith('http');
            const pdfUrl = isAbsoluteUrl
                ? this.lookForm.diplomaCertificate
                : `${this.baseurl}${this.lookForm.diplomaCertificate}`;
            const link = document.createElement('a');
            link.href = pdfUrl;
            link.download = this.getFileName(this.lookForm.diplomaCertificate);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        async doNext() {
            this.loading = true;
            let res = await listView(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                let data = [...res.rows];
                if (data.length > 0) {
                    let row = data[0];
                    this.lookVClick(row);
                }
            }
        },
        async doAudit() {
            let sdata = { ...this.auditForm };
            if (isEmpty(sdata.applyStatus)) {
                this.$message.info("请选择是否通过");
                return;
            }
            if (isEmpty(sdata.fdyCmt)) {
                this.$message.info("请输入意见");
                return;
            }
            if (isEmpty(sdata.fdySign)) {
                this.$message.info("请上传签名图片");
                return;
            }

            let loading = fullLoading(this);
            let res = await doAudit(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success("审核成功");
                this.lookV = false;
                await this.doNext();
            }

        },
        async getOwnSign() {
            let res = await getOwnSign();
            if (res.code == 200) {
                let data = { ...res.data };
                if (isEmpty(data.signature)) {
                    this.$confirm('您的签名尚未上传', '提示', {
                        confirmButtonText: '点我前往',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push("/user/profile")
                    }).catch(() => {

                    });
                } else {
                    this.auditForm.fdySign = data.signature;
                    this.manySign = data.signature;
                }
            }
        },

        handleAvatarSuccess(response, file, fileList) {
            this.auditForm.fdySign = response.fileName;
            this.upload.fileList = [];
            this.$forceUpdate();
        },
        async getList() {
            this.loading = true;
            let res = await listView(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.tableData = [...res.rows];
                this.total = res.total;
            }

        },
        async lookVClick(row) {
            this.auditRes = null;
            this.lookForm = {};
            this.lookForm = { ...row };
            this.auditForm = {
                fdySign: "",
                fdyCmt: ""
            };
            this.auditForm.id = row.id;
            await this.getOwnSign();
            this.lookV = true;
        },

        changeAuditRes(v) {
            switch (v) {
                case '通过':
                    this.auditForm.applyStatus = 2;
                    this.auditForm.fdyCmt = '经班级评审小组评议,同意推荐该同学申请广西中等职业学校毕业生升入高等学校就读的家庭经济困难学生学费补助.';
                    break;
                case '驳回':
                    this.auditForm.applyStatus = 10;
                    this.auditForm.fdyCmt = '驳回,驳回原因:';
                    break;
                default:
                    this.auditForm.applyStatus = null;
                    this.auditForm.fdyCmt = '';
                    break;
            }
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/comprehensive/knzzZsgApply/export', {
                ...this.queryParams
            }, `apply_${new Date().getTime()}.xlsx`)
        }
    }
}

</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>
