<template>
  <div class="menu_box">
    <!-- 用户信息 -->
    <div class="userinfo_box">
      <img src="~@/assets/image/jh.png" alt="" />
      <div class="info">
        <div class="account">账号: {{ userInfo && userInfo.passport }}</div>
        <!-- <div class="userid">用户ID: {{ userInfo.uid }}</div> -->
        <div class="hb">
          <div class="left">
            <span> 鸿币余额: </span>
            <span class="money">{{ finance }}</span>
          </div>
          <span class="to" @click="showInnerControl('hb')"> 前往充值 >> </span>
        </div>
      </div>
      <!-- 返回 -->
      <i class="iconfont icon-back" @click="close"></i>
    </div>

    <!-- 菜单 -->
    <!-- 上 -->
    <div class="menu">
      <div class="menu_top">
        <!-- 账号 -->
        <div class="menu_account" @click="showInnerControl('account')">
          <i class="iconfont icon-account"></i>
          <span class="normal">账号</span>
        </div>
        <!-- 鸿币充值 -->
        <div class="menu_account" @click="showInnerControl('hb')">
          <i class="iconfont icon-pay"></i>
          <span class="normal">鸿币充值</span>
        </div>
        <!-- 联系客服 -->
        <div class="menu_account" @click="showInnerControl('service')">
          <i class="iconfont icon-lianxikefu"></i>
          <span class="normal">联系客服</span>
        </div>
        <!-- 激活码 -->
        <div class="menu_account" @click="showInnerControl('gzh')">
          <i class="iconfont icon-weixingongzhonghao"></i>
          <span class="special">激活码</span>
        </div>
        <!-- 积分商城 -->
        <div class="menu_account" @click="toStore">
          <i class="iconfont icon-shangcheng"></i>
          <span class="special">积分商城</span>
        </div>
      </div>
      <!-- 第二排 -->
      <div class="menu_top menu_bottom">
        <!-- 刷新 -->
        <div class="menu_account" @click="toRefresh">
          <i class="iconfont icon-shuaxin"></i>
          <span class="special">刷新</span>
        </div>
        <!-- 备用 -->
        <div class="menu_account"></div>
        <!-- 备用 -->
        <div class="menu_account"></div>
        <!-- 备用 -->
        <div class="menu_account"></div>
        <!-- 备用 -->
        <div class="menu_account"></div>
      </div>
    </div>
    <!-- 切换账号 -->
    <MenuLoginOut v-on="$listeners" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import MenuLoginOut from "@/components/Menu/MenuLoginOut"; // 切换账号
export default {
  name: "HomeMenu",
  components: {
    MenuLoginOut,
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["CONFIG", "userInfo", "finance", "isWeChat"]),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 控制显示哪个组件
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 总菜单的关闭
    close() {
      this.$emit("close");
    },

    // 积分商城
    toStore() {
      window.location.href = this.CONFIG.storeUrl;
    },

    // 刷新
    toRefresh() {
      window.location.reload();
    },
  },
};
</script>

<style lang='less' scoped>
.menu_box {
  width: 100%;
  height: 688 / @rem;
  position: absolute;
  top: 100%;
  margin-top: -688 / @rem;
  padding: 0 20 / @rem;
  border-radius: 30 / @rem 30 / @rem 0 0;
  box-sizing: border-box;
  background-color: #fff;

  .userinfo_box {
    padding: 20 / @rem 0;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;

    img {
      width: 130 / @rem;
      margin-top: 10 / @rem;
      float: left;
    }

    .info {
      width: 450 / @rem;
      margin-left: 40 / @rem;
      margin-top: 40 / @rem;
      float: left;

      .account,
      .userid {
        height: 60 / @rem;
        line-height: 60 / @rem;
        vertical-align: middle;
        text-align: left;
        font-size: 32 / @rem;
      }

      .hb {
        .left {
          float: left;
        }
        .to {
          float: right;
          color: #3faeed;
          border-bottom: 1px solid #3faeed;
        }
        .money {
          color: #3faeed;
        }
      }
    }

    .icon-back {
      position: absolute;
      top: 20 / @rem;
      right: 30 / @rem;
      font-size: 50 / @rem;
    }
  }

  .menu {
    height: 330 / @rem;
    border-bottom: 1px solid #e6e6e6;

    .menu_top {
      display: flex;
      margin-top: 20 / @rem;
      font-size: 28 / @rem;

      i,
      & > span {
        display: block;
        margin: 20 / @rem 0;
      }

      .menu_account {
        width: 25%;
        height: 150 / @rem;

        i {
          font-size: 60 / @rem;
        }

        .normal {
        }

        .special {
        }
      }
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .menu_box {
    width: 50%;
    height: 250 / @rem;
    left: 0;
    top: 50%;
    margin-top: -125 / @rem;
    padding: 0 10 / @rem;
    border-radius: 0 20 / @rem 20 / @rem 0;
    overflow-y: auto;

    .userinfo_box {
      padding: 10 / @rem 0;

      img {
        width: 60 / @rem;
        float: left;
      }

      .info {
        width: 225 / @rem;
        margin-left: 20 / @rem;
        margin-top: 20 / @rem;

        .account,
        .userid,
        .hb {
          height: 30 / @rem;
          line-height: 30 / @rem;
          font-size: 16 / @rem;
        }
      }

      .icon-back {
        top: 10 / @rem;
        right: 15 / @rem;
        font-size: 25 / @rem;
      }
    }

    .menu {
      height: 170 / @rem;

      .menu_top {
        margin-top: 0;
        font-size: 13 / @rem;

        i,
        & > span {
          margin: 10 / @rem 0;
        }

        .menu_account {
          height: 90 / @rem;

          i {
            font-size: 30 / @rem;
          }
        }
      }
    }

    .menu_login_out {
      margin-bottom: 10 / @rem;
    }

    .change_account {
      margin-top: 10 / @rem;
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .menu_box {
    width: 350 / @rem;
    height: 330 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -145 / @rem;
    margin-left: -175 / @rem;
    padding: 0 10 / @rem;
    border-radius: 20 / @rem;
  }
}

// ipad 竖屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
}
</style>