<template>
    <Head>
        <Title>寄托天下 - 面经发布</Title>
        <Meta name="keyword" content="留学资讯，留学交流论坛，留学面经，面试经验，寄托天下" />
    </Head>
    <div class="content-box">
        <div class="flexacenter save-box save-left" @click="submit(0)">
            <img class="save-icon" src="@/assets/img/arrow-gray.png" />
            保存并退出
        </div>
        <div class="flexacenter save-box save-right" @click="abandonSaving">
            放弃保存
            <img class="save-icon" src="@/assets/img/cross-icon.png" />
        </div>
        <div class="contentcontent flex1">
            <div class="header flexacenter">发布面经</div>
            <div class="box flex1 flexflex">
                <div class="box-left">
                    <div class="area-box">
                        <div class="item">
                            <div class="titletitle flexacenter">
                                申请信息
                                <div class="asterisk">*</div>
                            </div>
                            <div class="info-box">
                                <div class="info-item flexacenter">
                                    <div class="info-name">院校</div>
                                    <div class="flex1">
                                        <el-autocomplete v-model="info.school" :fetch-suggestions="querySchoolSearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSchoolSelect" :trigger-on-focus="false"></el-autocomplete>
                                    </div>
                                </div>
                                <!-- <div class="info-item flexacenter">
                                    <div class="info-name">专业</div>
                                    <div class="flex1">
                                        <el-autocomplete v-model="info.profession" :fetch-suggestions="queryMajorSearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleMajorSelect" :trigger-on-focus="false"></el-autocomplete>
                                    </div>
                                </div> -->
                                <div class="info-item flexacenter">
                                    <div class="info-name">项目/专业</div>
                                    <div class="flex1">
                                        <el-autocomplete v-model="info.project" :fetch-suggestions="queryProjectSearch" clearable class="inline-input w-50" placeholder="输入关键词，选择项目" @select="handleProjectSelect" @input="handleProjectInput" :trigger-on-focus="false"></el-autocomplete>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="titletitle flexacenter">
                                面试时间
                                <div class="asterisk">*</div>
                            </div>

                            <div class="time-box item-input-box flexacenter">
                                <el-config-provider :locale="zhCn">
                                    <el-date-picker v-model="info.interviewtime" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" value-format="YYYY-MM-DD" :disabled-date="setDisabled" />
                                </el-config-provider>
                                <img class="calendar-icon" src="@/assets/img/calendar-icon.png" />
                            </div>
                        </div>

                        <div class="item">
                            <div class="titletitle flexacenter">
                                面经帖标题
                                <div class="asterisk">*</div>
                            </div>

                            <div class="title-box item-input-box flexacenter"><el-input v-model="info.subject" placeholder="给你的面经帖起一个吸引的标题吧" show-word-limit maxlength="80"></el-input></div>
                        </div>
                    </div>
                    <div class="visible-box flexacenter" @click="cutVisible()">
                        <img class="visible-icon" v-if="info.isvisiblereply == 0" src="@/assets/img/frame-no.svg" />
                        <img class="visible-icon" v-else src="@/assets/img/frame-pitch.svg" />
                        回复/点赞可见
                    </div>
                </div>
                <div class="box-right">
                    <div class="area-box">
                        <div class="item">
                            <div class="titletitle flexacenter">
                                面试构成及过程
                                <div class="asterisk">*</div>
                            </div>
                            <div class="course-box">
                                <el-input v-model="info.message" type="textarea" autosize show-word-limit maxlength="2000" placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="hint-box flexcenter">注：请确保以上内容已正确填写，发布后将不能修改</div>
        </div>
    </div>

    <div class="floor-box">
        <div class="box flexacenter">
            <div class="anonymous-box flexacenter" @click="cutAnonymous()">
                <img class="anonymous-icon" v-if="info.anonymous == 0" src="@/assets/img/frame-no.svg" />
                <img class="anonymous-icon" v-else src="@/assets/img/frame-pitch.svg" />
                匿名发表
                <div class="text">（发布后可修改）</div>
            </div>
            <div class="issue-btn flexcenter" @click="submit()">发布{{ loading ? "中..." : "" }}</div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
const router = useRouter();
// useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] });
useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=header&menukey=mj&noshow=noshow" }, { src: "https://app.gter.net/bottom?tpl=footer,popupnotification", body: true }] });

let user = inject("userInfo");
let openAttest = inject("openAttest");
const realname = inject("realname");

const setDisabled = (time) => {
    return time.getTime() > Date.now(); // 可选历史天、可选当前天、不可选未来天
};

onMounted(() => {
    getInit();
});

onBeforeMount(() => {
    clearBottom();
    // clearTop()
});

// let isSchoolSpin = ref(false) // 院校左边箭头旋转
// let isMajorSpin = ref(false) // 专业左边箭头旋转

// const SchoolSearchBlur = () => (isSchoolSpin.value = false)
// const MajorSearchBlur = () => (isMajorSpin.value = false)

// 清除底部的次数
let clearBottomCount = 0;

