<!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/search.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>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>

    <body>
        <div id="app" class="main" v-cloak>
            <img class="index-icon" src="/img/index-icon.png" />
            <div class="boxbox">
                <div class="tab flexacenter">
                    <a href="/" target="_blank">首页</a>
                    <img class="img" src="/img/arrows.svg" />
                    <div class="current">项目搜索</div>
                </div>
                <div class="body flexflex">
                    <div class="left">
                        <div class="input-box flexacenter">
                            <input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
                            <img class="search-icon" src="/img/search-black-icon.svg" />
                            <template v-if="false">
                                <div class="hint-mask"></div>
                                <div class="hint-list scrollbar">
                                    <div class="item" v-for="item in 30">222222</div>
                                </div>
                            </template>
                        </div>
                        <div class="total flexacenter">
                            共
                            <div class="sum">{{ count }}</div>
                            个搜索结果
                        </div>
                        <div v-if="count == 0 && showList.length == 0" class="empty-box flexcenter">
                            <img class="icon" src="/img/empty-icon.png" />
                            <span class="text">暂无搜索结果，换个关键词试试吧！</span>
                        </div>
                        <div class="list" v-if="showList.length != 0">
                            <div class="item" v-for="(item ,index) in showList">
                                <div class="operate flexcenter">
                                    <div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
                                        <div class="tick-box flexcenter">
                                            <img class="img-tick" src="/img/tick-icon.svg" />
                                        </div>
                                        已加入
                                    </div>
                                    <div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" @click="openMoreSelect(index)" class="circle flexcenter">
                                        <img class="img-dot" src="/img/dot-dot-dot.png" />
                                    </div>
                                    <div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick(item,index)">
                                        <img class="img-add" src="/img/add-thick.svg" />
                                    </div>
                                    <div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll()"></div>
                                    <div class="select flexflex" :class="{'show': item.moreState}">
                                        <div class="title flexacenter">
                                            <div class="dot"></div>
                                            {{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
                                        </div>
                                        <div class="btn flexcenter" @click="handleClick(item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
                                    </div>
                                </div>
                                <div class="name flexflex">{{ item.name_zh }}</div>
                                <div class="english">{{ item.name_en }}</div>
                                <div class="introduce flexacenter">
                                    {{ item.department }}
                                    <div class="flexacenter" v-if="item.rank">
                                        <div class="line">|</div>
                                        专业排名
                                        <div class="quantity">{{ item.rank }}</div>
                                    </div>
                                    <div class="flexacenter" v-if="item.tuition_fee_text">
                                        <div class="line">|</div>
                                        学费HK$
                                        <div class="quantity">{{ item.tuition_fee_text }}</div>
                                    </div>
                                </div>
                                <div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
                                <div class="tag flexflex">
                                    <div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
                                    <div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
                                    <div class="tag-item" v-for="item in item.tags">{{ item }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <template v-if="historyList.length != 0">
                            <div class="title flexacenter">
                                <div class="dot"></div>
                                历史搜索
                            </div>
                            <div class="list flexflex">
                                <div class="item flexcenter" v-for="item in historyList" @click="selectKW(item)">{{ item }}</div>
                            </div>
                        </template>

                        <div class="title flexacenter">
                            <div class="dot"></div>
                            标签搜索
                        </div>
                        <div class="list flexflex">
                            <div class="item flexcenter" v-for="item in 9">搜索</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部 -->
            <div class="base flexcenter">
                <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>
        </div>
        <script>
            const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
            const search = createApp({
                setup() {
                    onMounted(() => {
                        // kw.value = "术"
                        // getList()
                        let history = localStorage.getItem("historyProject")
                        if (history) {
                            history = JSON.parse(history)
                            historyList.value = history
                        }
                    })

                    let historyList = ref([])

                    let kw = ref("")
                    let count = ref(0)
                    let listAll = []
                    const getList = () => {
                        console.log("kw", kw.value)
                        $ajaxget("/api/project.lists", {
                            limit: 2000,
                            page: 1,
                            keyword: kw.value,
                        }).then(res => {
                            if (res.code != 200) return
                            const data = res.data

                            let list = data.data || []
                            const date = new Date()
                            const month = date.getMonth() + 1
                            const year = date.getFullYear()

                            list.forEach(element => {
                                const semester = element.semester || {}

                                if (month > semester.month && year + 1 <= semester.year) element["semesterState"] = true

                                element["tuition_fee_text"] = formatNumberWithSpaces(element.tuition_fee)
                                element["random"] = randomString(6)
                            })

                            listAll = list
                            count.value = data.count
                            calculateShowList()
                        })
                    }

                    let showList = ref([])
                    let page = ref(1)

                    // 在 listAll 数据截取要显示的数据
                    const calculateShowList = () => {
                        const limit = 20
                        if (page.value == 0) return
                        const startIndex = (page.value - 1) * limit
                        const endIndex = startIndex + limit
                        let list = listAll.slice(startIndex, endIndex)
                        showList.value = showList.value.concat(list)

                        console.log("showList", showList)

                        page.value = endIndex >= listAll.length ? 0 : page.value + 1
                    }

                    let pl = ref("")

                    const submit = () => {
                        kw.value = kw.value.trim()

                        if (kw.value == "") kw.value = pl.value
                        if (kw.value == "") return
                        if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)

                        localStorage.setItem("historyProject", JSON.stringify(historyList.value))

                        showList.value = []
                        page.value = 1
                        count.value = 0
                        getList()
                    }

                    const selectKW = name => {
                        kw.value = name
                        if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)

                        localStorage.setItem("historyProject", JSON.stringify(historyList.value))

                        showList.value = []
                        page.value = 1
                        count.value = 0
                        getList()
                    }

                    // 点击事件
                    const handleClick = (item, index) => {
                        const random = item.random
                        if (item.status == 1) return
                        $ajax("/api/project.contrast/add", {
                            projectid: item.id,
                        }).then(res => {
                            // console.log(baseRef.value)
                            // baseRef.value.calculate(random, res.data.count)
                            const uniqid = item["uniqid"]
                            listAll.forEach(element => {
                                if (element.uniqid == uniqid) {
                                    element["contraststatus"] = {
                                        status: 1,
                                        ismanage: 1,
                                    }
                                }
                            })

                            showList.value[index]["contraststatus"] = {
                                status: 1,
                                ismanage: 1,
                            }

                            showList.value[index]["moreState"] = false
                        })
                    }

                    const openMoreSelect = index => {
                        closeMoreSelectAll()
                        showList.value[index]["moreState"] = true
                    }

                    // 关闭所有 状态 选择 弹出框
                    const closeMoreSelectAll = type => {
                        showList.value.forEach(element => {
                            element["moreState"] = false
                        })
                    }

                    return { showList, count, kw, submit, pl, historyList, selectKW, handleClick, openMoreSelect, closeMoreSelectAll }
                },
            })

            search.mount("#app")
        </script>
    </body>
</html>
