<template>
  <ai-list class="AppPartyScoreRules">
    <template slot="title">
      <ai-title title="积分规则" :isShowBottomBorder="false" :instance="instance" :isShowArea="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" :label="tab.label">
          <component :is="tab.comp" v-if="currIndex === String(i)" :ref="tab.name" :instance="instance" :dict="dict"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>
</template>

<script>
import applyForIntegral from "./components/applyForIntegral.vue"
import automaticallyAddCent from "./components/automaticallyAddCent.vue";
import { mapState } from 'vuex'

export default {
  name: 'AppPartyScoreRules',
  label: "积分规则(三涧溪)",
  components: { applyForIntegral, automaticallyAddCent},
  props: {
    instance: Function,
    dict: Object,
  },

  computed: {
    ...mapState(['user']),
    tabs() {
      return [
        {
          label: "积分申请",
          name: "applyForIntegral",
          comp: applyForIntegral,
        },
        {
          label: "自动加分",
          name: "automaticallyAddCent",
          comp: automaticallyAddCent,
        },
      ]
    }
  },
  created() {
    this.areaId = this.user.info.areaId
    this.dict.load("integralCalcType")
  },
  methods: {
    changeArea() {
      this.$nextTick(() => {
        this.$refs[this.tabs[Number(this.currIndex)].name][0].getList()
      })
    }
  },
  data() {
    return {
      activeName: "pointsDetails",
      currIndex: '0',
      areaId: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.AppPartyScoreRules {}
</style>
