<template>
  <div class="containerbox">
    <div class="changeitem flextwo">
      <div class="changeitemleft">头像</div>
      <div class="changeitemright flexone">
        <!-- <img :src="avatar" alt class="headimg" /> -->
        <van-uploader
          v-model="fileList"
          multiple="false"
          :after-read="afterRead"
          :max-count="1"
       
        />
        <img src="../../../assets/grayrow.png" alt class="yourow" />
      </div>
    </div>

    <div class="changeitem flextwo">
      <div class="changeitemleft">姓名</div>
      <div class="changeitemleft">
        <input type="text" v-model="username" placeholder="请输入姓名" />
      </div>
    </div>

    <div class="kaishilu" @click="save">保存</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast, Uploader } from "vant";

import "vant/lib/index.css";

Vue.use(Toast);
Vue.use(Uploader);
export default {
  data() {
    return {
      username: "",
      avatar: "",
      fileList:[],
      chuanimage:''
    };
  },
  created() {
    this.username = this.$route.query.username;
    this.avatar = this.$route.query.avatar;
    console.log(this.avatar)
    let obj={
      url:this.avatar
    }
    this.fileList.push(obj)
  },
  methods: {
    // 上传图片
    afterRead(file) {
      let that = this;
      console.log(file);
      console.log(file.length);
    
        var formdata = new FormData();
        formdata.append("file", file.file);
       
        var url = "/api/common/upload";
        let param = {
          id: 1
        };

        that.$uploadFile
          .post(url, formdata)
          .then(function(res) {
            console.log(res);
            that.cardzheng = false;
            let url = "http://tangyuanji.t.brotop.cn" + res.data.url;
            that.avatar=url
            that.chuanimage=res.data.url
          })
          .catch(err => {
            console.log(err);
          });
      
      
    },
    save() {
      let that = this;
      var url = "/api/user/profile";
      let param = {
        avatar: that.chuanimage,
        nickname: that.username
      };
      console.log(param)

      that.$axios
        .post(url, param)
        .then(function(res) {
          console.log(res);
          Toast("保存成功");
          that.$router.go(-1);
        })
        .catch(function(err) {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../style/usercenter.css";
.changeitemleft input {
  text-align: right;
}
</style>