<!--  -->
<template>
  <div
    class="mine_box"
    :style="'height:' + fullHeight + 'px'"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <!-- 头部 -->
    <div class="mine_head">
      <div class="mine_head_returnA" @click="FanHui()">
        <img src="../../assets/image/left.png" alt class="mine_head_returnA_img" />
      </div>

      <!-- 标题 -->
      <div class="head_title">
        <span class="head_title_text">我的资料</span>
      </div>
    </div>

    <!-- list列表 -->
    <ul class="mine_box_ul">
      <!-- 头像 -->
      <!-- <li class="mine_box_li" @click="dialogVisibleA = true"> -->
      <li class="mine_box_li" @click="tankuang($event)">
        <!-- <li class="mine_box_li"> -->
        <div class="mine_box_li_portrait">
          <div class="li_portrait_box">
            <span class="li_portrait_text">头像</span>
          </div>
          <div class="portrait_img_box">
            <img
              preview="1"
              :src=" 'bigservers/' + this.redata.user_photo"
              alt
              class="portrait_img"
            />
            <!-- 
            <img
              :src=" 'bigservers/' + this.redata.user_photo"
              alt
              class="portrait_img"
            />-->
          </div>
        </div>
      </li>

      <!-- 账号 -->
      <li class="mine_box_li">
        <div class="mine_box_li_account">
          <div class="li_account_box">
            <span class="li_account_text">账号</span>
          </div>
          <div class="account_accountNumber_box">
            <span class="accountNumber_text">{{ this.redata.username }}</span>
          </div>
        </div>
      </li>

      <!-- 昵称 -->
      <li class="mine_box_li" @click="dialogVisible = true">
        <div class="mine_box_li_nickname">
          <div class="li_nickname_box">
            <span class="li_nickname_text">昵称</span>
          </div>
          <div class="nickname_user_box">
            <!-- <span class="nickname_text">{{ this.redata.user_remark }}</span> -->
            <span class="nickname_text">{{ this.name !== '' ? this.name : this.redata.user_remark }}</span>
          </div>
        </div>
      </li>

      <!-- 修改密码 -->
      <li class="mine_box_li" @click="pad()">
        <div class="mine_box_li_password">
          <div class="li_password_box">
            <span class="li_password_text">修改密码</span>
          </div>
        </div>
      </li>
    </ul>

    <!-- 修改头像 -->
    <el-dialog title="头像" :visible.sync="dialogVisibleA" width="65%" :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <div class="modify_the_picture">
          <el-upload
            v-show="s"
            class="avatar-uploader"
            action="/alter_head"
            :show-file-list="false"
            :http-request="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <el-button class="modification" @click="dialogVisibleA = false">修改头像</el-button>
          </el-upload>
        </div>
      </span>
    </el-dialog>

    <!-- 修改昵称弹框 -->
    <el-dialog title="修改昵称" :visible.sync="dialogVisible" width="65%" :before-close="handleClose">
      <el-input placeholder="请输入内容" v-model="input" maxlength="8" clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="nichengA" @click="dialogVisible = false">取 消</el-button>
        <el-button class="nicheng" type="primary" @click="dialogVisible = false, add()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      picture: false, //修改头像弹框
      dialogVisibleA: false, //修改头像弹框
      dialogVisible: false, //修改昵称
      input: "",
      s: true,
      imageUrl: "",
      redata: [],
      loading: true,
      name: "" //昵称
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    input: function() {
      this.input = this.input.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, "");
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //点击返回到home页面
    FanHui() {
      let _this = this;
      // _this.$router.push("/person");
      _this.$router.replace("/person");
      // location.reload();
    },

    //点击进入修改密码
    pad() {
      let _this = this;
      _this.$router.push("/modification");
    },

    //点击弹出弹框
    aaa() {
      let _this = this;
      _this.picture = true;
    },

    //点击×图标事件
    delA() {
      let _this = this;
      _this.picture = false;
    },

    handleClose(done) {
      done();
    },

    // 修改头像测试
    handleAvatarSuccess(a) {
      let _this = this;
      let form = new FormData();
      form.append("file", a.file);
      console.log(form.get("file"));
      _this
        .$axios({
          method: "post",
          url: "bigservers/alter_head",
          anync: true,
          data: form,
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(res => {
          if (res.data === 0) {
            this.$message({
              message: "头像修改成功",
              type: "success",
              duration: 1000
            });
            this.touxiang = a.flie;
          } else if (res.data === 1) {
            this.$message({
              message: "头像修改失败",
              type: "error",
              duration: 1000
            });
          }
          const timer = setInterval(() => {
            location.reload();
          }, 1000);
        })
        .catch(error => {
          this.$message({
            message: "头像修改失败",
            type: "error",
            duration: 1000
          });
        });
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message({
          message: "上传头像图片只能是 JPG 格式!",
          type: "error",
          duration: 1000
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传头像图片大小不能超过 2MB!",
          type: "error",
          duration: 1000
        });
      }
      return isJPG && isLt2M;
    },

    //修改昵称
    add() {
      let _this = this;
      //判断当前是否为空
      if (_this.input !== "") {
        let postData = _this.$qs.parse({
          remark: _this.input
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/alter_remark",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 0) {
              this.$message({
                message: "昵称修改成功",
                type: "success",
                duration: 1000
              });
              _this.name = _this.input;
            } else if (res.data === 1) {
              this.$message({
                message: "昵称修改失败",
                type: "error",
                duration: 1000
              });
            }
          })
          .catch(error => {
            this.$message({
              message: "昵称修改失败",
              type: "error",
              duration: 1000
            });
          });
      } else {
        this.$message({
          message: "不能为空！",
          type: "warning",
          duration: 1000
        });
      }
    },

    //测试
    tankuang(e) {
      let _this = this;
      if (
        e.target.className === "mine_box_li_portrait" ||
        e.target.className === "li_portrait_box"
      ) {
        _this.dialogVisibleA = true;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    localStorage.removeItem("insect"); //删除本地的虫害值
    localStorage.removeItem("plant"); //删除本地的病害值
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    let _this = this;
    _this
      .$axios({
        method: "get",
        url: "bigservers/see_user"
      })
      .then(res => {
        _this.redata = res.data[0];
        _this.loading = false;
      })
      .catch(error => {
        alert("失败");
      });
  }
};
</script>
<style lang='scss' scoped>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/mine.scss";
</style>