<!-- 视频搜索组件 -->
<template>
    <main>
        <van-search
            v-model.trim="searchValue"
            placeholder="搜药品、疾病、症状"
            show-action
            shape="round"
            class="search"
            @search="search"
        >
            <div slot="action" @click="search(searchValue)">搜索</div>
        </van-search>

        <!-- 搜索历史 -->
        <div class="search-history">
            <div class="tit">
                <div>
                    搜索历史
                    <span>保留前20条历史记录</span>
                </div>
                <van-icon name="delete" @click="clearAll" />
            </div>
            <div class="content" v-if="list.length > 0">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="van-ellipsis" @click="search(item.value)">{{item.value}}</div>
                    <van-icon name="close" @click="clearHistory(item.value)" />
                </div>
            </div>
            <div v-else>暂无搜索历史记录</div>
        </div>

        <!-- 热门搜索 -->
        <div class="hot-search">
            <div class="tit">热门搜索</div>
            <div class="content" v-if="hotList.length > 0">
                <div class="item" v-for="(item,index) in hotList" :key="index">
                    <div class="van-ellipsis" @click="search(item.SearchName)">{{item.SearchName}}</div>
                </div>
            </div>
            <div v-else>暂无热门搜索记录</div>
        </div>

        <!-- 关闭按钮 -->
        <div class="close">
            <van-icon name="close" size=".6rem" @click="close" />
        </div>
    </main>
</template>
<script>
    export default {
        name: "VideoSearch",
        data() {
            return {
                searchValue: "",
                list: [], // 历史记录
                hotList: [] // 热门搜索历史记录
            };
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                // 获取本地存储的历史记录
                let res = JSON.parse(localStorage.getItem("lj_search_list"));
                let hotList = JSON.parse(
                    sessionStorage.getItem("lj_search_hotlist")
                );
                if (res) {
                    this.list = res;
                }
                if (hotList) {
                    this.hotList = hotList;
                } else {
                    this.GetListHotsearch();
                }
            },
            // 获取热门搜索
            GetListHotsearch() {
                this.$http.GetListHotsearch().then(res => {
                    if (res.data.IsSuccess) {
                        this.hotList = res.data.ResultObject;
                        sessionStorage.setItem(
                            "lj_search_hotlist",
                            JSON.stringify(this.hotList)
                        );
                    } else {
                        this.$toast(res.data.ResultMsg);
                    }
                });
            },
            // 清除一个历史记录
            clearHistory(value) {
                this.list = this.list.filter(v => v.value !== value);
                localStorage.setItem("lj_search_list", JSON.stringify(this.list));
                this.$emit("clear", value);
            },
            // 搜索事件
            search(value) {
                this.pushList(value);
                let res = localStorage.setItem(
                    "lj_search_list",
                    JSON.stringify(this.list)
                );
                this.$emit("search", value);
            },
            // 添加历史记录 value=>搜索值
            pushList(value) {
                let flag = false;
                this.list.map(v => {
                    if (v.value == value) {
                        flag = true;
                    }
                });
                if (!flag && value) {
                    this.list.unshift({ value });
                    if (this.list.length > 20) {
                        this.list.pop();
                    }
                }
            },
            // 清除所有历史
            clearAll() {
                this.$dialog
                    .confirm({
                        title: "提示",
                        message: "确定清除所有搜索历史记录？"
                    })
                    .then(() => {
                        // on confirm
                        this.list = [];
                        localStorage.setItem(
                            "lj_search_list",
                            JSON.stringify(this.list)
                        );
                    })
                    .catch(() => {
                        // on cancel
                    });
            },
            close() {
                // 关闭组件
                this.$emit("close");
            }
        }
    };
</script>

<style lang='less' scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    //垂直居中
    .hc(@h) {
        height: @h;
        line-height: @h;
    }

    main {
        padding: 0 0.2rem 1rem;
        max-height: 100vh;
        font-size: 0.26rem;
        color: #666;

        .search {
            /deep/ .van-search__action > div {
                display: flex;
                align-items: center;
            }

            .van-icon {
                font-size: 20px;
            }
        }
        // 已经开通城市
        .search-history,
        .hot-search {
            padding: 0.2rem;

            .tit {
                .flex();
                color: #2c2c2c;
                font-size: 0.32rem;
                text-align: left;
                padding: 0.2rem 0;
                span {
                    font-size: 0.24rem;
                    color: #979797;
                }
            }

            .content {
                .flex();
                flex-wrap: wrap;
                justify-content: flex-start;

                .item {
                    .flex();
                    .hc(0.5rem);
                    background: #f2f2f2;
                    font-size: 0.28rem;
                    border-radius: 0.25rem;
                    border: solid 0.01rem #ececec;
                    padding: 0 0.2rem;
                    margin: 0 0.08rem 0.1rem;
                    .van-ellipsis {
                        max-width: 2rem;
                    }
                    .van-icon {
                        margin-left: 0.1rem;
                        font-size: 0.28rem;
                    }

                    &:active {
                        background: #fff;
                    }
                }
            }
        }

        .close {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.2rem;
            padding: 0.1rem;
            opacity: 0.5;
            border-radius: 50%;
            overflow: hidden;
            z-index: 1;
        }
    }
</style>
