<style lang="less">
@import "./profile.less";
</style>

<template>
  <div class="main">
    <div class="main-md">
      <el-form :model="regForm" status-icon :rules="rules" class="profile-lable"  ref="regForm">

        <el-form-item label="姓名" prop="nickname" class="pr">
          <el-input prop="nickname" v-model="regForm.nickname" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="身份证" prop="cardId" class="pr">
          <el-input prop="cardId" v-model="regForm.cardId" placeholder="身份证"></el-input>
        </el-form-item>

        <el-form-item label="公司名称" prop="company" class="pr">
          <el-input prop="company" v-model="regForm.company" placeholder="公司名称"></el-input>
        </el-form-item>

        <el-form-item label="家庭住址" prop="address" class="pr">
          <el-input prop="address" v-model="regForm.address" placeholder="家庭住址"></el-input>
        </el-form-item>

        <el-form-item label="工作年限" prop="years" class="pr">
          <el-input prop="years" v-model="regForm.years"  type="number" placeholder="工作年限"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender" class="pr">
          <el-select v-model="regForm.gender" filterable placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学历" prop="education" class="pr">
          <el-select v-model="regForm.education" filterable placeholder="请选择">
            <el-option v-for="(value,key) in educationOption" :key="key" :label="value" :value="key"></el-option>
          </el-select>
        </el-form-item>

        <div class="submit" >
          <el-button type="primary" class="submit-btn" @click="submitForm('regForm')">保存</el-button>
          <el-button type="primary" class="submit-btn" @click="goHome">回到主页</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {httpServer} from "@/components/httpServer/httpServer.js";
import data from "@/components/data/data.js";
import { MessageBox  } from 'element-ui';

export default {
  data() {
    return {
      show: true,
      count: 0,
      regForm: {
        years:1,
        company: "",
        nickname: "",
        cardId: "",
        education:"本科",
        gender: "男",
        address: ""
      },
      educationOption:data.educationOption,
      rules: data.rulesProfile
    };
  },
  beforeMount(){
      this.getData()
  },
  methods: {
    getData(){
       httpServer({ url: "/home/profile" }, {}).then(res => {
           if( res.data.code == 200){
               this.regForm = res.data.data;
           }
        }); 
    },
    goHome(){
        this.$router.push(`/main/index`);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
            return false;
        }
        let {years,company,nickname,cardId,education,gender,address} = this.regForm;
        years += ''
        let param = {years,company,nickname,cardId,education,gender,address};
        httpServer({ url: "/home/updateProfile" }, param).then(res => {
            if( res.data.code == 200){
                MessageBox("保存成功", '提示', {
                    confirmButtonText: '确定',
                    showClose: true,
                    type: 'sucess'
                }); 
            }
        });
      })
    }
  }
};
</script>