<template>
    <article v-if="allLabels && allLabels.length > 0" class="history-labels">
        <section class="history-labels-title">
            <span>{{title}}</span>
            <img v-show="showDelete" src="../../images/sousuo/recicle.png" alt="删除">
        </section>

        <section class="history-labels-item" 
            @click="searchAction"
            v-for="(item, index) in allLabels" :key="index" >
            <span class="history-labels-item-name">{{item.doctorName}}</span>
        </section>
    </article>
</template>

<script>
export default {
  name: 'HistoryLabels',
  props: {
    allLabels: {
        type: Array
    },
    title: {
        type: String,
        default: '历史搜索'
    },
    showDelete: {
        type: Boolean,
        default: true
    }
  },
  data () {
    return {
    }
  },
  mounted(){
      
  },
  methods: {
    searchAction() {
        console.log(22222)
        this.$router.push({
            path: '/result'
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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: 6;
        }
        img {
            width: px2rem(20px);
            height: px2rem(20px);
            padding: px2rem(4px);
        }
    }
    &-item {
        display: inline-flex;
        height: px2rem(30px);
        margin: px2rem(0px) px2rem(15px) 0 0;
        text-align: center;
        align-items: center;
        &-name {
            padding: px2rem(6px) px2rem(15px) px2rem(8px);
            border-radius: px2rem(15px);
            background-color: #F8F8F8;
            color: #999;
            font-size: px2rem(13px);
        }
    }
}

</style>
