<template>
    <div class="page">
        <div class="search">
            <input
                class="search__input"
                type="text"
                :focus="true"
                v-model="keyword"
                @confirm="confirm"
                placeholder="搜索本店商品"
            />
            <div class="search__cancel" @click="confirm">搜索</div>
        </div>
        <div class="keyword">
            <div class="keyword__title">大家都在搜</div>
            <ul class="list">
                <li
                    class="list__item"
                    v-for="(item, index) in keywordList"
                    :key="index"
                    @click="jumpList(item.keywords)"
                >
                    {{ item.keywords }}
                </li>
            </ul>
        </div>
        <div class="keyword" v-if="searchHistory.length">
            <div class="keyword__title">历史搜索</div>
            <ul class="list">
                <li
                    class="list__item"
                    v-for="(item, index) in searchHistory"
                    :key="index"
                    @click="jumpList(item)"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: "",

    // 数据
    data() {
        return {
            keyword: "",
            keywordList: [],
            curTab: "0",
        };
    },
    onLoad(opts) {
        if (opts.curTab) {
            this.curTab = opts.curTab;
        }
    },

    onShow() {
        const self = this;

        // self.getlist()
    },

    // 函数
    methods: {
        // 获取热门搜索词
        getlist() {
            const self = this;

            self.api.get("/Product/GetKeywordsList").then((res) => {
                self.keywordList = res.data;
            });
        },

        // 搜索处理
        confirm() {
            const self = this;

            if (self.keyword) {
                let list = self.fn.deepClone(self.searchHistory) || [];

                list.forEach((item, index) => {
                    if (item === self.keyword) {
                        list.splice(index, 1);
                    }
                });

                list.unshift(self.keyword);
                list.lenght = 10;

                self.$store.commit("common/update", {
                    searchHistory: list,
                });
            }

            self.jumpList(self.keyword);
        },

        // 跳转到商品列表
        jumpList(keyword) {
            const self = this;
            if (this.curTab == "0") {
                self.router.push({
                    path: "/pages/goods/list2",
                    query: {
                        title: keyword,
                        curTab:'2'
                    },
                });
            } else {
                self.router.push({
                    path: "/pages/goods/list2",
                    query: {
                        title: keyword,
                    },
                });
            }
        },
    },

    // 数据计算
    computed: {
        searchHistory() {
            return this.$store.state.common.searchHistory;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style>
page {
    background-color: #fff;
}
</style>

<style lang="scss" scoped>
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px(128);
    padding: 0 px(45) px(4);
    background-color: #efefef;

    &__input {
        width: px(820);
        height: px(86);
        padding: 0 px(24);
        font-size: px(36);
        color: #000;
        background-color: #fff;
        border-radius: px(8);
    }

    &__cancel {
        font-size: px(36);
        color: #000;
    }
}

.keyword {
    margin-top: px(40);

    &__title {
        padding: 0 px(45);
        font-size: px(34);
        color: #9d9d9d;
    }
}

.list {
    display: flex;
    flex-wrap: wrap;
    padding: px(35) px(15) 0 px(45);

    &__item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: px(70);
        padding: 0 px(30);
        margin: 0 px(30) px(30) 0;
        font-size: px(28);
        color: #000;
        background-color: #efefef;
        border-radius: px(8);
    }
}
</style>