<!--
 * @Description: 业务日志页面
 * @Author: liusheng
 * @Date: 2021-01-17 22:43:52
-->
<template>
  <div class="body">
    <el-tabs class="tab-header" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="app in bizAppList" :key="app.id" :label="app.name" :name="app.id">
      </el-tab-pane>
      <biz-data-panel :curApp="bizAppList[activeIndex]" />
    </el-tabs>
  </div>
</template>

<script>
import BizDataPanel from "./BizDataPanel.vue";

export default {
  name: 'BizData',
  components: { 
     'biz-data-panel': BizDataPanel,
  },

  data() {
    return {
      bizAppList: [],
      activeIndex: 0,
      activeName: ''
    }
  },

  methods: {
    handleClick(tab, _event) {
      this.activeIndex = tab.index;
      this.activeName = this.bizAppList[this.activeIndex].id;
    }
  },
  
  mounted() {
    this.appAxios("GET", this.commonUrl.URL_LIST_APPLICATIONS).then(result => {
      if (result != null) {
        this.bizAppList = result.data;
        this.activeIndex = this.bizAppList.length - 1;   //管理端
        this.activeName = this.bizAppList[this.activeIndex].id;
      }
    })
  }
}
</script>

<style scoped>
.body {
  margin: 0 20px;
  text-align: center;
  border: solid 0px;
}
.tab-header {
  margin: 0 20px;
}
</style>