<template>
  <div class="menu_account">
    <i class="iconfont icon-back" @click="showInnerControl('')"></i>
    <div class="title">账号</div>
    <!-- 修改密码 -->
    <div class="change_pwd">
      <i class="iconfont icon-edit"></i>
      <span>修改密码</span>
      <div class="go" @click="showInnerControl('changePwd')">前往</div>
    </div>
    <!-- 绑定手机号 -->
    <div class="bind_tel">
      <i class="iconfont icon-bangdingshouji"></i>
      <span>{{ bindMobileTitle }}</span>
      <div class="go" @click="showInnerControl('bind')">前往</div>
    </div>
    <!-- 切换账号 -->
    <MenuLoginOut v-on="$listeners" />
  </div>
</template>

<script>
import MenuLoginOut from "@/components/Menu/MenuLoginOut"; // 切换账号
import { mapState } from "vuex";
export default {
  name: "MenuAccount",
  components: {
    MenuLoginOut,
  },
  inject: ["refresh"],
  data() {
    return {
      showBindBtn: false, // 是否显示绑定手机号按钮
      bindMobileTitle: "绑定手机号", // 绑定手机号
    };
  },
  computed: {
    ...mapState(["userInfo", "CONFIG"]),
    passport() {
      return this.$store.state.userInfo.passport;
    },
    mobile() {
      return this.$store.state.userInfo.mobile;
    },
  },
  watch: {
    passport(newValue) {
      this.init();
    },
    mobile(newValue) {
      this.init();
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    // 控制显示哪个组件
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 初始化信息
    init() {
      const { passport, mobile } = this;

      if (!passport) {
        return;
      }
      // 手机号注册无需绑定手机号
      this.bindMobileTitle = mobile ? "更换手机号" : "绑定手机号";
    },
  },
};
</script>

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

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

  .icon-back {
    margin-right: 10 / @rem;
    font-size: 50 / @rem;
  }

  .title {
    height: 60 / @rem;
    line-height: 60 / @rem;
    margin-top: 10 / @rem;
    margin-left: 10 / @rem;
    padding-left: 20 / @rem;
    font-size: 36 / @rem;
    font-weight: bold;
    border-left: 4px solid #3faeed;
    text-align: left;
  }

  .change_pwd,
  .bind_tel {
    height: 70 / @rem;
    line-height: 70 / @rem;
    margin-top: 30 / @rem;
    padding: 30 / @rem 0;
    border-top: 1px solid #e6e6e6;
    font-size: 32 / @rem;

    i,
    span,
    .go {
      float: left;
    }
    i {
      width: 20%;
    }
    span {
      width: 50%;
      text-align: left;
    }
    .go {
      width: 20%;
      border-radius: 10 / @rem;
      background-color: #3faeed;
      color: #fff;
    }

    .gray {
      background-color: #888;
    }
  }
  .bind_tel {
    margin-top: 0;
  }

  .menu_login_out {
    border-top: 1px solid #e6e6e6;
  }
}

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

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

    .title {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 15 / @rem;
      margin-left: 5 / @rem;
      padding-left: 10 / @rem;
      font-size: 18 / @rem;
    }

    .change_pwd,
    .bind_tel {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 15 / @rem;
      padding: 15 / @rem 0;
      font-size: 16 / @rem;

      .go {
        border-radius: 50 / @rem;
      }
    }

    .bind_tel {
      margin-top: 0;
    }
    .menu_login_out {
      padding-top: 9 / @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_account {
    width: 350 / @rem;
    height: 250 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -125 / @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>