<template>
    <div class="wrapper">
        <div class="search-input">
            <van-search type="text" v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        </div>
        <div class="search-result-box">
            <ul v-if="caseInfoList.length > 0">
                <li v-for="(resultItem, resultIndex) in caseInfoList" :key="resultIndex"
                    class="search-result-item">
                    <div @click="goUrl(resultItem.id)" class="search-result-title" v-html="resultItem.title"></div>

                    <div class="search-result-link-box" v-if="resultItem.companyName">
                        <div class="search-result-link-title">
                            <van-icon name="link-o" />
                            <span style="word-break: break-all"><a :href="resultItem.url">{{ resultItem.url }}</a></span>
                        </div>
                        <div class="search-result-link-tag">
                            <span>{{ resultItem.companyName }}</span>
                            <van-tag color="#ffe1e1" text-color="#ad0000">{{ resultItem.tags }}</van-tag>
                        </div>
                    </div>
                    <div class="search-result-time">
                        <div>{{ resultItem.source }}</div>
                        <div>{{ resultItem.publishTime }}</div>
                    </div>
                </li>
            </ul>
            <div v-else>
                <van-empty />
            </div>
        </div>
    </div>
</template>

<script>
import { Icon, Search, RadioGroup, Radio, Tag, Empty } from 'vant';//button组件
import { areaList } from '@vant/area-data';
import { getQueryNewsinfo, getQueryNewsHotSearch } from "@/service/api/home";
export default {
    inject: ['reload'],
    name: "Search",
    components: {
        VanIcon: Icon,
        VanSearch: Search,
        VanRadioGroup: RadioGroup,
        VanRadio: Radio,
        VanTag: Tag,
        VanEmpty: Empty,
    },
    data() {
        return {
            searchValue: '',
            historyPublicList: [],

            caseInfoList: [],
            currentPage: 1,
            loading: false,
            isEndLoading: false,

        }
    },

    beforeRouteEnter(to, from, next) {
        to.meta.keepAlive = true;
        if (from.path !== '/dashboard/home/searchPublicSentiment/result/details') {
            next(vm => {
                vm.reload()
            })
        } else {
            next()
        }
    },

    beforeRouteLeave(to, from, next) {
        if (to.path == '/dashboard/home/searchPublicSentiment/result/details') {
            from.meta.keepAlive = true;
            next()
        } else {
            from.meta.keepAlive = false;
            next()
        }
    },

    mounted() {
        window.addEventListener('scroll', this.scrollBottom);
        if (sessionStorage.getItem('searchValue')) {
            this.searchValue = sessionStorage.getItem('searchValue');
            this.getQueryNewsinfoData();
        }
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollBottom)
    },
    methods: {
        // 搜索关键字
        onSearch() {
            this.getQueryNewsinfoData();
            let historyListArray = [];
            if (this.historyPublicList.length > 0) {
                historyListArray = this.historyPublicList;
            } else {
                historyListArray = [];
            }
            historyListArray.unshift(this.searchValue);
            this.historyPublicList = historyListArray;
            sessionStorage.setItem('historyPublicList', JSON.stringify(this.historyPublicList));
        },

        // 搜索取消
        onCancel() {
            this.$router.push('/dashboard/home');
        },

        // 去详情页
        goUrl(id) {
            sessionStorage.setItem('getDetailsId', id);
            this.$router.push('/dashboard/home/searchPublicSentiment/result/details');
        },

        async getQueryNewsinfoData() {
            let params = {
                "keyword": this.searchValue,// 搜索关键词
                "pageNum": this.currentPage,
                "pageSize": 10,
            }
            let result = await getQueryNewsinfo(params);
            if (this.loading) {
                this.caseInfoList = this.caseInfoList.concat(result.records);
            } else {
                this.caseInfoList = result.records;
            }
            this.totalDatas = result.total;
            if (this.caseInfoList.length < result.total) {
                this.isEndLoading = false;
            } else {
                this.isEndLoading = true;
            }
            this.loading = false;
        },


        // 滚动到页面底部时，请求内容
        scrollBottom() {
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //页面滚动的高度
            let clientHeight = document.documentElement.clientHeight  //可视区域高度
            let scrollHeight = document.documentElement.scrollHeight  //可滚动内容的高度
            let bottomOfWindow = scrollTop + clientHeight + 1000 >= scrollHeight    //是否滚动到底部

            //loading 和 this.tableData.length和this.total是自己的判断条件
            if (scrollTop !== 0 && bottomOfWindow && !this.loading && !this.isEndLoading) {
                this.loading = true;
                this.currentPage += 1;
                this.getQueryNewsinfoData();
            }
        },

    }
}
</script>

