<template>
  <div>
    <el-container :style="{height:height+'px'}">
      <el-header style="padding: 0;background-color: #545c64">
        <el-row>
          <el-col :span="20">
            <el-menu
                :default-active="menuDefaultActive"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="gold"
                style="height:100%"
                :router="true"
            >
              <el-menu-item index="/oscm/home" class="menu_item">
                <h1 style="color: white;text-align: center;line-height:60px">
                  采集管理平台
                </h1>
              </el-menu-item>
              <el-submenu index="/oscm/node">
                <template slot="title">
                  <span slot="title">采集节点</span>
                </template>
                <el-menu-item index="/oscm/server">云服务器</el-menu-item>
                <el-menu-item index="/oscm/project">采集引擎</el-menu-item>
              </el-submenu>
              <el-submenu index="/oscm/target">
                <template slot="title">
                  <span slot="title">采集目标</span>
                </template>
                <el-menu-item index="/oscm/target/website">网站</el-menu-item>
                <el-menu-item index="/oscm/target/social">社交帐号</el-menu-item>
                <el-menu-item index="/oscm/target/sensitive">高敏目标</el-menu-item>
                <el-menu-item index="/oscm/target/api">API</el-menu-item>
                <el-submenu index="/oscm/rules">
                  <template slot="title">
                    <span slot="title">规则模板</span>
                  </template>
                  <el-menu-item index="/oscm/rules/parser">解析模板</el-menu-item>
                  <el-menu-item index="/oscm/rules/filter">过滤配置</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="/oscm/task">
                <template slot="title">
                  <span slot="title">采集任务</span>
                </template>
                <el-menu-item index="/oscm/task/common">普通任务</el-menu-item>
                <el-menu-item index="/oscm/task/single">单站点任务</el-menu-item>
              </el-submenu>
              <el-submenu index="/oscm/settings">
                <template slot="title">
                  <span slot="title">系统管理</span>
                </template>
                <el-menu-item index="/oscm/log">运行日志</el-menu-item>
                <el-menu-item index="/oscm/data-package">数据包操作</el-menu-item>
                <el-menu-item index="/oscm/settings/wordBank">词库管理</el-menu-item>
                <el-menu-item index="/oscm/settings/metaData">元数据表格</el-menu-item>
                <el-menu-item index="/oscm/settings/metaDict">元数据字典</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
          <el-col :span="2" :offset="2">
            <el-dropdown>
              <p style="height:50px;line-height:60px;font-size:18px;color: #DCDFE6"
                 class="el-dropdown-link"><i
                  class="el-icon-user-solid"></i>{{ user.username }}</p>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native.prevent="logout()">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-main>
          <el-row>
          </el-row>
          <router-view v-if="isRouteAlive"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue'
import {mapActions, mapState, mapMutations} from 'vuex'
import {
  Menu,
  MenuItem, Submenu,
  Container,
  Aside,
  Header,
  Main,
  Row,
  Col,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Select,
  Input
} from 'element-ui';
import userApi from '../js/api/userApi';
import cookieUtil from '../util/CookieUtil'

Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Submenu)
Vue.use(Container)
Vue.use(Aside)
Vue.use(Header)
Vue.use(Main)
Vue.use(Row)
Vue.use(Col)
Vue.use(Dropdown)
Vue.use(DropdownItem)
Vue.use(DropdownMenu)
Vue.use(Select)
Vue.use(Input)
export default {
  name: 'App',
  //provide可为子组件传递变量或方法，子组件通过inject进行注入.reload可使组件刷新，需子组件主动调用
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      height: 500,
      isRouteAlive: true,
      searchKeyword: '',
      searchColumn: '',
      menuDefaultActive: '',
    }
  },
  // 在 Vue 实例中监听路由变化
  watch: {
    '$route'(to) {
      // 在这里根据路由的变化更新菜单的选中状态
      // 例如，你可以使用路由信息中的路径来判断哪个菜单项应该处于选中状态，然后更新对应的菜单项
      this.menuDefaultActive = to.path; // 将当前路由路径设置为选中的菜单项
    }
  },

  computed: {
    ...mapState({
      user: state => state.user.user
    })
  },
  components: {},
  methods: {
    reload() {
      this.isRouteAlive = false;
      this.$nextTick(function () {
        this.isRouteAlive = true;
      })
    },
    ...mapActions({
      queryMetaData: 'metadata/queryAll',
      queryCrawlNode: 'node/queryAllNodes',
      getUserInfo: 'user/getUserInfo'
    }),
    ...mapMutations({
      setUserInfo: 'user/setUser'
    }),
    logout() {
      userApi.logout((response) => {
        this.setUserInfo({});
        cookieUtil.setCookie('oscm_user', {}, 0);
        this.$router.push("/oscm/login");
        if (response.data.result) {
          console.log("out");
        }
      })
    }
  },
  mounted: function () {
    if (this.user === {}) {
      this.$router.push('/oscm/login');
      return;
    }
    this.getUserInfo();
    this.height = window.innerHeight;
    this.queryMetaData();
    this.queryCrawlNode();
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 `this` 因为当守卫执行前，组件实例还没被创建
    next(vm => {
      let pathList = to.path.split('/');
      let activeMenu = '';
      if (pathList.length < 3 || pathList[2] === undefined || pathList[2] === '') {
        activeMenu = "/oscm/overview";
      } else {
        activeMenu = to.path;
      }
      vm.menuDefaultActive = activeMenu;
    })
  },
}
</script>

<style>
* {
  margin: 0;
}

.el-dropdown-link:hover {
  cursor: pointer;
}

.el-menu-item span {
  margin-left: 15px;
}


.el-drawer.rtl {
  overflow: scroll;
}

.content-img {
  text-align: center;
  width: 600px;
  clear: both;
  text-indent: 0;
  display: block;
  margin: auto;
}

.menu_item {
  /*font-size: 16px;*/
}

.menu-link {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-decoration: none;
}

.menu-link span {
  margin-left: 0;
}


</style>