// 清除 底部
const clearBottom = () => {
    const indexFooter = document.querySelector("section.index-footer");
    if (!indexFooter) {
        clearBottomCount++;
        setTimeout(() => clearBottom(), 50);
        return;
    }
    if (clearBottomCount == 15) return;
    indexFooter.style.display = "none";
};

// 清除顶部的次数
let clearTopCount = 0;

// 清除 底部
const clearTop = () => {
    const indexHeader = document.querySelector("header.page-header");
    if (!indexHeader) {
        clearTopCount++;
        setTimeout(() => clearTop(), 50);
        return;
    }
    if (clearTopCount == 5) return;

    indexHeader.style.display = "none";
};

let typetype = ref("");
let token = "";
const getInit = () => {
    publishInitHttp().then((res) => {
        if (res.code != 200) {
            ElMessage.error(res.message);
            return;
        }
        const data = res.data;
        token = data["token"];
        let interviewtime = data["info"]["interviewtime"] || 0;
        if (interviewtime) data["info"]["interviewtime"] = handleDate(interviewtime);

        info.value = { ...data["info"] };
    });
};

// 处理初始化 面试时间的 时间戳格式
const handleDate = (timestamp) => {
    // 使用Date对象将时间戳转换为日期对象
    var date = new Date(timestamp * 1000);

    // 获取年份、月份和日期
    var year = date.getFullYear();
    var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1并补0
    var day = ("0" + date.getDate()).slice(-2); // 获取日期并补0

    // 拼接为yyyy-mm-dd格式的日期字符串
    var formattedDate = year + "-" + month + "-" + day;

    return formattedDate;
};

let info = ref({
    school: "", // 学校
    profession: "", // 专业
    project: "", // 项目时间
    interviewtime: "", // 面试时间
    subject: "", //标题
    isvisiblereply: 0, // 回复点赞可见
    message: "", // 过程
    anonymous: 0, // 匿名状态
});

// 关键字搜索学校
const querySchoolSearch = (queryString, cb) => {
    publishSchoolSearchHttp({ keyword: queryString }).then((res) => {
        if (res.code != 200) return;
        let data = res.data || [];

        let isRepetition = false;

        data.forEach((element) => {
            element["value"] = element["checkname"];
            if (element["checkname"] == queryString) isRepetition = true;
        });
        if (!isRepetition) data.push({ value: queryString });
        // isSchoolSpin.value = true
        cb(data);
    });
};

// 选择院校
const handleSchoolSelect = (item) => {
    info.value["schoolid"] = item["id"] || 0;
    // isSchoolSpin.value = false
};

// 关键字搜索专业
const queryMajorSearch = (queryString, cb) => {
    publishProfessionSearchHttp({ keyword: queryString }).then((res) => {
        if (res.code != 200) return;
        let data = res.data || [];

        let isRepetition = false;

        data.forEach((element) => {
            element["value"] = element["name"];
            if (element["name"] == queryString) isRepetition = true;
        });
        if (!isRepetition) data.push({ value: queryString });

        // isMajorSpin.value = true
        cb(data);
    });
};

// 选择专业
const handleMajorSelect = (item) => {
    info.value["profession_id"] = item["id"] || 0;
    // isMajorSpin.value = false
};

// 关键字搜索项目
const queryProjectSearch = (queryString, cb) => {
    console.log("queryString", queryString);

    publishProjectSearchHttp({ keyword: queryString, sid: info.value["schoolid"] }).then((res) => {
        if (res.code != 200) return;
        let data = res.data.data || [];

        let isRepetition = false;

        data.forEach((element) => {
            element["value"] = element["name"];
            if (element["name"] == queryString) isRepetition = true;
        });
        if (!isRepetition) data.push({ value: queryString });

        // isMajorSpin.value = true
        cb(data);
    });
};

// 选择专业
const handleProjectSelect = (item) => {
    info.value["program_id"] = item["id"] || 0;
};

const handleProjectInput = (value) => {
    info.value["program_id"] = 0;
};

// 切换匿名状态
const cutAnonymous = () => {
    info.value["anonymous"] = info.value["anonymous"] == 0 ? 1 : 0;
};

// 切换回复可见状态
const cutVisible = () => {
    info.value["isvisiblereply"] = info.value["isvisiblereply"] == 0 ? 1 : 0;
};

let loading = ref(false);
// 提交发布
const submit = (status = 1) => {
    console.log("realname", realname.value, user.value);
    
    if (realname.value == 0 && user.value?.uin > 0) {
        openAttest();
        return;
    }

    if (loading.value) {
        ElMessage.error("提交中，稍等");
        return;
    }

    loading.value = true;
    publishSubmitHttp({ info: info.value, token, status })
        .then((res) => {
            if (res.code != 200) {
                ElMessage.error(res.message);
                return;
            }

            const data = res.data;
            ElMessage.success(res.message);

            // router.push(`/details/${data["uniqid"]}`)
            if (status == 0) goToURL(`/index.html`, false);
            else goToURL(`/details/${data["uniqid"]}`, false);
        })
        .finally(() => (loading.value = false));
};