<style lang="less" scoped>
.wrapper {
    padding-bottom: 1rem;
    background: #ffffff;
    min-height: 100vh;
}

.search-input {
    position: sticky;
    top: 0;
    left: 0;
    background: #ffffff;
    padding: 1rem;
    z-index: 10;
}

.van-search {
    padding: 0;
}

.active-item-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.active-item-title-h2 {
    color: #333333;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    justify-self: start;
    align-items: center;
}

.history-box {
    margin-top: 6px;
    padding: 0 1rem;
}

.history-item-box {
    margin-bottom: 16px;
}

.history-item {
    padding: 4px 6px;
    background: #f2f7f7;
    border-radius: 4px;
    font-size: 0.7rem;
    margin: 0 10px 10px 0;
}

.search-result-box {
    border-top: solid 10px #f5f5f5;
}

.color-ee8c15 {
    color: #ee8c15;
    font-size: 1.2rem;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.icon-fire {
    font-size: 1rem;
    margin-right: 6px;
}

.hot-search-box {
    padding: 4px 1rem;
    border: solid 1px #b9d2f8;
    border-radius: 20px;
}

.hot-item-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3rem;
}

.hot-item-cell:not(:last-child) {
    border-bottom: solid 1px #dadce0;
}

.hot-item-cell-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.8rem;
}

.hot-item-cell-title-h2 {
    font-size: 1rem;
    font-weight: bold;
}

.hot-item-cell-title-resou {
    font-size: 0.8rem;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-item-cell-title-paixu {
    font-size: 1rem;
    font-weight: bold;
    margin-right: 6px;
    color: #999999;
}

.color-2372eb {
    color: #2372eb;
}

.hot-item-cell-logo i {
    font-size: 1rem;
    color: #2372eb;
}

.hot-item-cell-guanzhu {
    font-size: 0.8rem;
    color: #2372eb;
    border: solid 1px #2372eb;
    padding: 4px 6px;
    border-radius: 20px;
}

.color-999999 {
    color: #999999;
}

.hot-box .hot-item-cell:nth-of-type(1) .fire-box {
    color: #db2c2c;
}

.hot-box .hot-item-cell:nth-of-type(2) .fire-box {
    color: #ee8c15;
}

.hot-box .hot-item-cell:nth-of-type(3) .fire-box {
    color: #e6d200;
}

.hot-time-box {
    margin: 20px 0 6px;
}

.van-radio-group /deep/ .van-radio__icon {
    font-size: 16px;
}

.van-radio-group /deep/ .van-radio__label {
    font-size: 0.8rem;
}

.search-result-item {
    width: 100%;
    padding: 1rem;
    background: #ffffff;
    border-bottom: solid 10px #f5f5f5;
}

.search-result-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.search-result-link-box {
    background: #f5f5f5;
    padding: 10px;
    margin-bottom: 10px;
}

.search-result-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #666666;
}

.search-result-link-title {
    margin-bottom: 6px;
}

.search-result-link-title i {
    color: #2372eb;
}

.search-result-link-title span {
    font-size: 0.9rem;
    margin-left: 6px;
}

.search-result-link-tag {
    font-size: 0.8rem;
}

.search-result-link-tag span {
    margin-right: 6px;
}
</style>
