<template>
  <div class="filter-search" v-if="$route.query[this.searchKey]">
    <img src="./icon.svg"/>
    <span>{{desced}}</span>
    <i class="el-icon-circle-close" @click="close"/>
  </div>
</template>
<script>
import { errorType } from '@/views/main/constant'
export default {
  name: 'filter-search',
  props: {
    desc: {
      type: String,
      default: '已筛选部分数据'
    },
    searchKey: {
      type: String,
      default: 'search'
    }
  },
  computed: {
    desced() {
      const { name } = errorType[this.$route.query.filter_type] || {}
      return name ? `仅显示: ${name}` : this.desc
    }
  },
  methods: {
    close() {
      this.$router.replace({
        query: {
          ...this.$route.query,
          [this.searchKey]: undefined,
          filter_type: undefined,
        }
      })
      this.$emit('reload')
    }
  }
}
</script>
<style lang="less" scoped>
  .filter-search{
    font-size: 14px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #e6a23c;
    >img{
      width: 20px;
      height: auto;
    }
    >span{
      margin: 0 6px
    }
    >i{
      font-size: 16px;
    }
  }
</style>
