<template>
  <el-tabs v-model="activeName">
    <!-- 1好办后台2应用后台3好办小程序4小程序应用 -->
    <el-tab-pane label="好办后台" name="first" lazy>
      <operation-table app-type="1"></operation-table>
    </el-tab-pane>
    <el-tab-pane label="应用后台" name="second" lazy>
      <operation-table app-type="2"></operation-table>
    </el-tab-pane>
    <el-tab-pane label="好办小程序" name="third" lazy>
      <operation-table app-type="3"></operation-table>
    </el-tab-pane>
    <el-tab-pane label="好办小程序应用" name="fourth" lazy>
      <operation-table app-type="4"></operation-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import OperationTable from './operation-list/operation-table.vue';
export default {
  name: 'OperationList',
  components: { OperationTable },
  data() {
    return {
      activeName: 'first'
    }
  },
  created() {
    const { type } = this.$route.query;
    const tabs = ['', 'first', 'second', 'third', 'fourth'];
    this.activeName = tabs[type > 0 && type < 5 ? type : 1] ;
  }
}
</script>

<style lang="less" scoped>
/deep/.el-tabs__header {
  padding-top: 10px;
  margin-bottom: 0;
}
</style>
