<template>
  <div class="my">
    <div class="my-customer">
      <img
        src="@/assets/images/my/customer.png"
        @click="$router.push('/customer')"
      />
    </div>
    <div class="my-header">
      <div v-if="loginStatus">
        <img
          :src="
            require(`@/assets/images/my/${
              userInfo.avator ? userInfo.avator : 'avator'
            }.png`)
          "
        />
        {{ userInfo.userName }}
      </div>
      <div v-else>
        <img src="@/assets/images/my/avator.png" />
        <nuxt-link class="my-header-tip" to="/login">点击登录/注册</nuxt-link>
      </div>
      <div>></div>
    </div>
    <div class="my-info">
      <div>
        <div>钱包</div>
        <div v-if="loginStatus" class="my-info-wallet">
          {{ userInfo.balance }}
        </div>
        <div v-else class="my-info-tip">登陆后查看</div>
      </div>
      <div class="my-info-item">
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_1.png" />存款
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_2.png" />取款
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_3.png" />转账
        </nuxt-link>
      </div>
    </div>
    <div class="my-box">
      <div class="my-box-title">个人中心</div>
      <div class="my-box-line"></div>
      <div class="my-box-list">
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_4.png" />个人资料
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_5.png" />账户管理
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_6.png" />安全中心
        </nuxt-link>
      </div>
    </div>
    <div class="my-box">
      <div class="my-box-title">常用功能</div>
      <div class="my-box-line"></div>
      <div class="my-box-list top">
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_7.png" />投注记录
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_8.png" />交易记录
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_9.png" />分享记录
        </nuxt-link>
      </div>
      <div class="my-box-list">
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_10.png" />活动中心
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_11.png" />信息提示
        </nuxt-link>
        <nuxt-link to="/securityCenter">
          <img src="@/assets/images/my/icon_12.png" />帮助中心
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getToken } from "~/assets/scripts/auth";
export default {
  name: "myPage",
  data() {
    return {
      loginStatus: !!getToken(),
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.my {
  background: url("@/assets/images/index/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 20px 20px 70px;

  &-customer {
    display: flex;
    justify-content: flex-end;

    img {
      width: 25px;
    }
  }

  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      display: flex;
      align-items: center;
      color: white;
      font-size: 20px;

      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }
    }

    .my-header-tip {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      letter-spacing: 1px;
      color: white;
    }
  }

  &-info {
    background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
    border-radius: 15px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: 15px;

    &-wallet {
      margin-top: 15px;
      font-size: 22px;
    }

    .my-info-tip {
      margin-top: 10px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
    }

    &-item {
      display: flex;

      a {
        text-align: center;
        margin-left: 15px;
        font-size: 15px;
        color: white;
      }

      img {
        width: 40px;
        height: 40px;
        display: block;
        margin-bottom: 5px;
      }
    }
  }

  &-box {
    background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
    border-radius: 15px;
    color: white;
    margin-top: 15px;

    &-title {
      padding: 10px 20px;
    }

    &-line {
      border-top: 1px solid #0d92f7;
    }

    &-list {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;

      a {
        color: white;
      }

      img {
        width: 40px;
        height: 40px;
        display: block;
        margin: 0 auto 5px;
      }
    }

    .top {
      padding: 20px 20px 0;
    }
  }
}
</style>
