<template>
  <div class="app-container">
    <header class="header-nav">
      <div class="left" @click="onHomeClick">
        <img src="../assets/images/evm-store.svg" alt="evue-logo" />
        <h3>EVM应用商店</h3>
      </div>
      <div class="center">
        <nav>
          <ul>
            <router-link
              to="/gallery"
              v-slot="{ navigate, isActive, isExactActive }"
              custom
            >
              <li
                @click="navigate"
                :class="[
                  isActive && 'router-link-active',
                  isExactActive && 'router-link-exact-active',
                ]"
              >
                推荐
              </li>
            </router-link>
            <router-link
              to="/category"
              v-slot="{ navigate, isActive, isExactActive }"
              custom
            >
              <li
                @click="navigate"
                :class="[
                  isActive && 'router-link-active',
                  isExactActive && 'router-link-exact-active',
                ]"
              >
                应用
              </li>
            </router-link>
            <router-link
              to="/list"
              v-slot="{ navigate, isActive, isExactActive }"
              custom
            >
              <li
                @click="navigate"
                :class="[
                  isActive && 'router-link-active',
                  isExactActive && 'router-link-exact-active',
                ]"
              >
                游戏
              </li>
            </router-link>
            <router-link
              to="/rank"
              v-slot="{ navigate, isActive, isExactActive }"
              custom
            >
              <li
                @click="navigate"
                :class="[
                  isActive && 'router-link-active',
                  isExactActive && 'router-link-exact-active',
                ]"
              >
                排行
              </li>
            </router-link>
            <router-link
              to="/developer"
              v-slot="{ navigate, isActive, isExactActive }"
              custom
            >
              <li
                @click="navigate"
                :class="[
                  isActive && 'router-link-active',
                  isExactActive && 'router-link-exact-active',
                ]"
              >
                开放平台
              </li>
            </router-link>
          </ul>
        </nav>
      </div>
      <div class="right">
        <div class="input-wrapper" ref="search">
          <input
            @focus="onSearchFocus"
            type="text"
            placeholder="搜索应用、游戏"
          />
          <dl v-show="selectShow">
            <dt>热词</dt>
            <dd @click="onSearchClick(1)">微聊</dd>
            <dd @click="onSearchClick(2)">支付宝</dd>
            <dd @click="onSearchClick(3)">计算器</dd>
            <dd @click="onSearchClick(4)">手表管家</dd>
            <dd @click="onSearchClick(5)">语音助手</dd>
          </dl>
        </div>
        <p class="submit-btn">上传应用</p>
        <img
          class="avatar"
          @click="onAccountClick"
          src="../assets/images/avatar.png"
          alt="avatar"
        />
      </div>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>
        <a
          href="https://www.yuque.com/docs/share/97df8f40-dc3c-4642-aeb1-9734bc3ef2c8"
          target="_blank"
          >EVM应用商店开发者协议</a
        >
        <a href="https://www.yuque.com/bytecode/evue" target="_blank"
          >EVM应用开发标准</a
        >
      </p>
      <p>Copyright © 武汉市字节码科技有限公司</p>
      <p>⭐⭐⭐⭐⭐</p>
    </footer>
  </div>
</template>
<script>
export default {
  name: "StoreLayout",
  data() {
    return {
      selectShow: false,
    };
  },
  computed: {},
  methods: {
    onSearchFocus() {
      this.selectShow = true;
    },
    onSearchBlur() {
      this.selectShow = false;
    },
    onHomeClick() {
      this.$router.push({ path: "/gallery" });
    },
    onAccountClick() {
      this.$router.push({ path: "/auth" });
    },
    onSearchClick(index) {
      console.log(index);
      this.$router.push({ path: "/search" });
      this.selectShow = false;
    },
    searchEvent(event) {
      const e = event || window.event;
      if (this.$refs.search && !this.$refs.search.contains(e.target)) {
        this.selectShow = false;
      }
    },
  },
  mounted() {
    document.addEventListener("click", this.searchEvent);
  },
  created() {},
  beforeDestroy() {
    document.removeEventListener("click", this.searchEvent);
  },
};
</script>
<style lang="scss">
@import "../styles/iconfont/iconfont.css";
.app-container {
  & > div.page-wrapper {
    margin: 10px 0px;
  }
  & > header.header-nav {
    display: flex;
    justify-content: center;
    padding: 12px 25px;
    border-bottom: 1px solid #f2f2f2;
    & > div {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
    }
    & > div.left {
      cursor: pointer;
      & > img {
        width: 40px;
        height: 40px;
        display: block;
      }
      & > h3 {
        display: inline-block;
        margin: 0px 0px 0px 15px;
      }
    }
    & > div.center {
      & > nav {
        & > ul {
          display: inline-flex;
          flex-direction: row;
          & > li {
            cursor: pointer;
            padding: 0px 30px;
            &.router-link-active {
              color: #4cd1e0;
            }
          }
        }
      }
    }
    & > div.right {
      & > div.input-wrapper {
        margin-right: 15px;
        & > dl {
          width: 200px;
          height: auto;
          position: absolute;
          font-size: 14px;
          margin: 5px 0px 0px 0px;
          z-index: 1000;
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #f5f5f5;
          box-shadow: 1px 0px 3px 2px #dbdbdb;
          & > dt {
            font-size: 12px;
            color: grey;
            margin: 10px;
          }
          & > dd {
            cursor: pointer;
            padding: 10px;
            margin-inline-start: 0px;
            &:hover {
              background: #eeeeee;
            }
          }
        }
      }
      & > img.avatar {
        width: 32px;
        height: 32px;
        display: block;
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  & > main {
    width: 50%;
    min-height: 76vh;
    margin: 0px auto;
    @media screen and (max-width: 1700px) {
      width: 66%;
    }
    @media screen and (max-width: 1170px) {
      width: 70%;
    }
    @media screen and (max-width: 920px) {
      width: 85%;
    }
    @media screen and (max-width: 750px) {
      width: 100%;
    }
  }
  & > footer {
    font-size: 13px;
    padding: 25px 0px;
    background-color: #f2f2f2;
    & > p {
      & > a {
        margin-right: 20px;
        color: royalblue;
        &:last-child {
          margin-right: 0px;
        }
      }
      text-align: center;
    }
  }
}
</style>