<template>
  <div class="filter-search" v-if="show">
    <img src="./icon.svg"/>
    <span>{{desced}}</span>
    <i class="el-icon-circle-close" @click="close"/>
  </div>
</template>
<script>
import { errorType } from '@/views/main/constant'
import cleanDeep from 'clean-deep'
export default {
  name: 'filter-search',
  props: {
    desc: {
      type: String,
      default: '已筛选部分数据'
    },
    searchKey: {
      type: String,
      default: 'search'
    },
    keys: {
      type: Array,
      default: () => []
    },
    moreKeys: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    desced() {
      const { name } = errorType[this.$route.query.filter_type] || {}
      return name ? `仅显示: ${name}` : this.desc
    },
    hasSearch() {
      return this.$route.query[this.searchKey]
    },
    hasForm() {
      const keys = {}
      for (const item of this.keys) {
        keys[item] = this.$route.query[item]
      }
      return !!Object.keys(cleanDeep(keys)).length
    },
    show() {
      return this.hasSearch || this.hasForm
    },
  },
  methods: {
    close() {
      const keys = {}
      for (const item of [...this.keys, ...this.moreKeys]) {
        keys[item] = undefined
      }
      this.$router.replace({
        query: {
          ...this.$route.query,
          [this.searchKey]: undefined,
          filter_type: undefined,
          ...keys
        }
      })
      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>
