<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="40px">
            <el-form-item label="主题" prop="surveyId">
                <el-select clearable v-model="queryParams.surveyId" placeholder="请选择去向调查">
                    <el-option v-for="item in surveyList" :key="item.surveyId" :value="item.surveyId"
                        :label="item.surveyName" />
                </el-select>
            </el-form-item>
            <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="name">
                <el-input v-model="queryParams.name" 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="success" icon="el-icon-edit" size="mini" :disabled="multiple" plain
                    @click="manyAudit">批量审核通过</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-view" size="mini" plain @click="lookVClick">查看离校填写情况</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-view" size="mini" plain @click="willVClick">查看预计离校情况</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="itineraryList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="20" align="center" />
            <!-- <el-table-column label="#" align="center" prop="returnSchoolId" /> -->
            <el-table-column label="主题" align="center" prop="surveyName" />
            <el-table-column label="学号" align="center" prop="stuNo" width="120" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="班级" align="center" prop="className" width="200" />
            <!-- <el-table-column label="联系电话" align="center" prop="phone" width="120" /> -->
            <el-table-column label="家长是否知晓" align="center" prop="famKnow" width="100" />
            <el-table-column label="是否离校" align="center">
                <template slot-scope="scope">
                    {{ scope.row.isLeave == "1" ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column label="预计离校时间" align="center" prop="willLeaveTime" width="140" />
            <el-table-column label="预计返校时间" align="center" prop="scheduledReturnTime" width="140" />
            <el-table-column label="预计留校时间" align="center" prop="willStayTime" width="140" />
            <el-table-column label="去向地" align="center" prop="willAddr" width="140" />
            <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-edit"
                        @click="auditVClick(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="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="form" class="lookForm" size="mini" label-width="120px">
                <el-form-item label="是否通过">
                    <el-select v-model="auditForm.leaveStatus" placeholder="请选择是否通过">
                        <el-option label="通过" value="2"></el-option>
                        <el-option label="打回" value="10"></el-option>
                    </el-select>
                    <el-button @click="doAudit" type="success">审核</el-button>
                </el-form-item>
                <el-form-item label="主题">
                    <el-input v-model="form.surveyName" readonly />
                </el-form-item>
                <el-form-item label="学院">
                    <el-input v-model="form.moreDeptName" readonly />
                </el-form-item>
                <el-form-item label="班级">
                    <el-input v-model="form.className" readonly />
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="form.stuNo" readonly />
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" readonly />
                </el-form-item>
                <el-form-item label="宿舍">
                    <el-input
                        :value="form.campusName + '--' + form.parkName + '--' + form.buildingName + '--' + form.roomNo"
                        readonly />
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="form.phone" readonly />
                </el-form-item>
                <el-form-item label="紧急联系人">
                    <el-input v-model="form.emergencyContact" readonly />
                </el-form-item>
                <el-form-item label="紧急联系人电话">
                    <el-input v-model="form.emergencyContactPhone" readonly />
                </el-form-item>
                <el-form-item label="家长姓名">
                    <el-input v-model="form.famName" readonly />
                </el-form-item>
                <el-form-item label="家长电话">
                    <el-input v-model="form.famPhone" readonly />
                </el-form-item>
                <el-form-item label="家长是否知晓">
                    <el-input v-model="form.famKnow" readonly />
                </el-form-item>
                <el-form-item label="是否离校">
                    <el-input :value="form.isLeave == '1' ? '是' : '否'" readonly />
                </el-form-item>

                <el-form-item label="预计离校时间" v-if="form.isLeave == '1'">
                    <el-input :value="form.willLeaveTime" readonly />
                </el-form-item>

                <el-form-item label="去向地" v-if="form.isLeave == '1' && !isEmpty(form.willAddr)">
                    <el-input :value="form.willAddr" readonly />
                </el-form-item>

                <el-form-item label="预计留校时间" v-if="form.isLeave == '0'">
                    <el-input :value="form.willStayTime" readonly />
                </el-form-item>

                <el-form-item label="留校事由" v-if="form.isLeave == '0'">
                    <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10 }" :value="form.stayReason"
                        readonly />
                </el-form-item>

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


        <el-dialog title="查看学生离校填写情况" :visible.sync="lookV" width="1000px" append-to-body :close-on-click-modal="false">
            <el-form class="lookForm" :model="lookParams" ref="lookParams" size="small" :inline="true"
                label-width="80px">
                <el-form-item label="去向调查" prop="surveyId">
                    <el-select v-model="lookParams.surveyId" placeholder="请选择去向调查">
                        <el-option v-for="item in surveyList" :key="item.surveyId" :value="item.surveyId"
                            :label="item.surveyName" />
                    </el-select>
                </el-form-item>
                <el-form-item label="学号" prop="stuNo">
                    <el-input v-model="lookParams.stuNo" placeholder="请输入学号" clearable />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="lookParams.name" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item label="班级" prop="className">
                    <el-input v-model="queryParams.className" placeholder="请输入班级" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="lookQuery">搜索</el-button>
                    <el-button type="success" icon="el-icon-position" size="mini"
                        @click="sendMsg">向未填写学生推送企业微信消息</el-button>
                    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="lookList">
                <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="status">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.srs_stu_status" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column label="是否填写" align="center" prop="editStatus" />
            </el-table>
            <pagination v-show="lookTotal > 0" :total="lookTotal" :page.sync="lookParams.pageNum"
                :limit.sync="lookParams.pageSize" @pagination="lookQuery" />
        </el-dialog>

        <el-dialog title="查看学生预计离校情况" :visible.sync="willV" width="1000px" append-to-body :close-on-click-modal="false">
            <el-form size="small" :inline="true" label-width="40px">
                <el-form-item label="主题" prop="willId">
                    <el-select clearable v-model="willId" placeholder="请选择去向调查">
                        <el-option v-for="item in surveyList" :key="item.surveyId" :value="item.surveyId"
                            :label="item.surveyName" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="willQuery">查看</el-button>
                </el-form-item>
            </el-form>
            数据更新时间:{{ new Date().toLocaleString() }}<el-button @click="exportWillLeave">导出</el-button>
            <el-table id="willLeaveTable" v-if="willV" :border="true" :data="willList">
                <el-table-column label="班级" align="center" prop="class_name" width="180" />
                <el-table-column label="学生数" align="center" prop="stu_num" />
                <el-table-column label="提交数" align="center" prop="submit_num" />
                <el-table-column label="到家人数" align="center" prop="home_num" />
                <el-table-column label="每日预计离校人数" align="center">
                    <el-table-column v-for="(v, i) in willFields" :key="i" :label="v.label" align="center"
                        :prop="v.value" width="180">
                        <template slot="header">
                            <div @click="lookWillLeaveVClick(v)" style="cursor: pointer;">
                                <span style="text-decoration: underline;">{{ v.label }}</span>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            {{ scope.row[v.value] }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="留校学生" align="center" prop="stay_num" />
            </el-table>
            <table id="tempTable2">

            </table>
        </el-dialog>

        <el-dialog title="查看学生预计离校情况" :visible.sync="lookWillLeaveV" width="1000px" append-to-body
            :close-on-click-modal="false">
            <FdyAll v-if="lookWillLeaveV" />
        </el-dialog>

    </div>
</template>

<script>
import { isEmpty, fullLoading } from "@/api/helpFunc";
import { listFdy as listView, leaveAudit, manyLeaveAudit, listFdyStuLeave, sendFdyStuLeaveMsg, countFdyClassWillLeave } from "@/api/survey/itinerary";
import { listAllSurvey } from "@/api/survey/survey";
import XLSX from 'xlsx';

import FdyAll from "./FdyAll.vue";

export default {
    name: "Itinerary",
    components: {
        FdyAll
    },
    dicts: ['srs_stu_status'],
    data() {
        return {
            isEmpty,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 学生假期返校表格数据
            itineraryList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId: null,
                stuNo: null,
                classId: null,
                name: null,
                phone: null,
                emergencyContact: null,
                emergencyContactPhone: null,
                schoolDistrict: null,
                apartment: null,
                room: null,
                scheduledReturnTime: null,
                reachSchoolStatus: null,
                parentName: null,
                parentPhone: null,
                know: null,
                absentSchoolType: null,
                absentSchoolRemark: null,
                attendSchoolGps: null,
                attendSchoolTime: null,
                status: null,
                surveyId: null,
                surveyName: null,
                className: null,
            },
            dept_list: [],
            deptForm: {

            },
            classVlue1: [],//班级搜索选择
            ClassNameList: [],//班级名称

            // 表单参数
            form: {},

            auditForm: {

            },

            lookV: false,
            lookParams: {
                pageNum: 1,
                pageSize: 10,
            },
            lookTotal: 0,
            lookList: [],
            surveyList: [],

            willV: false,
            willList: [],
            willId: null,
            willFields: [],

            lookWillLeaveV: false,
        };
    },
    created() {
        this.getList();
        this.listAllSurvey();
    },
    beforeDestroy() {
        this.$store.sur = {};
    },
    methods: {
        /** 导出按钮操作 */
        handleExport() {
            this.download('survey/itinerary/LeavExport', {
                ...this.lookParams
            }, `itinerary_${new Date().getTime()}.xlsx`)
        },
        lookWillLeaveVClick(v) {
            this.$store.sur = {};
            this.$store.sur.willLeaveTime = v.label.replace("预计离校人数", "");
            this.lookWillLeaveV = true;

        },

        exportWillLeave() {
            if (isEmpty(this.willId)) {
                this.$message.info("请选择您要导出的去向调查");
                return;
            }

            if (document.getElementById('willLeaveTable') == null) {
                this.$message.info("请等待数据加载完毕");
                return;
            }

            let title = this.surveyList.find(item => item.surveyId == this.willId).surveyName;

            let thead = document.getElementById('willLeaveTable').getElementsByTagName('thead')[0];
            let tbody = document.getElementById('willLeaveTable').getElementsByTagName('tbody')[0];
            let tempTable = document.getElementById('tempTable2');
            if (thead) {
                tempTable.appendChild(thead.cloneNode(true))
            }
            if (tbody) {
                tempTable.appendChild(tbody.cloneNode(true))
            }
            const wb = XLSX.utils.table_to_book(tempTable, { sheet: 'Sheet1' })
            XLSX.writeFile(wb, title + "学生预计离校情况.xlsx");
            tempTable.innerHTML = '';
        },
        willQuery() {
            if (isEmpty(this.willId)) {
                this.$message.info("请选择您要查看的去向调查");
                return;
            }
            this.countFdyClassWillLeave();
        },
        willVClick() {
            this.willId = null;
            this.willV = true;
        },
        async countFdyClassWillLeave() {
            this.willList = [];

            let tempFields = [];
            let loading = fullLoading(this);
            let res = await countFdyClassWillLeave(this.willId);
            loading.close();
            if (res.code == 200) {
                let data = [...res.data];
                for (let key in data[0]) {
                    if (key.includes('预计离校')) {
                        tempFields.push({
                            label: key,
                            value: key
                        });
                    }
                }
                tempFields.sort((a, b) => {
                    // 提取日期部分并转为Date对象进行比较
                    const dateA = new Date(a.label.slice(0, 10));
                    const dateB = new Date(b.label.slice(0, 10));
                    return dateA - dateB;
                });
                this.willFields = [...tempFields];
                this.willList = [...data];
            }
        },

        async sendMsg() {
            let sdata = { ...this.lookParams };
            if (isEmpty(sdata.surveyId)) {
                this.$message.info("请选择去向调查");
                return;
            }
            let loading = fullLoading(this);
            let res = await sendFdyStuLeaveMsg(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
            }
        },
        async lookQuery() {
            if (isEmpty(this.lookParams.surveyId)) {
                this.$message.info("请选择去向调查");
                return;
            }
            let loading = fullLoading(this);
            let res = await listFdyStuLeave(this.lookParams);
            loading.close();
            if (res.code == 200) {
                this.lookList = [...res.rows];
                this.lookTotal = res.total;
            }
        },
        async listAllSurvey() {
            let res = await listAllSurvey();
            if (res.code == 200) {
                this.surveyList = [...res.data];
            }
        },
        lookVClick() {
            this.lookV = true;
        },
        manyAudit() {
            let sdata = [...this.ids];
            if (isEmpty(sdata)) {
                this.$message.info("请选择要审核的记录");
                return;
            }
            this.$confirm('是否批量通过?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await manyLeaveAudit(sdata);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.getList();
                }
            });
        },
        async doAudit() {
            let sdata = { ...this.auditForm };
            console.log(sdata);
            if (isEmpty(sdata.leaveStatus)) {
                this.$message.info("请选择是否通过");
                return;
            }

            let loading = fullLoading(this);
            let res = await leaveAudit(sdata);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.open = false;
                this.getList();
            }
        },

        getList() {
            this.loading = true;
            listView(this.queryParams).then(response => {
                this.itineraryList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                returnSchoolId: null,
                deptId: null,
                stuNo: null,
                classId: null,
                name: null,
                phone: null,
                emergencyContact: null,
                emergencyContactPhone: null,
                schoolDistrict: null,
                apartment: null,
                room: null,
                scheduledReturnTime: null,
                reachSchoolStatus: null,
                parentName: null,
                parentPhone: null,
                know: null,
                absentSchoolType: null,
                absentSchoolRemark: null,
                attendSchoolGps: null,
                attendSchoolTime: null,
                status: null,
                surveyId: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.classVlue1 = [],
                this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.returnSchoolId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        auditVClick(row) {
            this.auditForm = {};
            this.auditForm.returnSchoolId = row.returnSchoolId;
            this.form = {};
            this.form = { ...row };
            this.open = true;
        },
    }
};
</script>
<style lang="scss" scoped>
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>
