<template>
  <div class="settings">
    <van-cell-group class="group-1">
      <van-cell title="用户名" value="135****1234" />
      <van-cell is-link center title="头像">
        <van-uploader
          v-model="fileList"
          :max-count="1"
          :before-delete="onDeleteAvatar"
        />
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-field label="邀请人邀请码" />
      <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>
  </div>
</template>

<script>
export default {
  name: "Settings",
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    onDeleteAvatar(file, detail) {
      return new Promise((resolve, reject) => {
        this.$dialog
          .confirm({
            message: "确认删除图片？"
          })
          .then(() => {
            this.fileList.splice(detail.index, 1);
            this.$toast.success("删除成功");
            resolve();
          })
          .catch(error => {
            this.$toast.fail("已取消");
            reject(error);
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.settings {
  box-sizing: border-box;
  padding: 10px 16px;
}
.group-1 {
  margin-bottom: 10px;
  ::v-deep .van-uploader__upload,
  ::v-deep .van-uploader__preview-image {
    width: 37px;
    height: 37px;
    border-radius: 50%;
  }
}
.logout-btn {
  margin: 10px 0;
}
</style>