<template>
  <div class="modefy-avatar">
    <img class="avatar" :src="avatar" alt />
    <div class="btn">
      <van-button type="primary" plain>确定</van-button>
      <van-uploader
        :max-count="1"
        :before-delete="onDeleteAvatar"
        :after-read="onRead"
      >
        <van-button type="primary">上传新头像</van-button>
      </van-uploader>
    </div>
  </div>
</template>

<script>
export default {
  name: "ModefyAvatar",
  data() {
    return {
      avatar: ""
    };
  },
  mounted() {
    if (!this.avatar) {
      this.avatar = require("@/assets/images/no_avatar.png");
    }
  },
  methods: {
    onRead(file) {
      this.avatar = file.content;
      console.log("file", file);
    },
    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>
.modefy-avatar {
  box-sizing: border-box;
  text-align: center;
  padding-top: 115px;
}
.avatar {
  width: 345px;
  height: 345px;
  margin-bottom: 52px;
  border-radius: 4px;
}
.btn {
  display: flex;
  justify-content: space-around;
  .van-button {
    width: 165px;
  }
}
</style>
