<template>
  <header class="header">
    <div class="container clearfix">
      <img
        style="cursor: pointer; width: 162px; height: 33px"
        v-if="header.companyLogo"
        :src="$tools.splitImgHost(header.companyLogo)"
        alt=""
        @click="go('/')"
      />
      <h1 class="logo" v-else @click="go('/')"></h1>
      <nav class="nav">
        <ul class="list">
          <li v-for="(item, index) in showNav(header.Nav)" :key="index">
            <a v-if="item.name == '首页'" @click="go('/index')">首页</a>
            <a
              v-if="item.name == '走进祥粤'"
              target="view_window"
              href="https://www.xyyxt.net/abount"
              >走进祥粤</a
            >
            <a v-if="item.name == '课程'" @click="go('/course-list')">课程</a>
            <a v-if="item.name == '题库'" @click="go('/bank-list')">题库</a>
          </li>
        </ul>
      </nav>
      <div class="search">
        <div class="search__select">
          <select>
            <option value="1" selected>课程</option>
            <option value="2">题库</option>
          </select>
        </div>
        <div class="search__input">
          <input type="text" />
        </div>
        <div class="search__btn">搜索</div>
      </div>

      <div class="userinfo">
        <a class="msg" @click="go('/person-center/my-message')">
          <i class="pi"></i>
          <i class="el-icon-message-solid icon"></i>
        </a>
        <a class="name" @click="go('/person-center')">
          <img src="@/assets/ava.png" alt="" />
          <span>倪虹洁</span>
        </a>
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Header",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["header"]),
    showNav: function () {
      return function (list) {
        var newList = [];
        if (list) {
          newList = list.filter((item) => {
            return item.status === 1;
          });
        }
        return newList;
      };
    },
  },
  methods: {
    go(path) {
      this.$router.push({
        path,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  position: relative;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);

  .container {
    height: 80px;
    display: flex;
    align-items: center;

    .logo {
      cursor: pointer;
      width: 162px;
      height: 33px;
      background: url("~@/assets/logo.png") no-repeat center;
    }

    .nav {
      .list {
        margin-left: 146px;
        display: flex;

        li {
          margin: 0 20px;
          a {
            color: #333;
          }
          a:hover {
            color: #3f8dfd;
          }
        }
      }
    }

    .search {
      margin-left: 160px;
      width: 324px;
      background: #fafbfc;
      border: 1px solid #3f8dfd;
      border-radius: 8px;
      display: flex;
      overflow: hidden;

      &__select {
        width: 76px;
        border-right: 1px solid #fff;

        select {
          text-align: center;
          width: 100%;
          height: 100%;
          border: 0;
          outline: none;
        }
      }

      &__input {
        flex: 1;

        input {
          width: 100%;
          height: 100%;
        }
      }

      &__btn {
        text-align: center;
        width: 80px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        background: #3f8dfd;
      }
    }

    .userinfo {
      a {
        float: left;
        margin-left: 20px;
        display: flex;
        align-items: center;

        &.msg {
          position: relative;
          margin-top: 2px;

          .icon {
            font-size: 20px;
            color: #3f8dfd;
          }
          .pi {
            display: block;
            width: 10px;
            height: 10px;
            background: #ff3b30;
            border: 1px solid #ffffff;
            border-radius: 10px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }

        &.name {
          img {
            width: 24px;
          }
        }
      }
    }
  }
}
</style>
