<!--
  @description: 个人信息
  @author: XWl

  /shopmall/accountInfo
-->
<template>
  <div>
    <div class="shopmall-page-title">
      个人信息
    </div>
    <div class="accountInfo_content">
      <el-form
        ref="fromData"
        :model="fromData"
        :rules="rules"
        class="demo-form-inline demo_form"
        size="medium"
      >
        <el-row :gutter="20">
          <el-col :span="6" :offset="2" class="user-avatar">
            <el-form-item>
              <!-- <p class="user-avatar-title">
                用户头像
              </p> -->
              <!-- <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="uploadFile"
                :headers="headers"
                :disabled="true"
                class="avatar-uploader"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <img v-else src="@/assets/img/shopmall/person.png" class="avatar"> -->
              <!-- <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  style="border:1px solid #eeeeee"
                />-->
              <!--                <el-button class="btn change_btn" type="purple">修改头像</el-button>-->
              <!-- </el-upload> -->
              <!-- <div>
                <el-avatar :size="100" :src="url" shape="square" fit="fill" />
              </div>
              <el-upload type="purplePlain">修改头像</el-upload> -->
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="用户名称">
              <el-input v-model="fromData.userName" :style="{'width':width}" disabled />
              <!-- <span class="edit-btn" border="none">一旦注册成功,不能修改</span> -->
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="fromData.realName" :style="{'width':width}" disabled />
            </el-form-item>
            <el-form-item label="单位名称">
              <el-input v-model="info.companyName" :style="{'width':width}" disabled />
            </el-form-item>
            <el-form-item label="绑定电话" prop="mobilePhone">
              <el-input v-model="fromData.mobilePhone" :style="{'width':width}" disabled />
            </el-form-item>
            <el-form-item label="绑定邮箱" prop="email">
              <el-input v-model="fromData.email" :style="{'width':width}" disabled />
            </el-form-item>
            <!--            <el-form-item>-->
            <!--              <el-button class="btn" type="purple" size="medium" @click="submit('fromData')">确认修改</el-button>-->
            <!--            </el-form-item>-->
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { update, uploadFile } from '@/api/shoppingmall/accountInfo'
import { phone, email } from '@/assets/js/validate.js'
// import { getUserInfo } from '@/api/shoppingmall/common'
import { getToken } from '@/assets/js/utils/auth'
import { mapGetters } from 'vuex'
// import configListVue from '../../common/systemManagement/config/config-list.vue'

export default {
  name: 'AccountInfo',
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      width: '320px', // 表单
      fromData: {
        userName: '',
        realName: '',
        mobilePhone: '',
        email: ''
      },
      imageUrl: '',
      uploadFile: uploadFile,
      headers: {
        'X-AUTH-TOKEN': getToken()
      },
      rules: {
        mobilePhone: [
          { validator: phone, trigger: 'blur' }
        ],
        email: [
          { validator: email, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  mounted() {
    // 获取数据
    this.getInfo()
  },
  methods: {
    getInfo() {
      // 判断是否登录
      if (getToken()) {
        // 数据赋值
        const { userName, realName, mobilePhone, email } = this.info
        this.fromData.userName = userName
        this.fromData.realName = realName
        this.fromData.mobilePhone = mobilePhone
        this.fromData.email = email
      }
      // 头像图片
      this.imageUrl = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    // 上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('您确认修改信息吗?', '信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            update(this.fromData).then(res => {
              if (res.header.ret === '0') {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                // this.getInfo()
              }
            }).catch(() => {

            })
            // this.$message({
            //   type: 'success',
            //   message: '更新个人信息成功'
            // })
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.accountInfo_content {
  margin-top: 10vh;
  overflow: hidden;
}
/*头像上传*/
.user-avatar {
  text-align: center;
  .user-avatar-title {
    color: #999999;
  }
  // .avatar-uploader .el-upload {
  //   border: 1px dashed #d9d9d9;
  //   border-radius: 6px;
  //   cursor: pointer;
  //   position: relative;
  //   overflow: hidden;
  // }
  // .avatar-uploader .el-upload:hover {
  //   border-color: #409eff;
  // }
  // .avatar-uploader-icon {
  //   font-size: 28px;
  //   color: #8c939d;
  //   width: 178px;
  //   height: 178px;
  //   line-height: 178px;
  //   text-align: center;
  // }
  // .avatar {
  //   width: 178px;
  //   height: 178px;
  //   display: block;
  // }
}
/*提示*/
.edit-btn {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 20px;
  color: @orange;
  background-color: #fafafa;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.btn {
  display: block;
  width: 160px;
  margin-left: 25%;
  height: 40px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px solid #eeeeee;
}
.change_btn {
  display: block;
  margin: 5px auto;
  background: none;
  color: #00aaca;
  font-size: 12px;
  width: 85px;
  height: 28px;
  text-align: center;
}
</style>
