<template>
    <div class="wrapper" v-if="loading">
        <div class="search-input">
            <van-search type="text" v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        </div>

        <div class="history-box">
            <template v-if="historyPublicList.length > 0">
              <div class="active-item-title">
                <div class="active-item-title-h2">历史记录</div>
                <div class="active-item-title-time" @click="deleteHistory()">
                  <van-icon name="delete-o" />
                </div>
              </div>
              <div class="history-item-box">
                <span @click="onClickHistory(historyItem)" class="history-item"
                      v-for="( historyItem, historyIndex ) in historyPublicList" :key="historyIndex">{{
                    historyItem }}</span>
              </div>
            </template>
            <div class="hot-search-box">
                <div class="hot-item-cell">
                    <div class="hot-item-cell-title">
                        <div>
                            <van-icon class="color-ee8c15" name="fire" />
                        </div>
                        <div class="hot-item-cell-title-h2 color-2372eb">舆情热搜榜</div>
                    </div>
                    <div class="hot-item-cell-logo" @click="getQueryNewsHotSearchData">
                        <van-icon name="replay" />
                    </div>
                </div>
                <div class="hot-time-box">
                    <van-radio-group @change="getQueryNewsHotSearchData" v-model="hotTimeValue" direction="horizontal">
                        <van-radio name="1">近24小时</van-radio>
                        <van-radio name="2">近一周</van-radio>
                    </van-radio-group>
                </div>
                <ul class="hot-box">
                    <li @click="goUrl(hotItem.id)" class="hot-item-cell" v-for=" (hotItem, hotIndex) in hotSearchList "
                        :key="hotIndex">
                        <div class="hot-item-cell-title-resou">
                            {{ hotItem.title }}
                        </div>
                        <div class="fire-box color-999999">
                            <van-icon class="icon-fire" name="fire" />
                            <span class="">{{ hotItem.score }}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  <van-loading v-else />
</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 {
    name: "Search",
    components: {
        VanIcon: Icon,
        VanSearch: Search,
        VanRadioGroup: RadioGroup,
        VanRadio: Radio,
        VanTag: Tag,
        VanEmpty: Empty,
    },
    data() {
        return {
          loading: true,
            searchValue: '',
            historyPublicList: [],
            hotTimeValue: '1',// 热搜周期
            hotSearchList: [],// 舆情热搜榜
        }
    },
    mounted() {
        if (sessionStorage.getItem('historyPublicList')) {
            this.historyPublicList = JSON.parse(sessionStorage.getItem('historyPublicList'));
        }
        this.getQueryNewsHotSearchData();
    },
    methods: {
        // 搜索关键字
        onSearch() {
            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));
            sessionStorage.setItem('searchValue', this.searchValue);
            this.$router.push('/dashboard/home/searchPublicSentiment/result');
        },

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

        // 删除历史记录
        deleteHistory() {
            this.historyPublicList = [];
            sessionStorage.removeItem('historyPublicList');
        },

        // 获取舆情热搜榜
        async getQueryNewsHotSearchData() {
          this.loading = false;
            let params = { type: this.hotTimeValue }
            let result = await getQueryNewsHotSearch(params);
            if (result) {
              this.hotSearchList = result;
              this.loading = true;
            }
        },

        // 点击历史记录中的
        onClickHistory(historyItem) {
            this.searchValue = historyItem;
            sessionStorage.setItem('searchValue', this.searchValue);
            this.$router.push('/dashboard/home/searchPublicSentiment/result');
        },


    }
}
</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;
}
/deep/ .van-loading {
  text-align: center;
  line-height: 500px;
}
</style>
