<template>
  <div class="AppCommunityMember">
    <ai-list v-show="!detailShow">
      <template slot="title">
        <ai-title title="报到服务" :isShowBottomBorder="false" :instance="instance" :isShowArea="currIndex == 0 ? true : false" v-model="areaId" @change="changeArea"></ai-title>
      </template>
      <template slot="tabs">
        <el-tabs v-model="currIndex">
          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :name="String(i)" :label="tab.label">
            <component
              :is="tab.comp"
              v-if="currIndex === String(i)"
              :areaId="areaId"
              :ref="tab.name"
              @showDetail="showDetail"
              :instance="instance"
              :dict="dict"
              :permissions="permissions" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <component v-if="detailShow" :is="currDet" :areaId="areaId" :id="id" @goBack="goBack" :instance="instance" :dict="dict" :permissions="permissions"/>
  </div>
</template>

<script>
import List from './List'
import Statistics from './Statistics'
import Organization from './Organization'
import Add from './Add'
import Detail from './Detail'

import {mapState} from 'vuex'

export default {
  name: "AppCommunityMember",
  label: "在职党员社区报到",
  components: {List, Statistics, Organization, Add, Detail},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },

  computed: {
    tabs() {
      return [
        {
          label: "社区活动管理",
          name: "List",
          comp: List,
        },
        {
          label: "报到数据",
          name: "Statistics",
          comp: Statistics,
        },
        {
          label: "报到组织管理",
          name: "Organization",
          comp: Organization,
        },
      ]
    },
    ...mapState(['user']),
    currDet() {
      return this.id ? Detail : Add
    }
  },
  created() {
    this.areaId = this.user.info.areaId;
  },
  data() {
    return {
      activeName: "List",
      currIndex: 0,
      areaId: '',
      detailShow: false,
      id: ''
    }
  },
  methods: {
    goBack() {
      this.detailShow = false;
      this.$nextTick(() => {
        this.$refs.List[0].getListInit()
      })
    },
    showDetail(id) {
      this.id = id || ''
      this.detailShow = true
    },
    changeArea() {
      this.$nextTick(() => {
        this.$refs.List[0].getListInit()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.AppCommunityMember {
  width: 100%;
  height: 100%;
}
</style>
