<template>
  <div class="user-center-page">
    <div class="banner"></div>
    <div class="user-container">
      <img class="user-avatar" :src="userData.avatar">
      <div class="user_msg">
        <div class="user_nickname">{{userData.nickname|textFormatter}}</div>
        <!--<div class="user_number">昵称：{{userData.student_num|textFormatter}}</div>-->
      </div>
      <div class="btn_container">
        <div class="btn_item" v-for="item in btnList" @click="jumpTo(item)">
          <div class="btn_icon">
            <img :src="item.icon" alt="">
          </div>
          <div class="btn_text">{{item.text}}</div>
          <div class="btn_right" v-if="item.money||item.money===0">{{item.money|moneyFormatter}}元</div>
          <div class="btn_right" v-else>
            <img src="../assets/ic_next.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <FollowDialog :isKefu="isKefu" v-if="isShowFollow" @close="toggleFollowDialog"></FollowDialog>
  </div>
</template>

<script>
  import {balanceQuery} from "@/components/axios/api";
  import FollowDialog from "@/components/FollowDialog.vue";
  import Title from "@/components/Title.vue";

  export default {
    name: "UserCenter",
    components: {
      FollowDialog,
      Title
    },
    created() {
      let userData = localStorage.getItem("walk_userData")
      if (userData) {
        this.userData = JSON.parse(userData)
      }
      this.getBalanceQuery()
    },
    methods: {
      toggleFollowDialog(isKefu) {
        isKefu && (this.isKefu = isKefu)
        this.isShowFollow = !this.isShowFollow
      },
      jumpTo(item) {
        console.log("item", item)
        if (item.to) {
          window.location.href = item.to
        }
        if (item.router) {
          this.$router.push({name: item.router})
        }
        if (item.isKefu) {
          this.toggleFollowDialog(item.isKefu)
        }
      },
      getBalanceQuery() {
        balanceQuery().then(result => {
          if (result.code == 0) {
            this.btnList[0].money = result.data.balance;
            console.log(this.btnList)
            if (result.data.withdraw_auth) {
              this.appid = result.data.withdraw_appid;
              // this.getOpenId();
            }
          }
        });
      },
    },
    data() {
      return {
        isKefu: false,
        isShowFollow: false,
        userData: {},
        btnList: [
          {
            icon: require("../assets/ic_my_wallet.png"),
            text: "钱包",
            money: "0",
            router: "Wallet"
          },
          {
            icon: require("../assets/ic_my_record.png"),
            text: "我的打卡记录",
            router: "Record"
          },
          {
            icon: require("../assets/ic_my_que.png"),
            text: "常见问题",
            router: "Question"
          },
          {
            icon: require("../assets/ic_my_connect.png"),
            text: "联系我们",
            isKefu: 1
          },
          {
            icon: require("../assets/ic_my_code.png"),
            text: "关注公众号",
            isKefu: 2
          },
        ]
      }
    },
    filters: {
      moneyFormatter(val) {
        if (val && !isNaN(val)) {
          return Number(val).toFixed(2);
        } else {
          return "0.00";
        }
      },
      textFormatter(val) {
        if (val) {
          return val
        } else {
          return ""
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-center-page {
    width: 100%;
    position: relative;
    overflow-y: scroll;
    background: #f8f8f8;
    padding-bottom: 0.1rem;
    .banner {
      width: 100%;
      height: 2.6rem;
      background: linear-gradient(0, #07C9D1, #2AD6A6);
      position: absolute;
      left: 0;
      top: 0;
    }
    .user-container {
      width: 6.9rem;
      margin: 1.76rem auto 0;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 .05rem .14rem 0 rgba(180, 197, 200, 0.5);
      position: relative;
      .user-avatar {
        overflow: hidden;
        width: 1.48rem;
        height: 1.48rem;
        border-radius: 50%;
        border: .07rem solid #fff;
        background: black;
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
      }
    }
  }

  .user_msg {
    padding-top: .9rem;
    padding-bottom: .4rem;
    text-align: center;
  }

  .user_nickname {
    font-size: .32rem;
    color: rgba(51, 51, 51, 1);
    margin-bottom: .1rem;
  }

  .user_number {
    font-size: .28rem;
    color: rgba(165, 165, 165, 1);
  }

  .btn_container {
    padding: 0 .4rem;
  }

  .btn_item {
    display: flex;
    align-items: center;
    padding: .3rem 0;
    border-top: .01rem solid rgba(232, 232, 232, 1);
  }

  .btn_icon {
    flex-shrink: 0;
  }

  .btn_icon img {
    display: block;
    width: .44rem;
  }

  .btn_text {
    font-size: .3rem;
    color: rgba(40, 40, 40, 1);
    flex: 1;
    margin-left: .3rem;
  }

  .btn_right {
    font-size: .3rem;
    color: rgba(138, 138, 138, 1);
  }

  .btn_right img {
    width: .2rem;
  }
</style>
