<!--
  @description: 用户个人信息
  @author: 肖文龙
  @routerPath:
  @date:  2020/12/09
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      top="200px"
      custom-class="el-dialog__body-p0"
      width="800px"
    >
      <div class="main mb10">
        <el-form ref="dataForm" :rules="rules" :model="fromData" :inline-message="true">
          <div class="page-title">
            账号信息
          </div>
          <table class="from_table">
            <tr>
              <!-- 用户名 -->
              <td> <el-form-item label="用户名" prop="userName" /></td>
              <td>
                {{ fromData.userName }}
              </td>
              <!-- 用户状态 -->
              <td><el-form-item label="用户状态" prop="status" /></td>
              <td>
                <span v-if="fromData.status===1">激活</span>
                <span v-if="fromData.status===0">冻结</span>
              </td>
            </tr>
          </table>
          <div class="page-title">
            基本信息
          </div>
          <table class="from_table">
            <tr>
              <!-- 真实姓名 -->
              <td><el-form-item label="真实姓名" prop="realName" /></td>
              <td><el-input v-model="fromData.realName" maxlength="10" minlength="6" /></td>
              <!-- 手机号码 -->
              <td><el-form-item label="手机号码" prop="mobilePhone" /></td>
              <td><el-input v-model="fromData.mobilePhone" /></td>
            </tr>
            <tr>
              <!-- 身份证号 -->
              <td><el-form-item label="身份证号" prop="idCard" /></td>
              <td><el-input v-model="fromData.idCard" /></td>
              <!-- 常用邮箱 -->
              <td><el-form-item label="常用邮箱" prop="email" /></td>
              <td><el-input v-model="fromData.email" /></td>
            </tr>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="saveData">
          确定
        </el-button>
        <el-button :loading="loading" @click="dialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api */
import { updateCurrentUserByUserId } from '@/api/common/user.js'
/* 公用方法 */
import { makeSureId, characters1_auto, validateInput, phone, email } from '@/assets/js/validate'
import { restoreInitialValue } from '@/assets/js/utils'// 常用方法
export default {
  data() {
    return {
      loading: false,
      title: '个人信息', // 标题
      dialogVisible: false, // 弹框状态
      // 用户信息
      fromData: {
        id: '',
        realName: '', // 真实姓名
        idCard: '', // 身份证号
        userName: '', // 用户名
        email: '', // 邮箱
        mobilePhone: '' // 手机号码
      },
      rules: {
        idCard: [{ required: true, validator: makeSureId, trigger: 'blur' }], // 身份证号
        realName: [{ required: true, validator: characters1_auto, trigger: 'blur' }, { validator: validateInput }], // 真实姓名
        email: [{ validator: email, trigger: 'blur' }], // 邮箱
        mobilePhone: [{ required: true, validator: phone, trigger: 'blur' }] // 手机号码
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        // 初始化
        restoreInitialValue(this.fromData)
      }
    }
  },
  methods: {
    // 打开弹框
    open() {
      this.dialogVisible = true
      this.loadData()
    },
    // 获取数据
    loadData() {
      // 获取用户个人信息
      this.$store.dispatch('getFindUser').then(data => {
        this.fromData = data
      })
    },
    // 确定
    saveData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const data = {
            userId: this.fromData.id, // 用户id
            realName: this.fromData.realName, // 真实姓名
            idCard: this.fromData.idCard, // 身份证号
            userName: this.fromData.userName, // 用户名
            email: this.fromData.email, // 邮箱
            mobilePhone: this.fromData.mobilePhone // 手机号码
          }
          updateCurrentUserByUserId(data).then(() => {
            this.dialogVisible = false
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
