<template>
  <div class="aos-dynamic-alive" :id="id">
    <div v-for="item in paramsList[id]" :key="JSON.stringify(item)" :class="{ height100: $_.isEqual(item, currentParams)}">
      <slot v-bind:activeParams="item"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AosDynamicAlive',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      paramsList: {},
      currentParams: ''
    }
  },
  computed: {
    routeParams () {
      return this.$route.params
    }
  },
  watch: {
    routeParams: {
      handler: function (val, oldVal) {
        if (val) {
          this.currentParams = val
        }
        if (val && !this.$_.isEqual(val, oldVal)) {
          this.setParamList(val)
        }
      },
      immediate: true
    }
  },
  created () {
    this.$eventBus.on('removeKeepAliveTab', this.removeKeepAliveTabs)
  },
  methods: {
    removeKeepAliveTabs (tabData) {
      const tabName = tabData.name
      if (tabName && this.paramsList[tabName]) {
        const tabParamsList  = this.paramsList[tabName]
        for (let index = 0; index < tabParamsList.length; index++) {
          const element = tabParamsList[index];
          if (this.$_.isEqual(element, tabData.params)) {
            tabParamsList.splice(index, 1)
            break
          }
        }
      }
    },
    setParamList (val) {
      let flag = true
      if (!this.paramsList[this.id]) {
        this.paramsList[this.id] = []
      }
      const currentParamsList = this.paramsList[this.id]
      for (let index = 0; index < currentParamsList.length; index++) {
        const element = currentParamsList[index];
        if (this.$_.isEqual(val, element)) {
          flag = false
          break
        }
      }
      if (flag && this.id === this.$route.name) {
        currentParamsList.push(val)
      }
    }
  }
}
</script>
