<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">修改账户资料</div>
    </div>
    <div class="content-container">
      <el-row>
        <el-col :span="18">
          <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号" prop="account">
                  <el-input v-model="ruleForm2.account" placeholder="请填写您的账号" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名" prop="name">
                  <el-input v-model="ruleForm2.name" placeholder="请填写您的用户名" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model.number="ruleForm2.phone" placeholder="请填写您的联系电话" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系邮箱" prop="email">
                  <el-input v-model="ruleForm2.email" placeholder="请填写您的联系邮箱" maxlength="50"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位" prop="job">
                  <el-input v-model="ruleForm2.job" placeholder="请填写您的职位" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所在部门" prop="dep">
                  <el-input v-model="ruleForm2.dep" placeholder="请填写您的所在部门" maxlength="20"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="所在机构" prop="comp">
                <el-input v-model="ruleForm2.comp" placeholder="请填写您的所在机构" maxlength="50"></el-input>
              </el-form-item>
            </el-row>

            <el-form-item class="modiaB">
              <el-button type="primary" @click="submitForm('ruleForm2')">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { url, modifyUrl } from '@/api/modifyAccountInformation'
  export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if (!value) {
          return callback(new Error('请填写联系电话'))
        } else if (!reg.test(value)) {
          callback(new Error('联系电话格式有误，请检查后重新填写'))
        } else {
          callback()
        }
      }
      return {
        ruleForm2: {
          account: '',
          name: '',
          phone: '',
          email: '',
          job: '',
          dep: '',
          comp: ''
        },
        rules2: {
          account: [
            { message: '请填写账号', required: true }
          ],
          name: [
            { message: '请填写用户名', required: true }
          ],
          phone: [
            { validator: checkPhone, trigger: 'blur', required: true }
          ],
          email: [
            { type: 'email', message: '联系邮箱格式有误，请检查后重新填写', trigger: 'blur' }
          ],
          job: [
            { message: '请填写职位', required: true }
          ],
          dep: [
            { message: '请填写所在部门', required: true }
          ],
          comp: [
            { message: '请填写所在机构', required: true }
          ]
        }
      }
    },
    created() {
      this.$http.get(url, '', (response) => {
        if (response.success && response.data) {
          this.ruleForm2 = {
            account: response.data.account,
            name: response.data.name,
            phone: response.data.phone,
            email: response.data.email || '',
            job: response.data.job,
            dep: response.data.dep,
            comp: response.data.comp
          }
        }
      })
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.put(modifyUrl, this.ruleForm2, (response) => {
              if (response.success) {
                this.$message({
                  message: '资料修改成功',
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .modiaB {
    text-align: center;
    margin: 100px 0;
  }
</style>