<template>
  <app-tabs ref="appTab" :active="activeName" :tab-list="tabList" class="flex-col fullheight" @tabClick="changeTab">
    <template #tabPane="{ item }">
      <component :is="item.name" v-if="activeName === item.name" :ref="item.name" />
    </template>
  </app-tabs>
</template>
<script>
import tableMixin from '@/mixins/table.js';
import Provider from '../arithmeticInfo/Provider/index.vue';
import Resource from '../arithmeticInfo/Resource/index.vue';
import Gound from '../arithmeticInfo/Gound/index.vue';

export default {
  components: { Provider, Resource, Gound },
  mixins: [tableMixin],
  data() {
    return {
      activeName: 'Provider',
      tabList: [
        { label: '结果指标', name: 'Provider' },
        { label: '问题指标', name: 'Resource' },
        { label: '属性指标', name: 'Gound' },
      ],
    };
  },
  created() {
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName;
    }
  },
  methods: {
    changeTab(tab) {
      this.activeName = tab.paneName;
    },
  },
};
</script>
<style scoped>
::v-deep .el-table__cell:first-child .cell {
  text-align: center;
}
</style>
