<template>
  <div id="operation-management">
    <el-tabs v-model="curOperation" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in operationList"
        :key="index"
        :label="item.name"
        :name="item.name"
      >
        <component :is="item.component"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import NewsMeeting from "@/views/systems/operation-management/components/NewsMeeting.vue"
import NoticeAnnouncement from "@/views/systems/operation-management/components/NoticeAnnouncement.vue"
import AcademicTrend from "@/views/systems/operation-management/components/AcademicTrend.vue"
import HealthPopularization from "@/views/systems/operation-management/components/HealthPopularization.vue"
import scientificResearch from "@/views/systems/operation-management/components/scientificResearch.vue"
export default {
  components: {
    NewsMeeting,
    NoticeAnnouncement,
    AcademicTrend,
    HealthPopularization,
    scientificResearch,
  },
  data() {
    return {
      curOperation: "新闻会议",
      operationList: [
        {
          name: "新闻会议",
          component: "NewsMeeting",
        },
        {
          name: "通知公告",
          component: "NoticeAnnouncement",
        },
        {
          name: "学术动态",
          component: "AcademicTrend",
        },
        {
          name: "健康科普",
          component: "HealthPopularization",
        },
        {
          name: "科学研究",
          component: "scientificResearch",
        },
      ],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
  },
}
</script>
<style lang="scss" scoped>
#operation-management {
  padding: 20px;
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #fff;
  }
}
</style>