<template>
  <div id="app">
    <div class="dinbu">
      <img src="../assets/wuliu-img.png" class="wuliu" alt="" />
      <div class="yunshu">
        <div :class="active == 1 ? 'active' : 'yun'" @click="yuns(1)">
          运输监管
          <div class="gexian" v-if="active == 1"></div>
        </div>
        <div :class="active == 2 ? 'active' : 'yun'" @click="yuns(2)">
          运输管理
          <div class="gexian" v-if="active == 2"></div>
        </div>
        <div :class="active == 3 ? 'active' : 'yun'" @click="yuns(3)">
          主数据管理
          <div class="gexian" v-if="active == 3"></div>
        </div>
        <div :class="active == 4 ? 'active' : 'yun'" @click="yuns(4)">
          系统管理
          <div class="gexian" v-if="active == 4"></div>
        </div>
      </div>
      <div class="touxian">
        <div class="tou-img" @click="showPopup">
          <img src="../assets/touxian.png" class="touxina" alt="" />
          <div class="name">连义昌</div>
        </div>
        <div class="yous" @click="news">
          <img src="../assets/youixna.png" class="you-img" alt="" />
          <div class="dian"></div>
        </div>
        <div class="tuichus" @click="backuser">退出登录</div>
      </div>
    </div>
    <popup v-show="isPopupVisible" @close="closePopup">

    </popup>

    <router-view />
  </div>
</template>

<script>
  import popup from "./popup";
  export default {
    name: "App",
    props: ["actives"],
    components: {
      popup,
    },
    data() {
      return {
        active: "1",
        dialogVisibleyu: false,
        isPopupVisible: false,
      };
    },
    mounted() {
      this.active = this.actives;
      console.log(this.actives);
    },
    methods: {
      //tab切换
      yuns(index) {
        console.log(index)
        this.active = index;
        if (this.active == 1) {
          this.$router.push("./home");
        } else if (this.active == 2) {
          this.$router.push("./transport");
        } else if (this.active == 3) {
          this.$router.push("./zhushu");
        } else if (this.active == 4) {
          this.$router.push("./xitons");
        }
      },
      //消息
      news() {
        this.$router.push("./xiaoxi?ac=" + this.active);
      },
      showPopup() {
        this.isPopupVisible = true;
      },
      closePopup() {
        this.isPopupVisible = false;
      },
      // 退出登录
      backuser() {
        let that = this;
        var url = "/api/auth/logout";
        let params = {};
        that.$axios
          .delete(url, params)
          .then(function(res) {
            console.log(res);
            that.$message({
              message: "成功",
              type: "success",
            });
            that.$router.replace({
              path: '/'
            })
          })
          .catch(function(err) {
            console.log(err);
          })
      }
    },
  };
</script>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .box-a .el-dialog {
    width: 100px !important;
    height: 100px !important;
  }

  .el-dialog__body {
    overflow: auto;
    color: #666666;
  }

  .el-dialog {
    margin-top: 0 !important;
    border-radius: 10px;
  }

  .el-button.is-round {
    border-radius: 20px;
    padding: 12px 51px;
  }
</style>
<style scoped>
  @import "../css/app.css";
</style>