<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="moreDeptName">
                <el-input v-model="queryParams.moreDeptName" 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="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="surveyName">
                <el-input v-model="queryParams.surveyName" 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-table v-loading="loading" :data="itineraryList">
            <el-table-column label="#" align="center" prop="returnSchoolId" />
            <el-table-column label="主题" align="center" prop="surveyName" width="120" />
            <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="300" />
            <el-table-column label="联系电话" align="center" prop="phone" width="140" />
            <el-table-column label="是否离校" align="center">
                <template slot-scope="scope">
                    {{ scope.row.isLeave == "1" ? "是" : "否" }}
                    <div v-if="scope.row.isLeave == 1">{{ scope.row.isLeave == "1" && scope.row.isHome == "是" ? "已到家" :
                        "未到家" }}</div>
                </template>
            </el-table-column>
            <el-table-column label="是否到校" prop="reachSchoolStatus" align="center" />
            <el-table-column label="离校审核状态" align="center" prop="configType">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sur_status" :value="scope.row.leaveStatus" />
                </template>
            </el-table-column>
            <el-table-column label="到校审核状态" align="center" prop="configType">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.sur_status" :value="scope.row.status" />
                </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="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="920px" append-to-body>
            <el-form ref="form" class="lookForm" size="mini" label-width="160px">
                <el-form-item label="主题">
                    <el-input v-model="form.surveyName" 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.moreDeptName" 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'">
                    <el-input :value="form.isHome == '1' ? '是' : '否'" readonly />
                </el-form-item>

                <el-form-item :label="form.isHome == '1' ? '到家定位经纬度' : '到目的地定位经纬度'"
                    v-if="form.isLeave == '1' && !isEmpty(form.homeGps)">
                    <el-input :value="form.homeGps" readonly />
                    <span style="color: red;font-size: 12px;">(*定位可能有误差)</span>
                </el-form-item>

                <el-form-item :label="form.isHome == '1' ? '到家定位详细地址' : '到目的地定位详细地址'"
                    v-if="form.isLeave == '1' && !isEmpty(form.homeGpsAddr)">
                    <el-input :value="form.homeGpsAddr" readonly />
                    <span style="color: red;font-size: 12px;">(*定位可能有误差)</span>
                </el-form-item>

                <el-form-item label="定位时间" v-if="!isEmpty(form.homeGpsTime)">
                    <el-input :value="form.homeGpsTime" 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>
                <hr />
                <el-form-item label="计划返校时间">
                    <el-input v-model="form.scheduledReturnTime" readonly />
                </el-form-item>
                <el-form-item label="家长姓名">
                    <el-input v-model="form.parentName" readonly />
                </el-form-item>
                <el-form-item label="家长电话">
                    <el-input v-model="form.parentPhone" readonly />
                </el-form-item>
                <el-form-item label="家长是否知晓">
                    <el-input v-model="form.know" readonly />
                </el-form-item>
                <el-form-item v-if="!isEmpty(form.reachSchoolStatus)" label="是否到校">
                    <el-input v-model="form.reachSchoolStatus" readonly />
                </el-form-item>
                <el-form-item v-if="form.reachSchoolStatus == '是'" label="到校时间">
                    <el-input v-model="form.attendSchoolTime" readonly />
                </el-form-item>
                <el-form-item v-if="form.reachSchoolStatus == '否'" label="未返校原因分类">
                    <el-input v-model="form.absentSchoolType" readonly />
                </el-form-item>
                <el-form-item v-if="form.reachSchoolStatus == '否'" label="未返校详细原因">
                    <el-input readonly type="textarea" :autosize="{ minRows: 6, maxRows: 10 }"
                        v-model="form.absentSchoolRemark" />
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { isEmpty, fullLoading } from "@/api/helpFunc";
import { listXg as listView, updateStuHomeGpsAddr } from "@/api/survey/itinerary";

export default {
    name: "Itinerary",
    dicts: ['sur_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: {

            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        updateStuHomeGpsAddr() {
            if (!isEmpty(this.form.homeGps) && isEmpty(this.form.homeGpsAddr)) {
                let loading = fullLoading(this);
                this.fetchLocation(this.form.homeGps);
                loading.close();
            }
        },
        fetchLocation(latlng) {
            this.cleanup();
            window.baiduCallback = this.baiduCallback;
            const script = document.createElement('script');
            script.src =
                `https://api.map.baidu.com/reverse_geocoding/v3/?ak=HUWNwlsBGdZk85kkDkfl3MCYVEqaTey1&output=json&coordtype=gcj02ll&location=${latlng}&callback=baiduCallback`;
            document.body.appendChild(script);
            setTimeout(() => {
                this.cleanup();
            }, 5000);
        },
        cleanup() {
            const scripts = document.querySelectorAll('script[src*="reverse_geocoding"]');
            scripts.forEach(script => script.remove());
            window.baiduCallback = null;
        },
        async baiduCallback(data) {
            if (data.status == 0) {
                this.form.homeGpsAddr = data.result.formatted_address;
                await updateStuHomeGpsAddr(this.form);
                this.getList();
            } else {
                this.form.homeGpsAddr = "定位失败";
            }
        },

        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();
        },
        auditVClick(row) {
            this.form = {};
            this.form = { ...row };
            this.updateStuHomeGpsAddr();
            this.open = true;
        },
    }
};
</script>
<style lang="scss" scoped>
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>