<template>
  <div class="AppScoreSupermarket">
    <ai-list v-show="!detailShow">
      <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" :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" :info="info" @goBack="goBack" :instance="instance" :dict="dict" :permissions="permissions"/>
  </div>
</template>

<script>
import orderManagement from './orderManagement'
import goodsManagement from './goodsManagement'
import storeManagement from './storeManagement'
import addOrderDetail from './components/addOrder'
import addGoods from './components/addGoods'
import {mapState} from 'vuex'

export default {
  name: "AppScoreSupermarket",
  label: "积分超市",
  components: {orderManagement, goodsManagement, storeManagement, addOrderDetail, addGoods},
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },

  computed: {
    tabs() {
      // .filter(item => {
      //   return this.$permissions(item.permission)
      // })

      return [
        {
          label: "订单管理",
          name: "orderManagement",
          comp: orderManagement,
          detail: addOrderDetail,
          permission: "app_apppartyfee_record"
        },
        {
          label: "商品管理",
          name: "goodsManagement",
          comp: goodsManagement,
          detail: addGoods,
          permission: "app_apppartyfee_config"
        },
        {
          label: "店铺管理",
          name: "storeManagement",
          comp: storeManagement,
          detail: '',
          permission: "app_apppartyfee_statistics"
        },
      ]
    },
    ...mapState(['user']),
    currDet() {
      return this.tabs[Number(this.currIndex)].detail;
    }
  },
  created() {
    this.areaId = this.user.info.areaId;
  },
  data() {
    return {
      activeName: "orderManagement",
      currIndex: 0,
      areaId: '',
      detailShow: false,
      info: {}
    }
  },
  methods: {
    goBack() {
      this.detailShow = false;
      this.$nextTick(() => {
        this.$refs[this.tabs[Number(this.currIndex)].name][0].getList();
      })
    },
    showDetail(obj) {
      this.info = {...obj};
      this.detailShow = true;
    },
    changeArea() {
      this.$nextTick(() => {
        if (this.currIndex == 0) this.$refs[this.tabs[Number(this.currIndex)].name][0].getShopList();
        if (this.currIndex == 1) this.$refs[this.tabs[Number(this.currIndex)].name][0].updateList();
        this.$refs[this.tabs[Number(this.currIndex)].name][0].getList();
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.AppScoreSupermarket {
  width: 100%;
  height: 100%;
}
</style>
