<template>
  <ai-list class="AppReportServe" v-if="showList">
    <template slot="title">
      <ai-title title="报到服务" :isShowBottomBorder="false"> </ai-title>
    </template>

    <template slot="tabs">
      <el-tabs v-model="currIndex">
        <el-tab-pane v-for="(tab, i) in tabs" :key="i" :label="tab.label" :name="String(i)">
          <component :is="tab.comp" v-if="currIndex === String(i)" :ref="currIndex" :instance="instance" :dict="dict" @change="changeDetail"></component>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>

  <component v-else @change="changeDetail" :is="componentName" :params="params" :instance="instance" :dict="dict"></component>
</template>

<script>
import ActiveList from './components/ActiveList.vue'
import ActiveAdd from './components/ActiveAdd.vue'
import ActiveEdit from './components/ActiveEdit.vue'
import ActiveDetail from './components/ActiveDetail.vue'
import DataList from './components/DataList.vue'

export default {
  label: '报到服务',
  name: 'AppReportServe',
  // 组件
  components: {
    ActiveList,
    ActiveAdd,
    ActiveEdit,
    ActiveDetail,
    
    DataList,
  },
  props: {
    instance: Function,
    permissions: Function,
    dict: Object,
  },
  data() {
    return {
      currIndex: '0',
      showList: true,
      componentName: '',
      params: {},
    }
  },
  // 计算
  computed: {
    tabs() {
      return [
        {
          label: '活动管理',
          name: 'ActiveList',
          comp: ActiveList,
        },
        {
          label: '报到数据',
          name: 'DataList',
          comp: DataList,
        },
      ]
    },
  },
  // 监听
  watch: {},
  // 实例创建后
  created() {},
  // 实例渲染后
  mounted() {},
  // 方法
  methods: {
    changeDetail(data) {
      if (data.type === 'ActiveList') {
        this.showList = false
        this.componentName = 'ActiveList'
        this.params = data.params
      }
      if (data.type === 'ActiveAdd') {
        this.showList = false
        this.componentName = 'ActiveAdd'
        this.params = data.params
      }

      if (data.type === 'ActiveEdit') {
        this.showList = false
        this.componentName = 'ActiveEdit'
        this.params = data.params
      }
      if (data.type === 'ActiveDetail') {
        this.showList = false
        this.componentName = 'ActiveDetail'
        this.params = data.params
      }

      if (data.type === 'DataList') {
        this.showList = false
        this.componentName = 'DataList'
        this.params = data.params
      }

      if (data.type === 'list') {
        this.showList = true
        this.$nextTick(() => {
          // if (data.isRefresh) {
          // }
        })
      }
    },
  },
}
</script>

<style lang="scss">
.AppReportServe {
  width: 100%;
  height: 100%;
}
</style>
