<template>
  <el-row
    type="flex"
    class="container"
    justify="space-between"
  >

    <!-- 左边路由导航 -->
    <el-col
      :span="4"
      class="menu-left"
    >
      <el-row>
        <el-col
          :span="24"
          class="logo-col"
        >
          <div class="logo"></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          class="title-col"
        >
          <div class="title">旅游大数据上传后台</div>
        </el-col>
      </el-row>
      <!-- 路由选项 -->
      <el-row class="menu-row">
        <el-col :span="24">
          <el-menu
            router
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#1D3251"
            text-color="#fff"
            active-text-color="#fff"
          >
            <router-link to="consumption">
              <el-menu-item index="/travel/index/consumption">
                <i class="el-icon-xfzb"></i>
                <span slot="title">消费占比</span>
              </el-menu-item>
            </router-link>

            <router-link to="eventPlanning">
              <el-menu-item index="/travel/index/eventPlanning">
                <i class="el-icon-hdch"></i>
                <span slot="title">活动策划</span>
              </el-menu-item>
            </router-link>

            <router-link to="newsFocus">
              <el-menu-item index="/travel/index/newsFocus">
                <i class="el-icon-xwjj"></i>
                <span slot="title">新闻聚焦</span>
              </el-menu-item>
            </router-link>

            <router-link to="peopleCoefficient">
              <el-menu-item index="/travel/index/peopleCoefficient">
                <i class="el-icon-rcxs"></i>
                <span slot="title">人次系数</span>
              </el-menu-item>
            </router-link>

            <router-link to="serve">
              <el-menu-item index="/travel/index/serve">
                <i class="el-icon-zhfw"></i>
                <span slot="title">智慧服务</span>
              </el-menu-item>
            </router-link>

            <router-link to="earlyWarning">
              <el-menu-item index="/travel/index/earlyWarning">
                <i class="el-icon-lyrs"></i>
                <span slot="title">旅游人数预警</span>
              </el-menu-item>
            </router-link>

            <router-link to="form">
              <el-menu-item index="/travel/index/form">
                <i class="el-icon-bb"></i>
                <span slot="title">报表</span>
              </el-menu-item>
            </router-link>

          </el-menu>
        </el-col>
      </el-row>
      <div class="diwen"></div>
    </el-col>

    <!-- 右边展示内容路由导航 -->
    <el-col :span="20">
      <el-row>
        <el-col
          :span="24"
          class="right-top"
        >
          <div class="wecome-text">{{ userName }} 您好，欢迎登陆！</div>
          <div class="right-items">
            <div><a
                href="http://58.17.42.179:90/travel-explain"
                target="_blank"
              >帮助文档</a></div>
            <div class="tx"></div>
            <div class="shuxian"></div>
            <div
              class="logout-btn"
              @click="logout"
            ></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          class="right-main"
        >
          <router-view @sonFun="indexFun"></router-view>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      userName: "",
      unic: "",
    };
  },
  created() {
    var statue = sessionStorage.getItem("uname");
    var token = sessionStorage.getItem("token");
    var unic = sessionStorage.getItem("unic");
    if (
      !statue ||
      typeof statue == "undefined" ||
      statue == "" ||
      statue == "null" ||
      !token ||
      typeof token == "undefined" ||
      token == "" ||
      token == "null"
    ) {
      this.$router.replace("/");
      return;
    } else {
      this.userName = statue;
      this.unic = unic;
    }
  },
  methods: {
    // 通过子组件更新昵称
    indexFun(param) {
      if (typeof param == "undefined" || !param) {
        this.unic = sessionStorage.getItem("unic");
      } else {
        this.unic = param;
      }
    },
    // 退出登陆
    logout() {
      var _this = this;
      this.$confirm("确认退出？", "提示", {
        confirmButtonText: "是，退出",
        cancelButtonText: "否，不退出",
        type: "warning",
      })
        .then((_) => {
          // console.log(_);
          sessionStorage.removeItem("uname");
          sessionStorage.removeItem("token");
          _this.$router.replace("/");
        })
        .catch((_) => {
          // console.log(_);
        });
    },
  },
};
</script>

<style scoped>
@import url("index.css");
</style>
