<template>
  <div class="containerbox">
    <div class="changeitem flextwo">
      <div class="changeitemleft">头像</div>
      <div class="changeitemright flexone">
        <img :src="avatar" alt class="headimg" />
        <input
          type="file"
          class="shangtu"
          accept="image/*"
          @change="afterRead"
        />
        <!-- <input type="file" class="shangtu" @click="afterRead" /> -->
        <!-- <van-uploader v-model="fileList" multiple="false" :after-read="afterRead" :max-count="1" /> -->
        <img src="../../../assets/grayrow.png" alt class="yourow" />
      </div>
    </div>
    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />

    <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, Loading } from "vant";

import "vant/lib/index.css";
Vue.use(Loading);
Vue.use(Toast);
Vue.use(Uploader);
export default {
  data() {
    return {
      username: "",
      avatar: "",
      fileList: [],
      chuanimage: "",
      cardzheng: false
    };
  },
  created() {
    document.title = "唐元集公众号";
    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(e) {
      console.log(e);
      let file = e.target.files[0];
      let that = this;
      that.cardzheng = true;

      var formdata = new FormData();
      formdata.append("file", file);

      var url = "/api/common/upload";
      let param = {
        id: 1
      };

      that.$uploadFile
        .post(url, formdata)
        .then(function(res) {
          that.cardzheng = false;
          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;
      // if (that.chuanimage == '' && that.cardzheng == false) {
      //   Toast("请上传图片")
      //   return false
      // }
      if (that.chuanimage == "" && that.cardzheng == true) {
        Toast("图片正在上传中");
        return false;
      }
      var url =
        "/api/user/profile?avatar=" +
        that.chuanimage +
        "&nickname=" +
        that.username;
      let param = {
        avatar: that.chuanimage,
        nickname: that.username
      };
      console.log(param);

      that.$axios
        .get(url)
        .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;
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
</style>