// 放弃保存 跳跃上一页或者首页
const abandonSaving = () => {
    if (router.currentRoute.value.meta.previousPage) router.go(-1);
    else goToURL("./index.html", false); // 跳转到首页
    // else router.push("./index.html") // 跳转到首页
};
</script>

<style scoped lang="less">
.content-box {
    // padding: 0 10px;
    padding: 0 122px;
    display: flex;
    justify-content: center;
}

@media (max-width: 920px) {
    .content-box {
        display: block;
        padding: 0 10px;
        // padding: 0 122px;
    }
}
.contentcontent {
    // width: 1200px;
    max-width: 1200px;
    min-width: 900px;
    // height: 882px;
    // min-height: 718px;
    min-height: calc(100vh - 120px);
    background: #fff;
    margin: 30px auto 90px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    // margin: 0 10px;

    .header {
        font-weight: 650;
        font-size: 20px;
        color: #000000;
        border-bottom: 1px solid #ebebeb;
        height: 88px;
        padding-left: 30px;
    }

    .box {
        .titletitle {
            color: #666666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .box-left {
            width: 44.333%;
            border-right: 16px solid #f6f6f6;
            .area-box {
                padding: 30px;
                padding-right: 50px;
                border-bottom: 1px solid #ebebeb;

                .item {
                    &:not(:last-of-type) {
                        margin-bottom: 30px;
                    }
                }

                .info-box {
                    // width: 452px;
                    // height: 158px;
                    background-color: rgba(255, 255, 255, 0);
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    overflow: hidden;
                    .info-item {
                        height: 50px;

                        &:not(:last-of-type) {
                            border-bottom: 1px solid #d7d7d7;
                        }

                        .info-name {
                            font-size: 14px;
                            color: #666666;
                            padding: 0 14px;
                        }

                        .input {
                            height: 100%;
                            // background: #000000;
                            // padding: 1px 11px;
                            border: none;
                            outline: none;
                            box-shadow: none;

                            /deep/ .el-input__wrapper {
                                box-shadow: none;
                            }
                        }

                        /deep/ .el-autocomplete {
                            width: 99%;

                            .el-input__wrapper {
                                box-shadow: none;
                            }
                        }
                    }
                }

                .item-input-box {
                    // width: 452px;
                    height: 46px;
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;
                    cursor: pointer;
                    /deep/ .el-input {
                        height: 100%;
                        .el-input__wrapper {
                            height: 100%;
                            box-shadow: none;
                        }
                    }
                }

                .time-box {
                    .calendar-icon {
                        width: 15px;
                        height: 16px;
                        margin: 0 12px;
                    }

                    /deep/ .el-input {
                        .el-input__prefix {
                            display: none;
                        }
                    }
                }
            }

            .visible-box {
                margin: 30px;
                font-size: 14px;
                color: #555555;
                cursor: pointer;
                user-select: none;
                .visible-icon {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }
        }

        .box-right {
            width: 54.333%;
            .area-box {
                padding: 30px;
                padding-left: 50px;

                .course-box {
                    // width: 572px;
                    min-height: 480px;
                    background-color: rgba(255, 255, 255, 0);
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;

                    /deep/ .el-textarea__inner {
                        min-height: 480px !important;
                        box-shadow: none;
                        padding: 13px;
                    }
                }
            }
        }
    }

    .hint-box {
        height: 58px;
        background-color: rgba(246, 246, 246, 1);
        color: #555555;
        font-size: 13px;
    }
}
.asterisk {
    color: #fa9183;
    margin-left: 5px;
}

.floor-box {
    width: 100vw;
    min-width: 1200px;
    height: 90px;
    background-color: rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    position: fixed;
    bottom: 0;
    .box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        justify-content: space-between;
        padding: 0 30px;
        .anonymous-box {
            cursor: pointer;
            color: #333333;
            font-size: 14px;
            user-select: none;

            .text {
                color: rgb(170, 170, 170);
                font-size: 13px;
            }
            .anonymous-icon {
                width: 18px;
                height: 18px;
            }
        }
        .issue-btn {
            width: 200px;
            height: 46px;
            background-color: rgba(253, 223, 109, 1);
            border-radius: 190px;
            font-size: 16px;
            color: #000000;
            cursor: pointer;
        }
    }
}

.save-box {
    font-size: 14px;
    color: #666666;
    position: absolute;
    // position: fixed;
    top: 30px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1;
    &.save-left {
        left: 0px;
        // left: calc((1200px - 100vw) / 2 + 25px);
    }
    &.save-right {
        right: 0px;
        // right: calc((1200px - 100vw) / 2 + 25px);

        .save-icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
        }
    }
    .save-icon {
        width: 22px;
        height: 22px;
        margin-right: 10px;
        transform: rotate(180deg);
    }
}

// .arrows-icon {
//     transition: all 0.3s;

//     &.spin {
//         transform: rotate(180deg);
//     }
// }
</style>
