<template>
    <view class="search-history">
        <view v-if="hist.length" class="hist">
            <view class="hist-tit c-gap-inner-bottom c-font-big-less">
                <text class="hist-tit-text">搜索历史</text>
                <c-icon
                    v-if="!isEditing"
                    name="trash"
                    class="hist-delete"
                    @tap.stop="editingChange"
                />
                <view v-if="isEditing" class="hist-action c-font-13">
                    <text class="c-gap-right-large" @tap="clearAll">清除全部</text>
                    <text @tap.stop="editingChange">完成</text>
                </view>
            </view>
            <view class="hist-cont">
                <view
                    v-for="(item, index) in hist"
                    :key="index"
                    class="hist-item c-font-15 c-gap-right"
                    @tap.stop="onQueryTap(item, 'history')"
                >
                    <text class="c-line-clamp1">{{ item }}</text>
                    <c-icon
                        v-if="isEditing"
                        name="close-circle-solid"
                        class="hist-item-icon c-color-gray"
                        @tap.stop="deleteHist(index)"
                    />
                </view>
            </view>
        </view>
        <view v-if="hot" class="hot">
            <view class="hot-tit c-gap-inner-bottom c-font-big-less">
                <text class="hot-tit-text">{{ hot.title }}</text>
            </view>
            <view class="hot-cont">
                <view
                    v-for="(item, index) in hot.list"
                    :key="index"
                    class="hot-item c-font-15 c-gap-right"
                    @tap="onQueryTap(item, 'hot')"
                >
                    <text class="c-line-clamp1">{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 搜索历史、热门搜索
 * @displayName SearchHistory plm搜索历史
 * @author shizhongwei02
 * @categories 业务组件
 * @tags [component]
 */

import CIcon from '@baidu/med-ui/components/Icon/Icon';
import searchHist from '@utils/search-hist';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        /**
         * 热门推荐
         */
        hot: {
            type: Object,
            default: () => ({
                title: '热门搜索',
                list: []
            })
        },
        /**
         * 顶部高度
         */
        topHeight: {
            type: Number,
            default: 0
        },
        /**
         * 是否更新
         */
        updateHist: {
            type: Boolean
        }
    },
    data() {
        return {
            isEditing: false,
            hist: []
        };
    },
    watch: {
        updateHist() {
            this.getHist();
        }
    },
    created() {
        this.getHist();
    },
    methods: {
        getHist() {
            searchHist.get('plm-hist').then(res => {
                this.hist = res || [];
            });
        },
        editingChange() {
            this.isEditing = !this.isEditing;
        },
        clearAll() {
            searchHist.delete(-1, 'plm-hist').then(res => {
                this.hist = [];
            });
        },
        deleteHist(index) {
            searchHist.delete(index, 'plm-hist').then(res => {
                this.hist.splice(index, 1);
            });
        },
        onQueryTap(data, type) {
            /**
             * 点击query
             *
             * @event click
             * @property {object} data 当前传入的search数据
             * @property {string} type 类型
             */
            this.$emit('onQueryTap', data, type);
        }
    }
};
</script>

<style lang="less" scoped>
.search-history {
    background:#f5f5f5;
    padding: .15rem .17rem;
    .hist {
        padding-bottom: .15rem;
    }
    .hist-tit, .hot-tit {
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hot-tit-text, .hist-tit-text {
        font-weight: 600;
    }
    .hist-cont, .hot-cont {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    .hist-item, .hot-item {
        box-sizing: border-box;
        position: relative;
        margin-bottom: .1rem;
        border-radius: 19px;
        padding: .06rem .2rem .05rem .2rem;
        max-width: calc(50% - 20px);
        background: #fff;
        text-align: center;
        color: #333;
    }
    .hist-item-icon {
        position: absolute;
        top: -8px;
        right: 0px;
        font-size: 18px;
    }
    
}
</style>
