<template>
  <ai-list class="AppPartyScoreManage">
    <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 pointsDetails from "./pointsDetails.vue"
import { mapState } from 'vuex'
import scoreChange from "./scoreChange";

export default {
  name: 'AppPartyScoreManage',
  label: "积分维护(三涧溪)",
  components: { pointsDetails, scoreChange},
  props: {
    instance: Function,
    dict: Object,
  },

  computed: {
    ...mapState(['user']),
    tabs() {
      return [
        {
          label: "积分明细",
          name: "pointsDetails",
          comp: pointsDetails,
          permission: "app_apppartyfee_statistics",
        },
        {
          label: "积分调整",
          name: "scoreChange",
          comp: scoreChange,
          permission: "",
        },
      ]
    }
  },
  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>
.AppPartyScoreManage {}
</style>
