<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="deptName">
                <el-input v-model="queryParams.deptName" 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 label="审核状态" prop="applyStatus">
                <el-select v-model="queryParams.applyStatus" placeholder="请选择审核状态" clearable>
                    <el-option v-for="dict in dict.type.knzz_tufa_apply_status" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </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-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini"
                    @click="handleExport">导出execl</el-button>
            </el-col>
        </el-form>
        <el-table v-loading="loading" :data="tableData">
            <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>
                </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 id="printDiv" 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-form-item>
                    </el-form>
                    <el-button v-print="printContent">打印</el-button>
                    <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>



    </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 { listXwAll as listView, doAudit } from "@/api/comprehensive/knzzZsgApply";


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

            },

            lookForm: {},
            lookV: false,

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

            printContent: {
                id: 'printDiv',
                extraCss: "",
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
                previewBeforeOpenCallback() {
                    console.log('正在加载预览窗口')
                },
                previewOpenCallback() {
                    console.log('已经加载完预览窗口')
                },
                beforeOpenCallback(vue) {
                    vue.printLoading = true
                    console.log('打开之前')
                },
                openCallback(vue) {
                    vue.printLoading = false
                    console.log('执行了打印')
                },
                closeCallback() {
                    console.log('关闭了打印工具')
                },
                clickMounted(vue) {
                    console.log('点击了打印按钮')
                }
            },

        }
    },
    created() {
        this.getList();
    },
    methods: {
        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);
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        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.lookForm = {};
            this.lookForm = { ...row };

            this.lookV = true;
        },
        /** 导出按钮操作 */
        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>
