<template>
  <div class="index_wrap">
    <Top :activeIndex="activeIndex" ref="mychild"></Top>
    <!-- 个人信息 -->
    <div class="personal_msg">
      <!-- 主体 -->
      <div class="main layout align_center justify_center">
        <!-- 个人信息内容 -->
        <div>
          <!-- 头像 -->
          <div class="avatar_wrap layout flex_row">
            <div class="avatar_box layout align_center justify_center">
              <img :src="imageUrl" alt />
            </div>
            <!-- 姓名 -->
            <div class="name_wrap layout justify_around align_left flex_diection">
              <div class="name_box">
                {{name}}
                <div class="line_bot">
                  <img src="@/assets/img_20.png" alt />
                </div>
              </div>
              <div class="upload_avatar">
                <!-- 上传头像 -->
                <el-upload
                  class="avatar-uploader layout align_center flex_row justify_start"
                  action="http://yiminadmin.zishike.cn/api/common/upload"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                <!-- <el-upload
                  class="avatar-uploader layout align_center flex_row justify_start"
                  action="http://yiminadmin.zishike.com/api/common/upload"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                > -->
                <!-- http://yiminadmin.zishike.com -->
                  <div class="upload_box layout justify align_center">
                    <div class="camera">
                      <img src="@/assets/img_31.png" alt />
                    </div>
                    <div class="upload_word">修改头像</div>
                  </div>
                </el-upload>
                <div class="upload_tips">* 支持JPG, PNG, BMP格式，大小不超过10M。</div>
              </div>
            </div>
          </div>
          <!-- 信息内容 -->
          <div class="msg_content">
            <div class="msg_single layout align_center flex_row justify_start">
              <div class="msg_l">员工ID:</div>
              <div class="msg_r">{{number}}</div>
            </div>
            <div class="msg_single layout align_center flex_row justify_start">
              <div class="msg_l">手机号:</div>
              <div class="msg_r">{{userName}}</div>
            </div>
            <div class="msg_single layout align_center flex_row justify_start">
              <div class="msg_l">邮箱:</div>
              <div class="msg_r" v-if="!isEditor">{{email}}</div>
              <!-- 编辑 -->
              <el-input class="email_input" v-model="email" v-else></el-input>
            </div>
            <div class="msg_single layout align_center flex_row justify_start">
              <div class="msg_l">业务部门:</div>
              <div class="msg_r">{{operatName}}</div>
            </div>
          </div>
          <!-- 编辑按钮 -->
          <div
            class="editor_btn layout align_center flex_row justify_center"
            @click="editorMsg()"
            v-if="!isEditor"
          >
            <div>
              <img src="@/assets/img_4.png" alt />
            </div>
            <div class="editor_word">编辑资料</div>
          </div>
          <!-- 编辑完成 提交按钮 -->
          <div class="submit_btn layout align_center flex_row justify_around" v-else>
            <div class="confirm_btn" @click="submit()">确定</div>
            <div class="cancel_btn" @click="cancel()">取消</div>
          </div>
        </div>
      </div>
    </div>
    <Bottom></Bottom>
  </div>
