<template>
  <tenant-page>
    <template #default="{ group }">
      <div class="l-flex__auto l-flex--col">
        <el-tabs
          v-model="active"
          class="c-tabs has-bottom-padding"
        >
          <el-tab-pane
            label="设备"
            name="Device"
          />
          <el-tab-pane
            label="产品"
            name="Product"
          />
          <el-tab-pane
            label="产品类型"
            name="ProductType"
          />
        </el-tabs>
        <component
          :is="active"
          v-if="group"
          :group="group"
        />
      </div>
    </template>
  </tenant-page>
</template>

<script>
import ProductType from './ProductType'
import Product from './Product'
import Device from './Device'

export default {
  name: 'TenantDeviceManagement',
  components: {
    ProductType,
    Product,
    Device
  },
  data () {
    return {
      active: 'Device'
    }
  }
}
</script>
