<template>
  <div class="headComponent">
    <div class="left">
      <div class="logo">
        <!-- <a href="#"><img src="../assets/portal-logo.png" alt="" /></a> -->
      </div>
      <div class="nav">
        <div
          class="title"
          :class="activePath == '/home' ? 'active' : ''"
          @click="hanldeClick('/home')"
        >
          <router-link to="/home">首 页</router-link>
        </div>
        <div class="title">
          <a @click="$emit('handleGoPage')">{{ nav.title }}</a>
        </div>
        <div
          class="title"
          :class="activePath == '/devCenter' ? 'active' : ''"
          @click="hanldeClick('/devCenter')"
        >
          <router-link to="/devCenter">开发者中心</router-link>
        </div>
      </div>
    </div>
    <div class="login">
      <!-- <el-button type="primary" @click="handleSave" v-show="editState">保存编辑</el-button>
      编辑功能：<el-switch v-model="editState" @change="handleChange">
      </el-switch> -->
      <div class="platform">
        <a href="http://116.147.3.196:8080/#/login">
          <span class="el-icon-s-platform"></span>
          使能平台
        </a>
      </div>
      <!-- <div class="loginbtn platform" v-show="activePath === '/devCenter'">
        登录
      </div>
      <el-button type="primary">{{
        activePath === "/home" ? "登录" : "注册"
      }}</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    nav: {
      type: Object,
      required: true,
    },
  },
  name: "headComponent",
  data() {
    return {
      editState: false,
      activePath: "/home",
    };
  },
  methods: {
    handleChange(data) {
      this.$store.commit("M_CHANGE_EDITSTATE", data);
    },
    hanldeClick(str) {
      this.activePath = str;
    },
    handleSave() {},
  },
  watch: {
    $route: {
      handler(newValue) {
        this.activePath = newValue.path;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.headComponent {
  height: 80px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 1200px;
  transition-property: background-color, backdrop-filter,
    -webkit-backdrop-filter;
  backdrop-filter: saturate(180%) blur(8px);

  .left {
    width: 47%;
    display: flex;
    justify-content: flex-start;

    .logo {
      height: 80px;
      padding: 0 100px 0 80px;
      a {
        height: 80px;
        line-height: 80px;
        display: block;
        font-size: 0;
        img {
          width: 90px;
          vertical-align: middle;
        }
      }
    }

    .nav {
      display: flex;
      justify-content: center;

      .title {
        height: 80px;
        line-height: 80px;
        text-align: center;
        cursor: pointer;
        color: #fff;

        a {
          display: block;
          color: #fff;
          padding: 0 30px;
        }

        &:hover {
          background: rgba($color: #1e76e0, $alpha: 0.3);
          border-bottom: 3px solid #409eff;
        }
      }

      .active {
        background: rgba($color: #1e76e0, $alpha: 0.3);
        border-bottom: 3px solid #1e76e0;
      }
    }
  }

  .login {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #fff;
    vertical-align: middle;
    line-height: 80px;
    width: 53%;

    .platform {
      line-height: 80px;
      color: #fff;
      font-size: 18px;
      vertical-align: middle;
      cursor: pointer;
      margin: 0 30px 0 10px;

      a {
        color: #fff;
        font-size: 18px;
        line-height: 80px;
        vertical-align: middle;

        &:hover {
          color: #64c1ff;
        }

        .el-icon-s-platform {
          font-size: 23px;
          display: inline-block;
          vertical-align: middle;
        }
      }

      &:hover {
        color: #64c1ff;
      }
    }

    .loginbtn {
      width: 50px;
      margin-left: 20px;

      a {
        display: block;
        color: #fff;
      }
    }

    .el-button {
      margin: 0 30px;
      padding: 10px 30px;
    }
  }
}
</style>
