<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="轮播图区" name="first" />
      <el-tab-pane label="主菜单区" name="second" />
      <el-tab-pane label="专题活动" name="three" />
      <template v-if="activeName === 'first'">
        <banner v-if="activeName === 'first'" />
      </template>
      <template v-if="activeName === 'second'">
        <category v-if="activeName === 'second'" />
      </template>
      <template v-if="activeName === 'three'">
        <activity v-if="activeName === 'three'" />
      </template>
    </el-tabs>
  </div>
</template>
<script>
import banner from './components/banner/index.vue'
import category from './components/category/index.vue'
import activity from './components/special/index.vue'

export default {
  name: 'CampaignList',
  components: {
    banner,
    category,
    activity
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  computed: {

  },
  created() {
    const map = {
      1: 'first',
      2: 'second',
      3: 'three'
    }
    if (this.$route.query.type) {
      this.activeName = map[this.$route.query.type]
    }
  },
  methods: {
    // tab切换
    handleClick(tab, event) {
      console.log('name', tab.name)
    }
  }
}
</script>

<style>
.el-span-zero {
  color: #0bd81c;
}
.el-span-one {
  color: #ff353f;
}
</style>
