<template>
  <div class="settings">
    <van-cell-group class="group-1">
      <van-cell title="用户名" value="135****1234" />
      <van-cell is-link center title="头像" @click="onModefy">
        <img
          class="avatar-img"
          src="@/assets/images/no_avatar.png"
          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="用户协议" />
    </van-cell-group>
    <van-button size="large" class="logout-btn">退出登录</van-button>

    <base-dialog
      base-dialog-title="推荐人邀请码"
      base-dialog-btn="提交"
      :base-dialog-show="inviteeCodeDialog"
      :base-dialog-show-close="true"
      @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 BaseDialog from "../components/BaseDialog.vue";
export default {
  components: { BaseDialog },
  name: "Settings",
  data() {
    return {
      fileList: [],
      fillCode: "",
      inviteeCode: "未填写",
      inviteeCodeDialog: false
    };
  },
  methods: {
    onModefy() {
      this.$router.push("/modefy-avatar");
    },
    onFillInviteeCode() {
      this.inviteeCodeDialog = false;
      this.inviteeCode = this.fillCode;
    },
    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>