<template>
    <view class="search-history" :style="{top: (topHeight || 92) + 'px'}">
        <view v-if="hist.length" class="hist">
            <view class="hist-tit c-gap-inner-bottom c-font-15">
                <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"
                    :style="{'margin-right': (index + 1) % 3 !== 0 ? '.1rem' : 0}"
                    @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 && hotSearchSwitch"
            class="hot coop-hide-element"
        >
            <!-- 热搜框 -->
            <view class="hot-tit c-gap-inner-bottom c-font-15">
                <text class="hot-tit-text">{{ hot.title }}</text>
            </view>
            <view class="hot-cont">
                <view
                    v-for="(item, index) in hot.item"
                    :key="index"
                    class="hot-item c-font-15 c-line-clamp1"
                    @tap.stop="onQueryTap(item.word, 'hot' + index, item)"
                >
                    <text v-if="item.word" class="hot-item-index">{{ index + 1 }}</text>
                    <text v-if="item.word" class="hot-item-text c-line-clamp1 ">{{ item.word }}</text>
                    <image
                        v-if="item.img"
                        mode="widthFix"
                        class="hot-item-operate"
                        :src="item.img"
                        lazy-load
                    />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 搜索推荐
 * @author 陈硕
 * @categories 业务组件
 * @tags [component]
 */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import searchHist from '../../utils/search-hist';
import {ubcSend } from '@utils/log';
import {navigate} from '../../utils/navigate';
export default {
    config: {
        component: true
    },
    components: {
        CIcon
    },
    props: {
        // 热门推荐
        hot: {
            type: Object,
            default: function () {
                return {
                    title: '热门搜索',
                    item: []
                };
            }
        },
        // 顶部高度
        topHeight: {
            type: Number,
            default: 0
        },
        // 是否更新
        updateHist: {
            type: Boolean
        },
        /**
         * query全数据
         */
        data: {
            'type': Object,
            'default': () => ({})
        },
        /**
         * ubc判断page
         */
        ubcByPage: {
            type: String,
            default: ''
        },
        /**
         * 热门搜索是否显示
         */
        hotSearchSwitch:{
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            isEditing: false,
            hist: [],
            dotFlag: false
        };
    },
    watch: {
        updateHist() {
            this.getHist();
        }
    },
    created() {
        this.getHist();
        
    },
    mounted() {
        this.$nextTick(function() {
            if (this.hist && !this.dotFlag && this.ubcByPage) {
                this.$emit('ydSearchViewUbc');
                this.dotFlag = true;
            }
        });
    },
    methods: {
        getHist() {
            searchHist.get().then(res => {
                this.hist = res || [];
            });
        },
        editingChange() {
            this.isEditing = !this.isEditing;
        },
        clearAll() {
            searchHist.delete().then(res => {
                this.hist = [];
            });
        },
        deleteHist(index) {
            searchHist.delete(index).then(res => {
                this.hist.splice(index, 1);
            });
        },
        onQueryTap(data, type, item) {
            ubcSend({
                type: 'clk',
                value: type === 'history' ? 'history' : 'hot',
                ext: {
                    ...this.data,
                    query: data,
                }
            });
            if (item && item.path) {
                
                if (process.env.MARS_ENV === 'h5' && item.h5_url) {
                    if (item.duWord) {
                        this.$api.setClipboardData({
                            data: item.duWord,
                            complete: () => {
                                window.location.href = item.h5_url;
                            }
                        });
                    }
                    else {
                        window.location.href = item.h5_url;
                    }
                }
                else {
                    navigate({url: item.path});
                }
                return;
            }
            /**
             * 点击query
             *
             * @event click
             * @property {object} data 当前点击数据
             * @property {string} type 类型
             */
            this.$emit('onQueryTap', data, type);
        }
    }
};
</script>
<style lang="less" scoped>
.search-history {
    position:absolute;
    z-index:100;
    background:#fff;
    bottom:0;
    left: 0;
    right:0;
    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 {
        position: relative;
        margin-bottom: .1rem;
        border-radius: 19px;
        padding: 0.05rem 0;
        width: calc(33.3% - 7px);
        background: #f6f6f6;
        text-align: center;
        color: #333;
    }
    .hist-item-icon {
        position: absolute;
        top: -8px;
        right: 0px;
        font-size: 18px;
    }
    .hot-item {
        position: relative;
        width: 50%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-top: 1px solid #f1f1f1;
        padding: 11px 0 11px 0px;
        min-height: 49px;
        color: #333;
        &:nth-child(even) {
            border-left: 1px solid #f1f1f1;
            padding-left: 17px;
        }
    }
    .hot-item:nth-child(1), .hot-item:nth-child(2), .hot-item:nth-child(3) {
        .hot-item-index {
            color: #00C8C8;
        }
    }
    .hot-item-index {
        color:#555;
        display: inline-block;
        width:  18px;
    }
    .hot-item-act {
        position: absolute;
        right: 10px;
    }
    .hot-item-operate {
        width: 30px;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>
