<template>
  <div class="render-container">
    <back-button style="margin:0 10px"></back-button>
    <div class="flex tabs">
      <div
        @click="chooseTab = item.name"
        class="tabs-title"
        v-for="item in tabs"
        :class="chooseTab === item.name ? 'active' : ''"
      >
        {{ item.title }}
      </div>

      <!--主体部分-->
    </div>
    <div class="tabs-body">
      <logs v-if="chooseTab === 'logs'"></logs>
      <overview v-show="chooseTab === 'overview'"></overview>
    </div>
  </div>
</template>
<script>
import logs from '@/views/intelligent-agent/children/Logs&overview/components/logs.vue'
import overview from '@/views/intelligent-agent/children/Logs&overview/components/overview.vue'
import * as echarts from 'echarts'
export default {
  name: 'index',
  data() {
    return {
      times: '',
      tabs: [
        {
          title: '日志',
          name: 'logs'
        },
        // {
        //   title: '批注'
        // },
        {
          title: '监测',
          name: 'overview'
        }
      ],

      chooseTab: 'overview'
    }
  },
  props: {},
  watch: {},
  components: {
    logs,
    overview
  },
  filters: {},
  methods: {},
  created() {},
  mounted() {},
  computed: {}
}
</script>
<style scoped lang="scss">
@import '@/assets/sass/renderSass/theme.scss';
.tabs {
  position: relative;
  & .tabs-title {
    padding: 6px 10px;
    cursor: pointer;
    margin-right: 8px;
    &:hover {
      color: $--color-primary;
      font-weight: 600;
    }
    &.active {
      color: $--color-primary;
      border-bottom: 3px solid $--color-primary;
      font-weight: 600;
    }
  }

  &:after {
    content: '';
    clear: both;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    border-bottom: 1px solid #ebeef5;
    transform: scaleY(0.5);
  }
}
.tabs-body {
  //padding: 15px 0;
}
</style>
