<template>
    <article v-if="allLabels && allLabels.length > 0" class="history-labels">
        <section class="history-labels-title">
            <span>{{title}}</span>
            <span v-show="showDelete" class="history-labels-title-all">
                <span @click="showConfirm=true">全部删除</span><span>|</span><span @click="toggleDelete">取消</span>
            </span>
            <img @click="toggleDelete" v-show="!showDelete" src="../../images/sousuo/recicle.png" alt="删除">
        </section>

        <section class="history-labels-item" 
            @click="searchAction(item.keyword)"
            v-for="(item, index) in allLabels" :key="index" >
            <span class="history-labels-item-name">
                <span>{{item.keyword}}</span>
                <img @click="deleteLabels(false, index)" v-show="showDelete" 
                    src="../../images/sousuo/delete.png" alt=""
                    >
            </span>
        </section>
        <ConfirmTip v-show="showConfirm" @cancle="showConfirm=false" @confirm="confirm"/>
    </article>
</template>

<script>
import ConfirmTip from '@/components/common/confirm-tip'
export default {
  name: 'HistoryLabels',
  props: {
    // allLabels: {
    //     type: Array
    // },
    title: {
        type: String,
        default: '历史搜索'
    }
  },
  components: {
      ConfirmTip
  },
  data () {
    return {
        allLabels: [],
        showDelete: false,
        showConfirm: false
    }
  },
  mounted(){
      this.getData()
  },
  methods: {
    searchAction(searchText) {
        if(this.showDelete) return
        this.$router.push({
            path: '/result',
            query: {
                searchText: searchText
            }
        })
    },
    // 获取历史搜索
    getData() {
        let _this = this,
            para = {
                token: _this.token,
                setEntry: 'headers'
            }
        let url = 'contents/searchHistory/listHistory'
        this.GET(url, para).then(res => {
            if (res.code == '000000') {
                this.allLabels = res.data.list
                console.log(res)
            }
        })
    },

    // 删除关键词
    deleteLabels(isAll, index=0, length=1) {
        let _this = this,
            para = {
                token: _this.token,
                setEntry: 'headers',
                keywordIds: []
            };
        let url = 'contents/searchHistory/deleteHistory'
        if (isAll) {
            para.keywordIds = this.allLabels.map(element => {
                return element.id
            });
        } else {
            para.keywordIds.push(this.allLabels[index].id)
        }

        this.POST(url, para).then(res => {
            if (res.code == '000000') {
                // this.allLabels = res.data.list
                this.allLabels.splice(index, para.keywordIds.length)
            }
        })
    },

    confirm() {
        this.deleteLabels(true)
    },
    toggleDelete() {
        this.showDelete = !this.showDelete
    }
    
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';
.history-labels {
    width: 100%;
    padding: 0 px2rem(15px) 0;
    margin-bottom: px2rem(6px);
    background-color: #fff;
    &-title {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        span {
            font-size: px2rem(12px);
            color: #666;
        }
        img {
            width: px2rem(20px);
            height: px2rem(20px);
            padding: px2rem(4px);
        }
        &-all {
            span {
                padding: px2rem(4px) px2rem(5px);
                font-size: px2rem(12px);
                color: #999;
            }
        }
    }
    &-item {
        display: inline-flex;
        height: px2rem(30px);
        margin: px2rem(0px) px2rem(15px) 0 0;
        text-align: center;
        align-items: center;
        &-name {
            position: relative;
            top: 0;
            left: 0;
            padding: px2rem(6px) px2rem(15px) px2rem(8px);
            border-radius: px2rem(15px);
            background-color: #F8F8F8;
            color: #999;
            font-size: px2rem(13px);
            img {
                position: absolute;
                top: px2rem(-10px);
                right: px2rem(-10px);
                width: px2rem(20px);
                height: px2rem(20px);
                padding: px2rem(4px);
            }
        }
    }
}

</style>
