<template>
    <div class="search-item">
        <el-popover
                placement="bottom"
                width="275"
                ref="popover"
                trigger="focus"
                :visible-arrow="false"
                style="padding-top: 0"
                v-model="visible"
                >
            <div class="search-content">
                <div class="search-his">
                    <div>
                        <span class="title">搜索历史</span>
                        <span class="clear" @click="clearHistory" v-show="this.$cookie.get('username')!=null"><i class="el-icon-circle-close"></i>清空</span>
                    </div>
                    <div v-if="historySearch!==null" v-show="this.$cookie.get('username')!=null">
                        <el-tag
                            v-if="historySearch.length!==0"
                            v-for="(tag,index) in historySearch"
                            :key="index"
                            size="small"
                            closable
                            @close="handleClose(tag)"
                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
                            @click="handleSearch(tag)"
                        >
                            {{ tag }}
                        </el-tag>
                    </div>
                    <div v-if="historySearch==null" v-show="this.$cookie.get('username')!=null">
                        <el-empty description="暂无搜索历史" :image-size="20"></el-empty>
                    </div>
                    <div
                        v-show="this.$cookie.get('username')==null">
                        <span style="color: #9ca3af;font-size: 15px">你还没有登录哦~</span>
                    </div>

                </div>
                <div style="margin-top: 10px">
                    <div style="display: flex;flex-direction: row;justify-content: space-between">
                        <span class="title">搜索结果: {{JSON.parse(JSON.stringify(searchResults)).length}} 条</span>
                        <span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
                    </div>
                    <div>
                        <el-scrollbar style="height: 50vh" v-show="JSON.parse(JSON.stringify(searchResults)).length!==0">
                            <div  v-for="(item,index) in JSON.parse(JSON.stringify(searchResults))" :key="index">
                                <SearchResultsList  :search-result="item"></SearchResultsList>
                            </div>
                        </el-scrollbar>
                        <el-empty v-show="JSON.parse(JSON.stringify(searchResults)).length===0" description="暂无搜索结果" :image-size="50"></el-empty>
                    </div>

                </div>
            </div>


        </el-popover>



        <el-input
                size="medium"
                :placeholder="tipsWord"
                style="width: 20vw"
                clearable
                v-popover:popover
                @keyup.enter.native="searchByInput"
                v-model="search">
            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchByInput"></i>
        </el-input>
    </div>
</template>


<script>
import axios from "axios";
import Vue from "vue";
import SearchResultsList from "@/components/Home/SearchResultsList.vue";

export default {
    components: {SearchResultsList},
    data() {
        return {

            visible: false,
            isMouseOver: false,
            search: '',
            tipsWord: '',
            historySearch: [],
            searchResults:[],
            update:true,
        }
    },

    methods: {
        handleSearch(word) {
            this.search = word
            this.searchByInput()
        },
        clearSearchResults(){
          this.searchResults=[];
        },
        clearHistory() {
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                if (res.data.code === 200) {
                    Vue.prototype.$notify({
                        title: '成功',
                        message: ('i', {style: 'color: teal'}, res.data.msg),
                        type: 'success',
                        offset: 50
                    });
                    setTimeout(()=>{
                        that.gethistorySearch();
                    })
                } else {
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                }
            });
        },
        // searchRequest() {
        //     const params = {
        //         word: this.search || this.tipsWord
        //     }
        //     const queryString = new URLSearchParams(params).toString();
        //     const url = `${window.location.origin}/video/search?${queryString}`;
        //     window.open(url, '_blank');
        // },
        gethistorySearch(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.historySearch=res.data;

            });
        },
        handleClose(tag){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
                // URL 中的查询参数
                params: {
                    tag:tag
                }
            }).then((res)=>{
                if(res.data.code===200){
                    Vue.prototype.$notify({
                        title: '成功',
                        message: ('i', {style: 'color: teal'}, res.data.msg),
                        type: 'success',
                        offset: 50
                    });
                    setTimeout(()=>{
                        that.gethistorySearch();
                    })
                }else{
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                }
            });
        },
        searchByInput(){
            var that=this;
            if(this.search!==''){
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/selectByInput',
                    // URL 中的查询参数
                    params: {
                        content:this.search,
                    }
                }).then((res)=>{
                    // JSON.parse(JSON.stringify(res.data));
                    that.searchResults= JSON.parse(JSON.stringify(res.data));
                    if(res.data.code===500){
                        Vue.prototype.$notify.error({
                            title: '错误',
                            message: res.data.msg,
                            offset: 50
                        });
                        that.searchResults=[];
                        that.reload();
                    }else{
                        Vue.prototype.$notify({
                            title: '成功',
                            message: ('i', {style: 'color: teal'}, "查询成功"),
                            type:"success",
                            offset: 50
                        });
                        setTimeout(() => {
                            that.visible = true;
                            that.gethistorySearch();
                        }, 200);
                    }
                });
            }else{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: '请输入搜索内容',
                    offset: 50
                });
            }


        },
        reload() {
            // 移除组件
            this.update = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    },
    mounted() {
        this.tipsWord = "搜索开源项目";
        this.gethistorySearch();

    },

};
</script>

<style scoped>
.search-item ::v-deep .el-input .el-input__inner {
    border-radius: 8px !important;
}

.search-content span.title {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
}

.search-content .search-his span.clear {
    float: right;
    cursor: pointer;
}

.search-content .search-his span.clear:hover {
    color: #ec0014;
}
.clear{
    cursor: pointer;
}
.clear:hover{
    color: #ec0014;
}
.search-content .mt {
    margin-top: 10px;
}

.search-content .search-hot {
    width: 100%;
}

.search-content .search-hot ul.hot-list {
    width: 100%;
    display: flex;
    padding: 0;
    flex-wrap: wrap;
    margin-top: 5px;
    list-style: none;
}

.search-content .search-hot ul.hot-list li.hot-item {
    width: 50%;
    height: 30px;
    font-size: 15px;
    display: flex;
    cursor: pointer;
    align-items: center;
}

.search-content .search-hot ul.hot-list li.hot-item span:first-child {
    width: 10%;
    color: #999999;
    text-align: center;
    display: inline-block;
}

.search-content .search-hot ul.hot-list li.hot-item span:last-child {
    margin-left: 5px;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-content .search-hot ul.hot-list li.hot-item span.top {
    color: #EA322BFF;
}

.search-content .search-hot ul.hot-list li.hot-item:hover {
    background-color: #f2f2f2;
}

</style>

