<template>
  <div class="personal-info-container">
    <el-card class="personal-info-header">
      <div class="header-content">
        <div class="avator-container">
          <el-avatar :size="80" :src="photoUrl"></el-avatar>
          <el-upload
            action="string"
            :http-request="updateUserImage"
            :show-file-list="false"
          >
            <el-button size="mini" type="primary">{{
              $t('personal.upload')
            }}</el-button>
          </el-upload>
        </div>
        <div class="header-info">
          <el-row>
            <el-col :span="8">
              <div>
                {{ $t('personal.name') }}：{{ currentUser.user.fullname }}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                {{ $t('personal.role') }}：{{ currentUser.role.roleName }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div>
                {{ $t('personal.account') }}：{{ currentUser.user.account }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card
      class="personal-info-bottom"
      body-style="height:calc(100% - 50px);overflow:auto"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="120px"
        style="width: 600px"
      >
        <h4>{{ $t('personal.info') }}</h4>
        <el-form-item :label="$t('personal.name')">
          <el-input
            v-model="form.fullname"
            :placeholder="$t('common.input')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('personal.gender')">
          <el-select
            clearable
            v-model="form.sex"
            :placeholder="$t('common.input')"
          >
            <el-option
              v-for="item in sexList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <h4>{{ $t('personal.contact') }}</h4>
        <el-form-item :label="$t('personal.phone')" prop="mobile">
          <el-input
            v-model="form.mobile"
            :placeholder="$t('common.input')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('personal.mailbox')" prop="email">
          <el-input
            v-model="form.email"
            :placeholder="$t('common.input')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('personal.address')">
          <el-input
            type="textarea"
            v-model="form.address"
            :placeholder="$t('common.input')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 400px; text-align: center">
        <el-button type="primary" @click="updataInfo">{{
          $t('common.save')
        }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import uc from '@/api/uc.js'
export default {
  name: 'personal-info',
  data() {
    return {
      sexList: [
        {lable: '男', value: '男'},
        {lable: '女', value: '女'}
      ],
      // 创建验证规则
      rules: {
        mobile: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        email: [
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ]
      },
      currentUser: {
        role: {},
        user: {}
      },
      form: {},
      photoUrl: window.context.front + '/img/defaultPhoto.jpg',
      photo: ''
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    updateUserImage(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      uc.fileUpload(formData)
        .then(response => {
          this.photo = response.fileId
          this.form.photo = response.fileId
          this.$store
            .dispatch('menu/downloadImg', response.fileId)
            .then(res => {
              if (res != '') {
                this.photoUrl = res
              }
            })
          param.onSuccess() // 上传成功的图片会显示绿色的对勾
          this.$message.success('上传成功')
        })
        .catch(response => {
          param.onError()
        })
    },
    getInfo() {
      let currentUser = sessionStorage.getItem('currentUser')
      let account = JSON.parse(currentUser).account
      if (account) {
        uc.getUser(account).then(res => {
          this.currentUser = res
          this.form = res.user
          if (this.form.photo) {
            this.$store
              .dispatch('menu/downloadImg', this.form.photo)
              .then(res => {
                if (res != '') {
                  this.photoUrl = res
                }
              })
          }
        })
      }
    },
    updataInfo() {
      this.$http
        .post(window.context.uc + '/api/user/v1/user/updateUser', this.form)
        .then(res => {
          if ((res.status = 200)) {
            this.$message.success('更新成功')
            this.$bus.updataUserInfo()
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.personal-info-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  //   background: #f8fcff;
  .el-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e7eaec;
    // background: #314351;
  }
  .title {
    font-size: 16px;
    color: #fff;
  }
  .personal-info-header {
    height: 200px;
    margin: 10px 0;
  }
  .personal-info-bottom {
  }
  .header-content {
    display: flex;
    height: 100%;
  }
  .avator-container {
    width: 120px;
    height: 100%;
    margin-right: 10px;
    box-sizing: border-box;
    text-align: center;
  }
  .header-info {
    color: #333;
    width: calc(100% - 130px);
    padding: 20px 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
}
h4 {
  color: #333;
}
.el-card.is-always-shadow {
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(133, 133, 133, 0.1);
}
</style>
