<template>
  <div class="app-navigation">
    <div class="operation">
      <el-button class="el-icon-back" size="mini" @click="clickBack">
        {{ $t('pages.payApplication.action.back') }}
      </el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="item in tables"
        :key="item.component"
        :label="getTabTitle(item)"
        :name="item.component"
      >
        <span slot="label"><i :class="item.icon" /> {{ getTabTitle(item) }}</span>
      </el-tab-pane>
      <component :is="activeName" :app-info="appInfo" />
    </el-tabs>
  </div>
</template>
<script>
import Commodity from './commodity'
import CommodityV2 from './commodity-v2'
import OrderManager from './order-manager'
export default {
  name: 'AppNavigation',
  components: { Commodity, CommodityV2, OrderManager },
  props: {
    appInfo: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      activeName: 'Commodity',
      tables: [
        {
          titleKey: 'pages.payApplication.tabs.commodity',
          icon: 'el-icon-shopping-bag-1',
          component: 'Commodity'
        },
        {
          titleKey: 'pages.payApplication.tabs.commodityV2',
          icon: 'el-icon-shopping-bag-1',
          component: 'CommodityV2'
        }
        // {
        //   title: '订单管理',
        //   icon: 'el-icon-document',
        //   component: 'OrderManager'
        // }
      ]
    }
  },
  methods: {
    getTabTitle(item) {
      return item.titleKey ? this.$t(item.titleKey) : item.title
    },
    clickBack() {
      this.$emit('back')
    }
  }
}
</script>