</template>
<script>
import Top from "../../common/top";
import Bottom from "../../common/bottom";
import { Message } from "element-ui";
import { post } from "../../../api/http.js";
export default {
  data() {
    return {
      activeIndex: 3,
      // 头像
      avatarUrl: "",
      // 姓名
      name: "",
      // 编号
      number: "",
      // 联系方式
      userName: "",
      //   邮箱
      email: "",
      // 部门
      operatName: "",
      isEditor: false,
      imageUrl: "",
      headers: {
        token: ""
      },
      gender:"",
      chuanurl:''
    };
  },
  methods: {
    //   编辑信息
    editorMsg() {
      this.isEditor = true;
    },
    // 提交按钮
    submit() {
      if (
        /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(this.email)
      ) {
        let url = "/api/user/update";
        let params = {
          avatar: this.chuanurl,
          email: this.email
        };
        post(url, params).then(res => {
          this.$refs.mychild.getUserInfor();
          this.$message({
            showClose: true,
            message: "Modified success",
            type: "success"
          });
          this.isEditor = false;
        });
      } else {
        this.$message({
          showClose: true,
          message: "Please enter the correct email",
          type: "warning"
        });
      }
    },
    // 撤销按钮
    cancel() {
      this.isEditor = false;
    },
    // 上传头像成功
    handleAvatarSuccess(res, file) {
      console.log(res,34893843894389)
      this.avatarUrl = res.data.url;
      this.chuanurl=res.data.relative_url
      this.imageUrl = URL.createObjectURL(file.raw);
      localStorage.setItem("avatar", this.avatarUrl);
      let url = "/api/user/update";
      let params = {
        avatar: this.chuanurl,
        email: this.email
      };
      post(url, params).then(res => {
        this.$refs.mychild.getUserInfor();
        this.$message({
          showClose: true,
          message: "Modified success",
          type: "success"
        });
        this.isEditor = false;
      });
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/bmp";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG、PNG、BMP 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt10M;
    },
    // 获取个人信息
    getUserInfor() {
      let url = "/api/user/member";
      post(url).then(res => {
        this.imageUrl = res.avatar;
        this.name = res.name;
        this.number = res.number;
        this.userName = res.username;
        this.gender=res.gender;
        this.email = res.email;
        this.operatName = res.department_name;
      });
    }
  },
  components: {
    Top,
    Bottom
  },
  mounted() {
    this.getUserInfor();
    // this.imageUrl = localStorage.getItem("avatar");
    // console.log(this.imageUrl)
    this.headers.token = localStorage.getItem("token");
  }
};
</script>
<style scoped>
.main {
  width: 1200px;
  margin: 28px auto;
  height: 940px;
  box-shadow: #ccc 0px 0px 5px;
}
/* 头像 */
.avatar_box {
  width: 264px;
  height: 264px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
}
.avatar_box img {
  width: 228px;
  height: 228px;
  border-radius: 50%;
}
/* 姓名 */
.name_wrap {
  margin-left: 40px;
}
.name_box {
  color: #526aa6;
  font-size: 24px;
  text-align: left;
}
.line_bot {
  width: 290px;
  margin-top: 3px;
}
/* 上传头像提示 */
/* 上传按钮 */
.upload_box {
  width: 145px;
  height: 46px;
  background: linear-gradient(
    102deg,
    rgba(37, 123, 251, 1),
    rgba(0, 229, 199, 1)
  );
  border-radius: 3px;
  margin-bottom: 13px;
}
.upload_box:hover {
  opacity: 0.8;
}
.camera {
  width: 28px;
  margin-left: 14px;
}
.upload_word {
  font-size: 18px;
  color: #fefefe;
  margin-right: 14px;
}
.upload_tips {
  color: #999;
  font-size: 14px;
}
/* 信息内容 */
.msg_content {
  margin: 60px 0;
}
.msg_single {
  margin-bottom: 35px;
  margin-left: 130px;
}
.msg_l {
  width: 200px;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}
.msg_r {
  color: #666;
  font-size: 20px;
  text-align: left;
}
.email_input {
  width: 300px;
  font-size: 20px;
}
/* 编辑按钮 */
.editor_btn {
  width: 185px;
  height: 46px;
  background: linear-gradient(
    102deg,
    rgba(37, 123, 251, 1),
    rgba(0, 229, 199, 1)
  );
  border-radius: 3px;
  margin: 100px auto 0;
  color: #fefefe;
  font-size: 18px;
}
.editor_btn:hover {
  opacity: 0.8;
}
.editor_word {
  margin-left: 20px;
}
/* 提交按钮 */
.submit_btn {
  margin-top: 100px;
}
.confirm_btn {
  width: 185px;
  height: 46px;
  background: linear-gradient(
    102deg,
    rgba(37, 123, 251, 1),
    rgba(0, 229, 199, 1)
  );
  border-radius: 3px;
  color: #fefefe;
  font-size: 18px;
  text-align: center;
  line-height: 46px;
}
.confirm_btn:hover {
  opacity: 0.8;
}
.cancel_btn {
  width: 183px;
  height: 44px;
  border: 1px solid #999;
  text-align: center;
  line-height: 46px;
  color: #666;
  font-size: 18px;
  border-radius: 3px;
}
.cancel_btn:hover {
  border-color: #526aa6;
  opacity: 0.8;
}
</style>