<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="/css/common.css" />
        <link rel="stylesheet" href="/css/details.css" />
        <script src="/js/axios.min.js"></script>
        <script src="/js/vue.global.js"></script>
        <script src="/js/common.js"></script>
        <script src="/js/base.js"></script>
        <script src="/js/encrypt.js"></script>
    </head>

    <body>
        <div class="main" id="app">
            <div id="load-mask" v-if="false"></div>
            <img class="index-icon" src="/img/index-icon.png" />

            <div class="boxbox">
                <div class="tab flexacenter">
                    首页
                    <img class="img" src="/img/arrows.svg" />
                    按学科查看
                    <img class="img" src="/img/arrows.svg" />
                    {{ disciplineObj[info.disciplineid]?.label || '' }}
                    <img class="img" src="/img/arrows.svg" />
                    <div class="current">{{ info.name_zh }}</div>
                </div>
                <div class="details flexflex">
                    <img class="logo" src="/img/details-icon.png" />
                    <div class="right flex1">
                        <div class="name">{{ info.name_zh }}</div>
                        <div class="name-en">{{ info.name_en }}</div>
                        <div class="school flexacenter">
                            <div class="flexacenter">
                                <img class="icon" :src="info.schoollogo" />
                                {{ info.schoolname || '' }}
                            </div>
                            <template v-if="info.au0">
                                <div class="line">|</div>
                                {{ info.au0 }}
                            </template>
                            <template v-if="info.au1">
                                <div class="line">|</div>
                                {{ info.au1 }}
                            </template>
                        </div>

                        <div class="word flexacenter">
                            <img class="img" src="/img/quotation-mark.png" />
                            111111111111111111111111111
                        </div>

                        <div class="tag flexflex">
                            <div class="tag-item admissions" v-if="info.admissionsproject">招生官项目</div>
                            <div class="tag-item gray" :class="{'semester': info.semesterState}">{{ info?.semester?.text }}</div>
                            <div class="tag-item" v-for="item in info.tags">{{ item }}</div>
                        </div>
                    </div>

                    <div class="QRCode flexcenter">
                        <img class="triangle" src="/img/triangle-gray.svg" />
                        <div class="code flexcenter">
                            <img class="img" src="/img/img.svg" />
                        </div>

                        <div class="hint flexacenter">
                            <img class="img" src="/img/scan-icon.png" />
                            手机查看该项目
                        </div>
                    </div>
                </div>
            </div>

            <div class="body flexflex">
                <div class="content flex1 flexflex">
                    <div class="side flexflex">
                        <div class="item flexcenter" :class="{'pitch': sideKey == key}" v-for="(item,key) in side" @click="cutSide(key)">{{ item }}</div>
                    </div>
                    <div class="details-box flex1" ref="detailsRef">
                        <div class="side-item" type="basic">
                            <div class="item-header flexacenter">招生官答网友问</div>
                            <div class="answer block">
                                <div class="hint flexacenter">
                                    <img class="icon" src="/img/clock-icon.png" />
                                    本期内容整理自2024年10月23日香港城市大学计算学院项目宣讲会。
                                </div>
                                <div class="tab flexflex">
                                    <div class="tab-item pitch flexcenter">项目概述</div>
                                    <div class="tab-item flexcenter">课程设置</div>
                                    <div class="tab-item flexcenter">职业发展</div>
                                </div>

                                <div class="dialogue">
                                    <div class="dialogue-left">
                                        <div class="info flexacenter">
                                            <img class="avatar" src="/img/avatar-default.svg" />
                                            寄托网友
                                        </div>
                                        <!-- <div class="message">香港城市大学生物统计学系是一个什么样的系？</div> -->
                                        <img class="img" @click="openPreview()" src="/img/header-bj.png" />
                                    </div>
                                    <div class="dialogue-right">
                                        <div class="info flexacenter">
                                            招生官
                                            <img class="avatar" src="/img/avatar-admission.png" />
                                        </div>
                                        <!-- <div class="message">香港城市大学生物统计学系是一个什么样的系？</div> -->
                                        <img class="img" @click="openPreview()" src="/img/header-bj.png" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="side-item">
                            <div class="consult-list">
                                <div class="consult-item" v-for="(item,index) in offerList" :key="index" url="/pages/victoryDetails/victoryDetails?id={{ item.id || item.uniqid }}">
                                    <div class="school flexacenter">
                                        <img class="img" :src="item.schoolimage" />
                                        {{ item.schoolname }}
                                    </div>
                                    <div class="info-item flexflex" v-if="item.professional">
                                        <div class="info-major">专业</div>
                                        <div class="info-value flex1" v-if="item.professionalzhong">
                                            <span>{{ item.professionaltou }}</span>
                                            <span style="color: #509ce3">item.professionalzhong</span>
                                            <span>{{ item.professionalend }}</span>
                                        </div>
                                        <div class="info-value flex1" v-else>{{ item.professional }}</div>
                                    </div>
                                    <div class="info-item flexflex" v-if="item.project">
                                        <div class="info-major">项目</div>
                                        <div class="info-value flex1" v-if="item.projecttzhong">
                                            <span>{{ item.projecttou }}</span>
                                            <span style="color: #509ce3">{{ item.projecttzhong }}</span>
                                            <span>{{ item.projecttend }}</span>
                                        </div>
                                        <div class="info-value flex1" v-else>{{ item.project }}</div>
                                    </div>
                                    <div class="info-item flexacenter" style="align-items: center; font-size: 27rpx">
                                        {{ item.semester }}
                                        <div class="line-between"></div>
                                        {{ item.degree }}
                                        <div class="line-between"></div>
                                        <div class="info-item-results flexacenter results{{ item.apply_resultstatus }}">{{ item.apply_results }}</div>
                                    </div>
                                    <div class="info-xiaobox flexacenter" v-if="item.message">
                                        <div class="info-content one-line-display" v-if="item.message">{{ item.message }}</div>
                                    </div>
                                    <div class="bottom flexacenter">
                                        <div class="bottom-left flexacenter">
                                            <img class="bottom-avatar" :src="item.avatar" />
                                            {{ item.timestamp }}
                                        </div>
                                        <!-- 数值 -->
                                        <div class="numerical-box flexacenter">
                                            <div class="item-bottom-item flexcenter">
                                                <img class="item-bottom-icon" mode="widthFix" src="/img/u884.png" />
                                                {{ item.view || 0 }}
                                            </div>
                                            <div class="item-bottom-item flexcenter">
                                                <img class="item-bottom-icon" mode="widthFix" style="width: 20rpx" src="/img/expression-icon.png" />
                                                {{ item.ripostes || 0 }}
                                            </div>
                                            <div class="item-bottom-item flexcenter">
                                                <img class="item-bottom-icon" mode="widthFix" src="/img/discuss-icon.png" />
                                                {{ item.comments || 0 }}
                                            </div>
                                            <div class="item-bottom-item flexcenter">
                                                <img class="item-bottom-icon" mode="widthFix" src="/img/bi-icon.png" />
                                                {{ item.reward || 0 }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="side-item" type="basic">
                            <div class="item-header flexacenter">
                                <div>专业排名</div>
                                <div class="list-btn flexacenter">
                                    榜单
                                    <image class="icon" mode="widthFix" src="/img/arrows-circle-black.svg"> </image>
                                </div>
                            </div>
                            <div class="ranking">
                                <div class="item flexflex" v-for="item in info.rankings">
                                    <div class="rank flexacenter">
                                        <img class="logo" :src="'/img/' + rankingsObj[item.system].alias + '.png'" />
                                        <div class="number flexcenter" :class="rankingsObj[item.system].alias">
                                            {{ item.rank }}
                                            <img v-if="item.system == 'QS'" class="triangle" src="/img/triangle-qs1.svg" />
                                            <img v-if="item.system == 'Shanghai Ranking'" class="triangle" src="/img/triangle-rk1.svg" />
                                            <img v-if="item.system == 'Times Higher Education'" class="triangle" src="/img/triangle-ti1.svg" />
                                            <img v-if="item.system == 'U.S. News'" class="triangle" src="/img/triangle-us1.svg" />
                                        </div>
                                    </div>
                                    <div class="rank-box flexflex flex1">
                                        <div class="itemm flexacenter">
                                            <div class="key">年份：</div>
                                            <div class="value flex1">{{ item.year }}</div>
                                        </div>
                                        <div class="itemm flexacenter">
                                            <div class="key">学科：</div>
                                            <div class="value flex1">{{ item.subject }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item-header flexacenter">项目简介</div>
                            <text-module :text="info.intro || ' - '" class="mb40"></text-module>

                            <div class="item-header flexacenter">专业资格认证</div>
                            <text-module :text="info.accreditation || '无'" class="mb40"></text-module>
                        </div>

                        <div class="side-item" type="apply">
                            <div class="item-header flexacenter">申请日程</div>
                            <div class="application-schedule block">
                                <div class="list">
                                    <div class="index flexacenter">
                                        <div class="sum flexcenter">1</div>
                                        第一轮
                                    </div>
                                    <div class="time flexflex">
                                        <div class="item flex1">
                                            <div class="name">2024-01-05</div>
                                            <div class="value">开始申请日期</div>
                                        </div>
                                        <div class="item flex1">
                                            <div class="name">2024-01-05</div>
                                            <div class="value">截止申请日期</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list">
                                    <div class="index flexacenter">
                                        <div class="sum flexcenter">1</div>
                                        第一轮
                                    </div>
                                    <div class="time flexflex">
                                        <div class="item flex1">
                                            <div class="name">2024-01-05</div>
                                            <div class="value">开始申请日期</div>
                                        </div>
                                        <div class="item flex1">
                                            <div class="name">2024-01-05</div>
                                            <div class="value">截止申请日期</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="application-else">
                                    <div class="item flexacenter">
                                        <div class="name">面试时间：</div>
                                        <div class="value flex1">2024-01-05</div>
                                    </div>
                                    <div class="item flexacenter">
                                        <div class="name">结果通知时间：</div>
                                        <div class="value flex1">2024-01-05</div>
                                    </div>
                                </div>
                            </div>

                            <div class="item-header flexacenter">最低入学要求</div>
                            <div class="demand block">
                                <div class="text">{{ info.entrance_requirements || '-' }}</div>
                                <template v-if="info.english_proficiency">
                                    <div class="title">英语能力要求</div>
                                    <div class="hint">满足以下其中一项即可</div>
                                    <div class="list">
                                        <div class="item flexflex" v-for="item in info.english_proficiency">
                                            <img class="triangle" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
                                            <div class="name">{{ item.name_zh }}</div>
                                            <div class="value">总分 {{ item.total }} 分以上</div>
                                        </div>
                                    </div>
                                </template>
                            </div>

                            <template v-if="info.documents_required">
                                <div class="item-header flexacenter">必须文件</div>
                                <text-module :text="info.documents_required || '无'" class="mb40"></text-module>
                            </template>

                            <div class="tuition-scholarships flexflex">
                                <div class="left flex1">
                                    <div class="item-header flexacenter">费用</div>
                                    <div class="tuition block flexacenter">
                                        <div class="tuition-left flex1 flexjcenter">
                                            <div class="unit">{{ info.tuition_currency || 'HK$' }}</div>
                                            <div class="number">{{ info.tuition_fee_text || '待确认' }}</div>
                                            <div class="text">总学费</div>
                                        </div>
                                        <div class="tuition-right">
                                            <div class="item flexacenter">
                                                <div class="key">每学分学费</div>
                                                <div class="value">{{ info.tuition_fee_per_credit_text || '-' }}</div>
                                            </div>
                                            <div class="item flexacenter">
                                                <div class="key">申请费</div>
                                                <div class="value">{{ info.application_fee_text || '-' }}</div>
                                            </div>
                                            <div class="item flexacenter">
                                                <div class="key">入学保证金</div>
                                                <div class="value">{{ info.admission_deposit_text || '-' }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div class="item-header flexacenter">奖学金</div>
                                    <div class="scholarships block flexcenter">{{ info.scholarships || '-' }}</div>
                                </div>
                            </div>

                            <template v-if="info.selection_criteria">
                                <div class="item-header flexacenter">录取选择标准</div>
                                <text-module :text="info.selection_criteria || '- 暂无 -'" class="mb40"></text-module>
                            </template>

                            <template v-if="info.recent_admission">
                                <div class="item-header flexacenter">近期录取信息</div>
                                <text-module :text="info.recent_admission || '- 暂无 -'" class="mb40"></text-module>
                            </template>
                        </div>
                        <div class="side-item" type="attend">
                            <div class="item-header flexacenter">学习模式</div>
                            <div class="pattern block mb40">
                                <div class="tab flexacenter">
                                    <div class="item flex1 flexcenter" :class="{'pitch': studyMode == 'ft'}" @click="cutStudyMode('ft')">全日制</div>
                                    <div class="item flex1 flexcenter" :class="{'pitch': studyMode == 'pt'}" @click="cutStudyMode('pt')">兼读制</div>
                                </div>

                                <div class="introduce flexflex" v-if="studyMode == 'ft'">
                                    <div class="item flex1">
                                        <div class="value">{{ info.language_of_instruction_text || '-' }}</div>
                                        <div class="name">教学语言</div>
                                    </div>
                                    <div class="item flex1">
                                        <div class="value">{{ info.ft_normal_period || '-' }}</div>
                                        <div class="name">正常学习时长</div>
                                    </div>
                                    <div class="item flex1">
                                        <div class="value">{{ info.ft_maximum_period || '待确认' }}</div>
                                        <div class="name">最长学习时长</div>
                                    </div>
                                </div>

                                <div class="introduce flexflex" v-else>
                                    <div class="item flex1">
                                        <div class="value">{{ info.language_of_instruction_text || '-' }}</div>
                                        <div class="name">教学语言</div>
                                    </div>
                                    <div class="item flex1">
                                        <div class="value">{{ info.pt_normal_period || '-' }}</div>
                                        <div class="name">正常学习时长</div>
                                    </div>
                                    <div class="item flex1">
                                        <div class="value">{{ info.pt_maximum_period || '待确认' }}</div>
                                        <div class="name">最长学习时长</div>
                                    </div>
                                </div>
                            </div>

                            <template v-if="info.time_of_class">
                                <div class="item-header flexacenter">上课时间</div>
                                <text-module :text="info.time_of_class || '- 暂无 -'" class="mb40"></text-module>
                            </template>

                            <div v-if="course?.required?.length != 0 || course?.required?.length != 0" class="item-header flexacenter">课程设置</div>
                            <div class="course block" v-if="course.required?.length != 0">
                                <img class="icon" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
                                <div class="title">必修课程</div>
                                <div class="hint">（共 {{ course?.requiredCount }} 学分）</div>
                                <div class="table-head flexacenter">
                                    <div class="item number">课程编号</div>
                                    <div class="item name flex1">课程名称</div>
                                    <div class="item credit">学分</div>
                                </div>
                                <div class="table-body">
                                    <div class="list flexflex" v-for="item in course?.required">
                                        <div class="item number flexcenter">{{ item.course_code || '-' }}</div>
                                        <div class="item name flex1">
                                            <div class="text">{{ item.course_name_zh }}</div>
                                            <div class="english">{{ item.course_name_en }}</div>
                                        </div>
                                        <div class="item credit flexcenter">{{ item.credit || '-' }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="course block" v-if="course.elective?.length != 0">
                                <img class="icon" src="https://app.gter.net/image/miniApp/offer/triangle-red.svg" />
                                <div class="title">选修课程</div>
                                <div class="table-head flexacenter">
                                    <div class="item number">课程编号</div>
                                    <div class="item name flex1">课程名称</div>
                                    <div class="item credit">学分</div>
                                </div>
                                <div class="table-body">
                                    <div class="list flexflex" v-for="item in course?.elective">
                                        <div class="item number flexcenter">{{ item.course_code || '-' }}</div>
                                        <div class="item name flex1">
                                            <div class="text">{{ item.course_name_zh }}</div>
                                            <div class="english">{{ item.course_name_en }}</div>
                                        </div>
                                        <div class="item credit flexcenter">{{ item.credit || '-' }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="link block mb40" v-if="info.catalog_url">
                                <div class="title">申请页项目详情</div>
                                <div class="text">{{ info.catalog_url }}</div>
                                <div class="flexflex" style="justify-content: flex-end">
                                    <div class="btn flexcenter" @click="copy(info.catalog_url)">
                                        <img class="icon" src="https://app.gter.net/image/miniApp/offer/copy-icon.png" mode="widthFix" />
                                        复制链接
                                    </div>
                                    <a class="btn open flexcenter" target="_blank" :href="info.catalog_url">打开链接</a>
                                </div>
                            </div>

                            <!-- <div class="link block">
                                <div class="title">项目目录项目详情</div>
                                <div class="text">https://www.cityu.edu.hk/catalogue/pg/202324/programme/MSF.html</div>
                                <div class="flexflex" style="justify-content: flex-end;">
                                    <div class="btn flexcenter">
                                        <img class="icon" src="https://app.gter.net/image/miniApp/offer/copy-icon.png" mode="widthFix" />
                                        复制链接
                                    </div>
                                    <div class="btn open flexcenter">打开链接</div>
                                </div>
                            </div> -->
                        </div>
                        <div class="side-item" type="graduate">
                            <div class="item-header flexacenter">学位</div>
                            <div class="degree block mb40">
                                <div class="title flexcenter">
                                    <img class="icon" src="https://app.gter.net/image/miniApp/offer/name-bj.svg" mode="widthFix" />
                                    学位名称
                                </div>
                                <div class="name">{{ info.award_zh }}</div>
                                <div class="english">{{ info.award_en }}</div>
                            </div>

                            <template v-if="info.graduation_requirements">
                                <div class="item-header flexacenter">毕业要求</div>
                                <text-module :text="info.graduation_requirements || '- 暂无 -'" class="mb40"></text-module>
                            </template>

                            <div v-if="info.domains || info.employers || info.positions" class="item-header flexacenter">历届毕业生就业方向</div>
                            <text-module v-if="info.domains" :text="info.domains || '- 暂无 -'" title="就业领域" class="mb40"></text-module>
                            <text-module v-if="info.employers" :text="info.employers || '- 暂无 -'" title="主要雇主名单" class="mb40"></text-module>
                            <text-module v-if="info.positions" :text="info.positions || '- 暂无 -'" title="职业岗位" class="mb40"></text-module>
                        </div>
                        <div class="side-item" type="issue">
                            <div class="issue-bj mb40" v-for="item in info.faq">
                                <div class="issue block">
                                    <div class="index flexcenter">{{ item.num }}</div>
                                    <img class="index-bj" src="https://app.gter.net/image/miniApp/offer/index-bj.svg" />
                                    <div class="title">{{ item.question }}</div>
                                    <div class="text">{{ item.answer }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="side-item" type="links">
                            <template v-if="info.leaflet_url">
                                <div class="item-header flexacenter">宣传册</div>
                                <div class="link brochure block mb40">
                                    <div class="top flexacenter">
                                        <img class="img" src="/img/pdf-icon.svg" />
                                        <div class="right">
                                            <div class="title">官方宣传册</div>
                                            <div class="name">{{ info.leaflet_name || '-' }}</div>
                                        </div>
                                    </div>
                                    <div class="flexflex" style="justify-content: flex-end">
                                        <div class="btn flexcenter" @click="download(info.leaflet_url)">
                                            <img class="icon" src="/img/download-icon.png" />
                                            下载文件
                                        </div>
                                        <a class="btn open flexcenter" target="_blank" :href="info.leaflet_url">打开文件</a>
                                    </div>
                                </div>
                            </template>

                            <div class="link block mb40" v-if="info.program_url">
                                <div class="title">学院网站项目详情</div>
                                <div class="text">{{ info.program_url }}</div>
                                <div class="flexflex" style="justify-content: flex-end">
                                    <div class="btn flexcenter" @click="copy(info.program_url)">
                                        <img class="icon" src="https://app.gter.net/image/miniApp/offer/copy-icon.png" mode="widthFix" />
                                        复制链接
                                    </div>
                                    <a class="btn open flexcenter" target="_blank" :href="info.program_url">打开链接</a>
                                </div>
                            </div>

                            <div class="link block mb40" v-if="info.catalog_url">
                                <div class="title">项目目录项目详情</div>
                                <div class="text">{{ info.catalog_url }}</div>
                                <div class="flexflex" style="justify-content: flex-end">
                                    <div class="btn flexcenter" @click="copy(info.catalog_url)">
                                        <img class="icon" src="https://app.gter.net/image/miniApp/offer/copy-icon.png" mode="widthFix" />
                                        复制链接
                                    </div>
                                    <a class="btn open flexcenter" target="_blank" :href="info.catalog_url">打开链接</a>
                                </div>
                            </div>
                        </div>

                        <view class="upglide flexcenter">- End -</view>
                    </div>
                </div>

                <div class="content-right">
                    <div class="live">
                        <div class="head flexcenter">
                            <img class="icon" src="/img/talk-live-icon.png" />

                            <div class="text flexcenter">
                                <img class="triangle" src="/img/triangle-dark-cyan.svg" />
                                招生官为你答疑
                            </div>
                        </div>

                        <div class="content-box">
                            <div ref="swiperRef" class="content">
                                <div class="swiper" bindchange="admissionChange">
                                    <div class="swiper-item" :class="'swiper-item' + index" v-for="(item,index) in urls" :key="index">
                                        <div class="item flexacenter" v-for="(item,index) in item" :key="index">
                                            <div class="flexcenter icon-box">
                                                <img class="icon" :src="item.logo" />
                                            </div>
                                            <div class="text flex1">
                                                <div class="admissionState flexcenter" :class="'state' + item.mold">{{ moldObj[item.mold] }}</div>
                                                {{ item.title }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="point flexcenter">
                                <div class="item" :class="{'pitch': admissionCurrent == index}" v-for="(item,index) in urls" :key="index" @click="cutSwiper(index)"></div>
                            </div>
                            <img class="triangle" src="/img/triangle-white-lucency.svg" />
                        </div>

                        <div class="word flexcenter">
                            <img class="item" src="/img/word-live.png" />
                            <img class="item" src="/img/word-playback.png" />
                            <img class="item" src="/img/word-answer.png" />
                        </div>

                        <div class="hint">请添加申请小助手</div>

                        <div class="QR-code flexcenter">
                            <img class="icon" src="https://u.gter.net/assistantwxqrcode.png" />
                        </div>
                    </div>

                    <div class="else">
                        <div class=""></div>
                        <div class="school flexacenter">
                            <div class="logo flexcenter">
                                <img class="img" src="http://127.0.0.1:5500/images/%E9%A6%96%E9%A1%B5/u74.png" />
                            </div>
                            <div class="info">
                                <div class="name">香港大学</div>
                                <div class="name-en">The University of Hong Kong</div>
                            </div>
                        </div>

                        <div class="case">
                            <div class="head flexacenter">
                                <div class="dot"></div>
                                <div class="text flex1">Offer</div>
                                <img class="img" src="/img/arrows-icon.png" />
                            </div>
                            <div class="list offer">
                                <div class="item">
                                    <div class="name">Asian Studies</div>
                                    <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
                                </div>
                                <div class="item">
                                    <div class="name">Asian Studies</div>
                                    <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
                                </div>
                                <div class="item">
                                    <div class="name">Asian Studies</div>
                                    <div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
                                </div>
                            </div>
                        </div>
                        <div class="case mj">
                            <div class="head flexacenter">
                                <div class="dot"></div>
                                <div class="text flex1">面经</div>
                                <img class="img" src="/img/arrows-icon.png" />
                            </div>
                            <div class="list offer">
                                <div class="item">
                                    <div class="name">environmental science</div>
                                    <div class="brief-box">
                                        <div class="brief flexacenter">
                                            <img class="avatar" src="http://127.0.0.1:5500/images/%E9%A1%B9%E7%9B%AE%E8%AF%A6%E6%83%85/u1144.svg" />
                                            第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，因为第一轮的时候我还没注意到这个项目，错过了DDL...
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部 -->
            <div class="base flexcenter">
                <div v-if="(contras.ismanage == null || contras.ismanage == 0) && (contras.status == null || contras.status == 0)" class="type1 flexacenter">
                    <div class="btn flexacenter"><img class="img" src="/img/contrast-icon.png" />项目对比</div>
                    <div class="line"></div>
                    <div class="btn flexacenter"><img class="img" src="/img/manage-icon.png" />项目管理</div>
                    <div class="add flex1 flexcenter" @click="addComparison()"><img class="img" src="/img/add-circle-white.svg" />加入对比单</div>
                </div>

                <div v-else-if="contras.ismanage == 1 && contras.status == 1" class="type2 flexacenter">
                    <div class="btn flexacenter">我的项目 <img class="img" src="/img/arrows-circle-green.svg" /></div>
                    <div class="input-box flexacenter">
                        <img class="img" src="/img/edit-icon.png" />
                        <input class="input flex1" placeholder="添加备注" v-model="remark" @blur="bindblur" maxlength="100" />
                    </div>

                    <div class="state-box" :class="{'undetermined': contras.typeid == 0 }">
                        <template v-if="stateState">
                            <div class="state-mask" @click="cutState()"></div>
                            <div class="state">
                                <div class="state-list">
                                    <div class="state-item flexcenter" :class="{'pitch': contras.typeid == index}" v-for="(item,index) in stateObj" @click="changeType(index)">{{ item }}</div>
                                </div>
                                <div class="delete flexcenter" @click="deletee()">
                                    <img class="icon" mode="widthFix" src="/img/delete-light-grey.svg" />
                                </div>
                            </div>
                        </template>

                        <div @click="cutState()" class="state-btn flexcenter">{{ stateObj[contras.typeid || 0] }}<img class="img" src="/img/arrows-triangle-white.svg" /></div>
                    </div>
                </div>

                <div v-else class="type3 flexacenter">
                    <div class="btn flexacenter">我的项目 <img class="img" src="/img/arrows-circle-green.svg" /></div>
                    <div class="add-btn flexcenter" :class="{'already': contras.status == 1}" style="margin-right: 10px" @click="addComparison()">
                        <img v-if="contras.status == 1" class="icon" src="/img/tick-circle-gray.svg" />
                        <img v-else class="img" src="/img/add-circle-white.svg" />
                        {{ contras.status == 1 ? '已' : '' }}加入对比单
                    </div>
                    <div class="add-btn flexcenter" :class="{'already': contras.ismanage == 1}" @click="addComparison()">
                        <img v-if="contras.ismanage == 1" class="icon" src="/img/tick-circle-gray.svg" />
                        <img v-else class="img" src="/img/add-circle-white.svg" />
                        {{ contras.ismanage == 1 ? '已' : '' }}加入项目管理
                    </div>
                </div>
            </div>

            <!-- 预览覆盖层 -->
            <div class="preview-overlay" v-if="previewShow" @click="hidePreview()">
                <img class="preview-image" @click.stop="() => false" src="/img/9dfc-c89f50deb0f906dd751540895bf0e303.jpg" alt="图片预览" />
                <span class="preview-close" @click="hidePreview()">&times;</span>
            </div>
        </div>
        <script>
            const { createApp, ref, onMounted, nextTick, onUnmounted, computed, defineProps } = Vue
            const subject = createApp({
                setup() {
                    let side = ref({
                        // pivotal: "关键信息",
                        basic: "基本信息",
                        apply: "申请信息",
                        attend: "就读信息",
                        graduate: "毕业&就业",
                        issue: "常见问题",
                        links: "相关链接",
                    })

                    const stateObj = ref({
                        0: "待定",
                        1: "主申",
                        2: "冲刺",
                        3: "保底",
                    })

                    let rankingsObj = ref({})
                    let disciplineObj = ref({})
                    const uniqid = "IwdCOvZ08KUhkXtjXQ5vhAPHczKneFd45T-d55pDZx8TvBsGm2D9tbuIj9YdJhDq2Zy09bXaoc4-lAhiMmE1"

                    onMounted(() => {
                        window.addEventListener("scroll", handleScroll)
                        getBaseData().then(data => {
                            rankingsObj.value = data.rankings
                            disciplineObj.value = data.discipline
                            getData()
                        })
                    })

                    const handleScroll = () => {
                        const keyElements = detailsRef.value.querySelectorAll(".side-item")
                        for (const keyElement of keyElements) {
                            const rect = keyElement.getBoundingClientRect()
                            // console.log(rect)
                            if (rect.top + rect.height > 0) {
                                // console.log("keyElement", keyElement.getAttribute("type"))
                                sideKey.value = keyElement.getAttribute("type")
                                break
                            }
                        }
                    }

                    let info = ref({})
                    let remark = ref("")
                    let sideKey = ref("pivotal")
                    let contras = ref({})
                    let course = ref({})

                    const getData = () => {
                        $ajaxget("/api/detail", {
                            uniqid,
                        }).then(res => {
                            const data = res.data
                            decodeKey(data.info).then(res => {
                                data.info = res

                                let courseObj = {
                                    required: [],
                                    requiredCount: 0,
                                    elective: [],
                                    electiveCount: 0,
                                }

                                const infoObj = data.info || {}

                                const fields = ["tuition_fee", "tuition_fee_per_credit", "application_fee", "admission_deposit"]
                                fields.forEach(field => {
                                    const textKey = `${field}_text`
                                    infoObj[textKey] = formatNumberWithSpaces(info[field] || "")
                                })

                                const curriculum = infoObj.curriculum || []

                                if (infoObj.language_of_instruction) {
                                    let strOutput = infoObj.language_of_instruction.join(",")
                                    infoObj["language_of_instruction_text"] = strOutput
                                }

                                curriculum.forEach(element => {
                                    if (element.credit == "N/A") element.credit = 0
                                    element.type === "必修课" ? (courseObj.required.push(element), (courseObj.requiredCount += element.credit)) : (courseObj.elective.push(element), (courseObj.electiveCount += element.credit))
                                })

                                let contrasObj = data.contras
                                if (Array.isArray(contrasObj)) contrasObj = {}
                                remark.value = contrasObj.remarks || ""
                                // 算出最后申请时间
                                infoObj["application_end"] = calculateApplicaDeadline(infoObj.nonlocal_application_end || {})
                                // 算出面试轮时间
                                infoObj["interviewRounds"] = calculateInterviewRound(infoObj.nonlocal_application_end || {})

                                if (typeof infoObj.mode_of_study == "string") infoObj.mode_of_study = JSON.parse(info.mode_of_study)

                                let sideObj = side.value
                                // 判断是否常见问题 ，没有则删除左侧
                                if (!infoObj.faq || infoObj.faq.length == 0) delete sideObj.issue

                                // 判断 毕业就业 没有则删除左侧
                                if (!info.award_zh && !infoObj.graduation_requirements && !infoObj.domains && !infoObj.employers && !infoObj.positions) delete sideObj.graduate

                                // 判断奖学金文案
                                if (infoObj.scholarship) infoObj["scholarshipText"] = JudgmentScholarshipText(infoObj.scholarship)

                                if (infoObj.leaflet_url) {
                                    const leaflet_url = decodeURIComponent(infoObj.leaflet_url)
                                    const urlWithoutParams = leaflet_url.split("?")[0]
                                    const urlParts = urlWithoutParams.split("/")
                                    const fileName = urlParts[urlParts.length - 1]
                                    infoObj["leaflet_name"] = fileName
                                }

                                // const isadmission = info.admissionsproject || 0
                                // if (isadmission == 1) this.getAdmissionList()

                                const date = new Date()
                                const month = date.getMonth() + 1
                                const year = date.getFullYear()
                                const semester = infoObj.semester || {}
                                if (month > semester.month && year + 1 <= semester.year) infoObj["semesterState"] = true

                                console.log("infoObj", infoObj)
                                info.value = infoObj
                                side.value = sideObj
                                sideKey.value = "basic"
                                course.value = courseObj
                                contras.value = contrasObj
                            })
                        })
                    }

                    // 判断奖学金文案
                    const JudgmentScholarshipText = obj => {
                        let text = ""
                        if (obj.local && obj.nonlocal) text = "均有"
                        else if (!obj.local && !obj.nonlocal) text = "均无"
                        else if (obj.local && !obj.nonlocal) text = "非本地学生无"
                        else if (!obj.local && obj.nonlocal) text = "非本地学生有"
                        return text
                    }

                    // 计算出外地申请截止时间
                    const calculateApplicaDeadline = obj => {
                        // 初始化变量来存储最大时间点的属性和日期
                        let maxDate = null
                        // 遍历对象的属性
                        for (const item in obj) {
                            // 如果当前日期是最大日期或是第一个日期，则更新最大日期和属性
                            if (maxDate === null || obj[item] > maxDate) maxDate = obj[item]
                        }
                        return maxDate
                    }

                    // 计算出面试轮的数组
                    const calculateInterviewRound = obj => {
                        let rounds = []
                        const chineseNumbers = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"]

                        const formatTime = (time, index) => {
                            return {
                                text: `第${chineseNumbers[index]}轮`,
                                time,
                            }
                        }

                        Object.keys(obj).forEach((key, index) => {
                            rounds.push(formatTime(obj[key], index))
                        })

                        if (rounds.length == 0) rounds = [{}]
                        return rounds || [{}]
                    }

                    let studyMode = ref("ft") // 'ft', // 学习模式显示状态  ft 全日制   pt 兼读制

                    const cutStudyMode = type => {
                        studyMode.value = type
                    }

                    const copy = url => {
                        let copyInput = document.createElement("input")
                        document.body.appendChild(copyInput)
                        copyInput.setAttribute("value", url)
                        copyInput.select()
                        document.execCommand("Copy")
                        copyInput.remove()
                    }

                    // 下载文件
                    const download = url => {
                        // 下载文件
                        window.open(url)
                    }

                    const bindblur = () => {
                        $ajax("/api/user/remarks", {
                            token: contras.value.token,
                            remarks: remark.value,
                        }).then(res => {})
                    }

                    // 点击加入对比单
                    const addComparison = () => {
                        $ajax("/api/contrast/add", {
                            projectid: info.value.id,
                        }).then(res => {
                            if (res.code != 200) return
                            const data = res.data
                            contras.value["status"] = 1
                            contras.value["ismanage"] = 1
                            contras.value["typeid"] = 0 // 默认是待定
                            contras.value["token"] = data.token
                        })
                    }

                    const detailsRef = ref(null)
                    // 使 页面滚动到
                    const cutSide = key => {
                        // sideKey.value = key
                        const keyElement = detailsRef.value.querySelector(`.side-item[type=${key}]`)
                        keyElement.scrollIntoView({ behavior: "smooth" })
                    }

                    let stateState = ref(false)

                    const cutState = () => {
                        stateState.value = !stateState.value
                    }

                    // 修改 项目 状态
                    const changeType = typeid => {
                        $ajax("/api/user/changeType", {
                            token: contras.value.token || "",
                            typeid,
                        }).then(res => {
                            if (res.code != 200) return
                            contras.value["typeid"] = typeid
                            cutState()
                        })
                    }

                    const deletee = () => {
                        const contras = this.data.contras
                        $ajax("/api/user/delete", {
                            token: contras.value.token,
                        }).then(res => {
                            if (res.code != 200) return
                            contras.value["ismanage"] = 0
                            stateState.value = false
                        })
                    }

                    const offerList = ref([
                        {
                            apply_results: "Offer",
                            apply_resultstatus: 1,
                            avatar: "https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC1XltTFqyOikN42jDKLNjtax7HINpse8SMSdU90AVyYWFjYQ~~/mini",
                            comments: 1,
                            degree: "LLM",
                            professional: "mcl",
                            project: "mcl",
                            reward: 23,
                            ripostes: 0,
                            schoolimage: "https://oss.x-php.com/school/J6BSwE-VfCFkCLVSBaR7ec6NYmTA5sRfNP5NHJQuwf83NTE2",
                            schoolname: "香港大学",
                            semester: "23Fall",
                            status: 1,
                            timestamp: "2023-06-25 12:42:04",
                            uniqid: "1eWa0uTzzLvv",
                            url: "https://offer.gter.net/details/1eWa0uTzzLvv",
                            view: 557,
                        },
                        {
                            apply_results: "Offer",
                            apply_resultstatus: 1,
                            avatar: "https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC1XVtVE6yOikN42jDKLNjtax7HIdVsesDXSdU90AVyYWFjYQ~~/mini",
                            comments: 0,
                            degree: "LLM",
                            professional: "Common Law（MCL）（FT）",
                            project: null,
                            reward: 0,
                            ripostes: 0,
                            schoolimage: "https://oss.x-php.com/school/J6BSwE-VfCFkCLVSBaR7ec6NYmTA5sRfNP5NHJQuwf83NTE2",
                            schoolname: "The University of Hong Kong",
                            semester: "23Spring",
                            status: 1,
                            timestamp: "2023-02-21 20:09:50",
                            uniqid: "HD4DmDCi0aCa",
                            url: "https://offer.gter.net/details/HD4DmDCi0aCa",
                            view: 242,
                        },
                    ])

                    const urls = ref([
                        [
                            {
                                logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2",
                                mold: 2,
                                title: "11.27 19:00 | 高达90%就业率！工科生不能错过的香港城大工学院线上宣讲会快来了解！",
                                url: "https://bbs.gter.net/thread-2619710-1-1.html",
                            },
                            {
                                logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLVSBaR7ec6NYmTA5sRfNP5NHJQuwf83NTE2",
                                mold: 1,
                                title: "香港大学 香港大学社会科学硕士（社会数据分析）线上公开课暨宣讲会",
                                url: "https://bbs.gter.net/thread-2619923-1-1.html",
                            },
                            {
                                logo: "https://oss.x-php.com/school/J6BSwE6VfCFmDrknc6IXB9eUbGqEscEIOawLEogy25QhNzUxNg~~",
                                mold: 2,
                                title: "11.28 19:30 | 毕业起薪高 工作一年学费回本？昆杜研究生项目优点真的太太太太多了！ ",
                                url: "https://bbs.gter.net/thread-2620009-1-1.html",
                            },
                            {
                                logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2",
                                mold: 3,
                                title: "招生资讯 | 香港中文大学 政务与政策科学学院授课式硕士课程",
                                url: "https://bbs.gter.net/thread-2616456-1-1.html",
                            },
                        ],
                        [
                            {
                                logo: "https://oss.x-php.com/school/J6BSwE-VfCFkCLRSBaR7ec6NYmTHuZYPMKxNHJQuwf83NTE2",
                                mold: 3,
                                title: "长期答疑 | 香港中文大学 经济学理学硕士课程-2025入学现正招生",
                                url: "https://bbs.gter.net/thread-2617401-1-1.html",
                            },
                        ],
                    ])

                    const moldObj = ref({
                        1: "直播",
                        2: "回放",
                        3: "答疑",
                    })

                    let admissionCurrent = ref(0)

                    const swiperRef = ref(null)

                    // 写一个 点击切换轮播图
                    const cutSwiper = index => {
                        admissionCurrent.value = index
                        const dom = document.querySelector(".swiper-item" + index)
                        const left = dom.offsetLeft
                        swiperRef.value.scrollTo({
                            left,
                            behavior: "smooth",
                        })
                    }

                    let previewShow = ref(false)

                    const openPreview = () => (previewShow.value = true)
                    const hidePreview = () => (previewShow.value = false)

                    return { previewShow, openPreview, hidePreview, swiperRef, cutSwiper, admissionCurrent, moldObj, urls, offerList, side, sideKey, info, disciplineObj, rankingsObj, cutStudyMode, studyMode, course, contras, copy, download, stateObj, bindblur, remark, addComparison, cutSide, detailsRef, stateState, cutState, changeType, deletee }
                },
            })
            subject.component("text-module", textModule)
            subject.mount("#app")
        </script>
    </body>
</html>
