<template>

    <div class="history" v-if="historys.length">

        <transition class="history-list" name="historyItem" tag="ul">

            <div>

                <li class="history-item" v-for="(item, index) in historys" :key="index"  

                @click="$_search_selectItem(item)">

                    <div class="historyItem" >{{item.hotWord}}</div>

                    <i class="iconfont icon-delete" @click.stop="clear(item)"></i>

                </li>

            </div>

        </transition>

        <div class="history-delete">

            <div class="history-delete-wrapper" @click="showConfirm">

                <i class="iconfont icon-clear"></i>

                <span>清空历史搜索</span>

            </div>

        </div>

    </div>

</template>

<script>

import storage from 'assets/js/storage'

import {searchMixin} from 'assets/js/mixins'

import {SEARCH_HISTORY_KEYWORD_KEY} from './config';

export default {

    name: 'SearchHistory',

    mixins: [searchMixin],

    data() {

        return {

            historys: []

        }

    },

    components: {

    },

    created() {

        this.getHistorysMsg()

    },

    methods: {

        getHistorysMsg() {

            const historyMsg = storage.get(SEARCH_HISTORY_KEYWORD_KEY, [])

            if(historyMsg && historyMsg.length > 0) {

                this.historys = historyMsg

            }

        },

        clear(item) {

            this.historys = this.historys.filter(val => val.hotWord !== item.hotWord)

            storage.set(SEARCH_HISTORY_KEYWORD_KEY, this.historys)

        },

        showConfirm () {

            this.$emit('show-confirm')

        }

    }

}

</script>

<style lang="scss" scoped>

    .history {

        background-color: white;

        &-list {

            width: 100%;

        }

        &-item {

            width: 100%;

            display: flex;

            justify-content: space-between;

            height: 40px;

        }

        &-delete {

            width: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            &-wrapper {

                width: 80%;

                border: 1px solid black;

                height: 40px;

                line-height: 40px;

                text-align: center;

                font-size: 18px;

                border-radius: 4px;

                // margin: 0 auto;

                .iconfont {

                    font-size: 18px;

                }

            }

        }

    }

    .historyItem {

        &-enter-active,

        &-leave-active {

            transition: height 0.1s;

        }

        &-enter,

        &-leave-to {

            height: 0;

        }

    }

</style>