<template>
  <div class="settings">
    <van-cell-group class="group-1">
      <van-cell title="用户名" :value="$userId" />
      <van-cell is-link center title="头像" @click="onModefy">
        <img class="avatar-img" :src="imgBaseUrl + avatar" alt="头像" />
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell
        is-link
        title="推荐人邀请码"
        :value="inviteeCode"
        @click="fillInviterCode"
      />
      <van-cell is-link title="软件更新" value="版本v1.2" />
      <van-cell is-link title="用户协议" @click="jumpToInstructions" />
    </van-cell-group>

    <a href="redirect://xts.com/login_activity?hideBack=true">
      <van-button size="large" class="logout-btn" @click="logout"
        >退出登录</van-button
      >
    </a>

    <base-dialog
      base-dialog-title="推荐人邀请码"
      base-dialog-btn="提交"
      :base-dialog-show="inviteeCodeDialog"
      :base-dialog-show-close="true"
      @onClose="onCloseDialog"
      @onClick="onFillInviteeCode"
    >
      <div slot="content">
        <p class="content-tip">请输入您的推荐人邀请码</p>
        <van-field
          v-model="fillCode"
          type="number"
          class="validCodeInput"
          placeholder="请输入"
        />
      </div>
    </base-dialog>
  </div>
</template>

<script>
import { getUserInfo2 } from "@/api/user";
import { logoutToApp } from "@/utils/bridgeToAppFun";
import { logout } from "@/api/user";
import { fillInviteCode } from "@/api/user";
import BaseDialog from "../components/BaseDialog.vue";
export default {
  components: { BaseDialog },
  name: "Settings",
  data() {
    return {
      imgBaseUrl: "",
      avatar: "",
      fileList: [],
      fillCode: "",
      inviteeCode: "未填写",
      inviteeCodeDialog: false
    };
  },
  mounted() {
    this.imgBaseUrl = process.env.VUE_APP_BASE_URL;
    this.getUser();
  },
  methods: {
    getUser() {
      const params = {
        userId: this.$userId
      };
      console.log("setting-userId", params);
      getUserInfo2(params).then(res => {
        if (res.userId) {
          localStorage.setItem("user", JSON.stringify(res));
          this.$nextTick(() => {
            this.inviteeCode = res.inviteCode;
            this.avatar = res.headImage;
          });
        }
      });
    },
    logout() {
      localStorage.removeItem("token");
      logout().then();
      logoutToApp();
    },
    jumpToInstructions() {
      this.$router.push("/instructions");
    },
    onModefy() {
      this.$router.push({
        path: "/modefy-avatar",
        query: {
          headImage: this.avatar
        }
      });
    },
    onCloseDialog() {
      this.inviteeCodeDialog = false;
    },
    onFillInviteeCode() {
      this.inviteeCodeDialog = false;
      this.inviteeCode = this.fillCode;
      const params = {
        inviteCode: this.fillCode,
        userId: this.$userId
      };
      fillInviteCode(params).then();
    },
    fillInviterCode() {
      if (this.inviteeCode === "未填写") {
        this.inviteeCodeDialog = true;
        this.fillCode = "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.settings {
  box-sizing: border-box;
  padding: 10px 16px;
}
.group-1 {
  margin-bottom: 10px;
  .avatar-img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
  }
}
.logout-btn {
  margin: 10px 0;
}
.content-tip {
  text-align: center;
  font-size: 14px;
  color: #333333;
}
.validCodeInput {
  width: 245px;
  margin: 35px auto;
  background-color: #f9f9f9;
  border-radius: 20px;
}
</style>