<template>
    <view class="search-sug" :style="{'top': topHeight + 48 + 'px'}">
        <view class="sug-content">
            <view
                v-for="(item, index) in sugList"
                :key="index"
                class="sug-item c-font-15"
                @tap.stop="onSugTap(item.word, sugList)"
            >
                <rich-text :nodes="item.word"/>
            </view>
        </view>
        <!-- <view v-if="showNoResult" class="no-result">暂无匹配结果</view> -->
    </view>
</template>

<script>
/**
 * @file 搜索
 * @author chenshuo01
 * @categories 业务组件
 * @tags [component]
*/
import {request} from '../../utils/request';
import {ubcSend} from '@utils/log';
import {getQueryObject, throttle} from '@utils/core';

export default {
    config: {
        component: true
    },
    props: {
        /**
        * query
        */
        query: {
            type: String,
            default: ''
        },
        /**
        * api接口
        */
        sugApi: {
            type: String,
            default: ''
        },
        /**
        * 头部高度
        */
        topHeight: {
            type: Number,
            default: 0
        },
        /**
         * query全数据
         */
        data: {
            'type': Object,
            'default': () => ({})
        },
    },
    data() {
        return {
            sugList: [],
            showNoResult: false
        };
    },
    watch: {
        query(New, Old) {
            this.getSugListThrottle(New);
        }
    },
    created() {
        this.getSugList(this.query);
    },
    methods: {
        getSugListThrottle: throttle(function (nval) {
            this.getSugList(nval);
        }, 200),
        getSugList(query) {
            return request({
                url: this.sugApi.split('?')[0],
                data: Object.assign({}, getQueryObject(this.sugApi), {word: query}),
                isFirstScreen: false,
                isCheckLogin: false
            }).then(res => {
                const __list = res.data && res.data.list && res.data.list.map(item => {
                    const __item = item.word.replace(/<[^>]*>(.*)<\/[^>]*>/gm, '<span style="color: #00c0c0">$1</span>');
                    return {
                        word: `<div><span class="med-icon med-icon-search c-gap-right-mini" style="color: #DDDDDD;"></span>${__item}</div>`
                    };
                }) || [];
                this.sugList = __list;
            });
        },
        onSugTap(word, list) {
            const Word = word.replace(/<[^>]*>|<\/[^>]*>/gm, '');
            /**
             * 点击query
             *
             * @event click
             * @property {string} Word query词
             * @property {string} 类型
             */
            ubcSend({
                type: 'clk',
                value: 'search_sug',
                ext: {
                    ...this.data,
                    word: Word,
                    sugList: list
                }
            });
            /**
             * query点击
             *
             * @event onQueryTap
             */
            this.$emit('onQueryTap', Word, 'sug');
        }
    }
};
</script>
<style lang="less" scoped>
.search-sug {
    z-index: 999;
    width: 100%;
    position: fixed;
    top: 48px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    .sug-content {
        padding: 0 .17rem;
    }
    .sug-item {
        padding: .1rem 0;
        border-bottom: 1px solid #f1f1f1;
        color: #151515;
        b {
            color: #00c0c0 !important;
        }
    }
    .no-result {
        padding: .1rem 0;
        text-align: center;
    }
    .icon-color {
        color: #DDDDDD;
    }
    .high-color, b {
        color: #00c0c0 !important;
    }
}
</style>
<style lang="less" target="h5" scoped>
.search-sug {
    top: 90px;
}
</style>
