<template>
  <ai-list class="AppGridMemberScore">
    <template slot="title">
      <ai-title title="网格员积分" :isShowBottomBorder="false" :instance="instance" >
        <template slot="sub">
          <div>网格员可通过完成某些任务获取一定数量的积分，积分可去兑换相应的奖励。</div>
        </template>
      </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">
          <component :is="tab.comp" v-if="currIndex === String(i)" :ref="tab.name" v-on="$listeners"
                     :areaId="areaId" :instance="instance" :dict="dict" :permissions="permissions"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>
</template>

<script>
import girdScoreManage from "./gridScoreManage.vue"
import gridScoreRules from "./gridScoreRules.vue"
import gridScoreStatistics from './gridScoreStatistics.vue'
import {mapState} from 'vuex'

export default {
  name: 'AppGridMemberScore',
  label: "网格员积分",
  components: {
    girdScoreManage, 
    gridScoreRules, 
    gridScoreStatistics
  },
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },

  data() {
    return {
      currIndex: "0",
      areaId: '',
    }
  },

  computed: {
    ...mapState(['user']),
    tabs() {
      return [
        {
          label: "积分管理",
          name: "girdScoreManage",
          comp: girdScoreManage,
          permission: "",
        },
        {
          label: "积分规则",
          name: "gridScoreRules",
          comp: gridScoreRules,
          permission: "",
        },
        {
          label: "积分统计",
          name: "gridScoreStatistics",
          comp: gridScoreStatistics,
          permission: "",
        },
      ]
    }
  },
  created() {
    this.areaId = this.user.info.areaId
    // this.$dict.load("")
  },
  methods: {
    
  },
  
}
</script>

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