<template>
  <ai-list>
    <template slot="title">
      <ai-title title="积分管理" :isShowBottomBorder="false" :instance="instance" :isShowArea="true" 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)" :bizType="tab.bizType" :ref="tab.name"
                     :areaId="areaId" :instance="instance" :dict="dict" :permissions="permissions"/>
        </el-tab-pane>
      </el-tabs>
    </template>
  </ai-list>
</template>

<script>
import pointsDeclaration from "./pointsDeclaration.vue"
import pointsDetails from "./pointsDetails.vue"
import pointsAppeal from './pointsAppeal'
import {mapState} from 'vuex'
import scoreChange from "./scoreChange";

export default {
    name: 'AppScoreManage',
    label: "积分管理",
    components: {pointsDeclaration, pointsDetails, pointsAppeal, scoreChange},
    props: {
      instance: Function,
      dict: Object,
      permissions: Function
    },

    computed: {
      ...mapState(['user']),
      tabs() {
        return [
          // {
          //   label: "积分申报",
          //   name: "pointsDeclaration",
          //   comp: pointsDeclaration,
          //   permission: "app_apppartyfee_record",
          //   bizType: '0'
          // },
          // { label: "积分申诉", name: "pointsAppeal", comp: pointsAppeal, permission: "app_apppartyfee_config", bizType: '1'},
          {
            label: "积分明细",
            name: "pointsDetails",
            comp: pointsDetails,
            permission: "app_apppartyfee_statistics",
            bizType: '2'
          },
          {
            label: "积分调整",
            name: "scoreChange",
            comp: scoreChange,
            permission: "",
          },
        ]
      }
    },
    created() {
      this.areaId = this.user.info.areaId
    },
    methods: {
      changeArea() {
        this.$nextTick(() => {
          this.$refs[this.tabs[Number(this.currIndex)].name][0].getList()
        })
      }
    },
    data() {
      return {
        activeName: "pointsDeclaration",
        currIndex: '0',
        areaId: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
