<template>
  <div class="messagexk pagex">
    <div class="message-box">
      <div class="h3">基本信息</div>
      <el-form :model="userinfo" label-width="90px">
        <el-form-item label="公司名称">
          <el-input v-model="userinfo.company_name" placeholder="" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="userinfo.contacts_name"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input v-model="userinfo.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userinfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="submits" @click="submituser">确认</div>
        </el-form-item>

      </el-form>
      <div class="fl up-box">
        <img :src="userinfo.avatar" class="imspre" />
        <el-upload class="avatar-uploader" :action="upUrl" :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <span class="icon iconfont fl"></span>
          <div class="fl">更换头像</div>
        </el-upload>
      </div>
    </div>
    <Menu />
  </div>
</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  import {
    NODE_ENVS
  } from "../../ajax";
  import {
    Form,
    FormItem,
    Input,
    Upload,
    Message
  } from 'element-ui'
  Vue.use(Form).use(FormItem).use(Input).use(Upload)
  export default {
    name: "message",

    data() {
      return {
        upUrl: NODE_ENVS + '/api/user/setavatar',
        userinfo: {
          company_name: '',
          contacts_name: '',
          mobile: '',
          email: '',
          avatar: 'http://img.ichunt.com/test/images/ichunt/9f/34/9f349b1400f659e5ad270412d4dbe160.jpg'
        }
      };
    },
    watch: {},
    created() {
      this.getUseInfo()
    },
    computed: {},
    methods: {
      getUseInfo() {
        var userInfo_ = sessionStorage.getItem('userInfox');
        if (userInfo_) {
          this.userinfo = JSON.parse(userInfo_);
        } else {
          this.$http('get', "/api/user/getuserinfo").then(res => {
            this.userinfo = res.data;
            if (res.data) {
              sessionStorage.setItem('userInfox', JSON.stringify(res.data));
            }

          })
        }

      },
      submituser() {
        this.$http('post', "/api/user/setuserinfo", {
          email: this.userinfo.email,
          contacts_name: this.userinfo.contacts_name
        }).then(res => {
          if (res.err_code === 0) {
              Message("提交成功");
              sessionStorage.removeItem('userInfox')
          } else {
            Message(res.err_msg);
          }

        })
      },
      handleAvatarSuccess(res, file) {
        if (res.err_code === 0) {
          Message("设置成功")
          this.userinfo.avatar = URL.createObjectURL(file.raw);
          sessionStorage.removeItem('userInfox')
        } else {
          Message(res.err_msg);
        }

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg' || 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      }

    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
  @import "../../assets/css/info/message.min.css";
</style>