<!-- 个人信息组件 -->
<template>
  <div class="sui-slider"  id="headerPersonInfo">
    <div class="sui-slider-main">
      <div class="sui-slider-title">
        <h2>
          <span class="sui-slider-title-text">个人信息</span></h2>
        <span class="sui-icons sui-icons-close sui-slider-title-x"></span>
      </div>
      <div class="sui-slider-content">
        <el-form  ref="userInfoForm" :model="userInfoForm" label-width="120px" :rules="ruleUserInfoForm" class="totalForm" >
          <el-form-item label="姓 名" prop="username">
            <el-input size="small" type="text" v-model="userInfoForm.username"></el-input>
          </el-form-item>
          <el-form-item label="性 别" prop="sex">
            <el-radio-group size="small" v-model="userInfoForm.sex">
              <el-radio-button label="0">男</el-radio-button>
              <el-radio-button label="1">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
            <el-form-item label="电 话" prop="phone">
              <el-input size="small" v-model="userInfoForm.phone" :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="手 机" prop="telephone">
              <el-input size="small" v-model="userInfoForm.telephone" :maxlength="11"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="邮 箱" prop="email">
              <el-input size="small" v-model="userInfoForm.email" :maxlength="40"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="籍 贯" prop="native_place">
              <el-input size="small" v-model="userInfoForm.native_place" :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="部 门" prop="dept_name">
              <el-input size="small" v-model="userInfoForm.dept_name"  disabled></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="职 位" prop="duty">
              <el-input size="small" v-model="userInfoForm.duty" disabled></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="生 日" prop="birthday">
              <el-date-picker size="small" style="width: 100%;" :editable="false" type="date" placement="top" v-model="userInfoForm.birthday" @on-change="setAge"></el-date-picker>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="年 龄" prop="age">
              <el-input size="small" v-model="userInfoForm.age" disabled></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="文化程度" prop="education">
              <el-input size="small" v-model="userInfoForm.education"  :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="政治面貌" prop="political">
              <el-input size="small" v-model="userInfoForm.political"  :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="毕业院校" prop="graduate_school">
              <el-input size="small" v-model="userInfoForm.graduate_school"  :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="专 业" prop="profession">
              <el-input size="small" v-model="userInfoForm.profession"  :maxlength="20"></el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="个性签名" prop="individuality_signature">
            <el-input size="small" v-model="userInfoForm.individuality_signature"  :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="地 址" prop="address">
            <el-input size="small" v-model="userInfoForm.address"  :maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="备 忘" prop="memo">
            <el-input size="small" v-model="userInfoForm.memo"  :maxlength="100" type="textarea" :autosize="{minRows: 3,maxRows: 5}"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: right;">
              <el-button size="small" type="ghost" @click="userInfoReset('userInfoForm')" style="margin-right: 8px">重置</el-button>
              <el-button size="small" type="primary" :loading="userInfoLoading"  @click="userInfoSubmit('userInfoForm')">
                <span v-if="!userInfoLoading">提交</span>
                <span v-else>提交中...</span>
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
   <div class="sui-slider-cover"></div>
  </div>
</template>
<script>
import {formatDate} from '@/utils/util.js';
export default {
  props: ['loginUserInfo'],
  watch: {
    loginUserInfo () {
      // this.userInfoForm = Object.assign({}, this.loginUserInfo);
      let dday = this.loginUserInfo.birthday;
      let age = this.loginUserInfo.age;
      if (dday) {
        dday = dday.replace(/-/g, '/');
        try {
          dday = new Date(dday);
          age = new Date().getFullYear() - dday.getFullYear();
        } catch (e) {
          dday = null;
        }
      } else {
        dday = null;
      }
      this.userInfoForm = {
        username: this.loginUserInfo.username,
        sex: this.loginUserInfo.sex,
        phone: this.loginUserInfo.phone,
        telephone: this.loginUserInfo.telephone,
        email: this.loginUserInfo.email,
        address: this.loginUserInfo.address,
        dept_name: this.loginUserInfo.dept_name,
        duty: this.loginUserInfo.duty,
        birthday: dday,
        education: this.loginUserInfo.education,
        graduate_school: this.loginUserInfo.graduate_school,
        political: this.loginUserInfo.political,
        profession: this.loginUserInfo.profession,
        native_place: this.loginUserInfo.native_place,
        age: age,
        memo: this.loginUserInfo.memo,
        individuality_signature: this.loginUserInfo.individuality_signature
      }
    }
  },
  data () {
    const validatePhone = (rule, value, callback) => {
      let reg = /^1\d{10}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('请输入有效的手机号码'));
      }
    };
    return {
      userInfoLoading: false,
      userInfoForm: { },
      ruleUserInfoForm: {
        telephone: [
          /* { required: true, message: '请输入手机号码', trigger: 'change' }, */
          { validator: validatePhone, trigger: 'change' }
        ],
        email: [
          /* { required: true, message: '请输入邮箱地址', trigger: 'change' }, */
          { type: 'string', max: 40, message: '邮箱不能多于40字', trigger: 'change' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'change' }
        ],
        /* birthday: [
          { required: true, type: 'date', message: '请选择出生日期', trigger: 'change' }
        ] */
        memo: [
          { type: 'string', max: 100, message: '签名不能多于200字', trigger: 'change' }
        ],
        address: [
          { type: 'string', max: 50, message: '地址不能多于100字', trigger: 'change' }
        ],
        phone: [
          { type: 'string', max: 20, message: '电话不能多于20字', trigger: 'change' }
        ],
        individuality_signature: [
          { type: 'string', max: 200, message: '签名不能多于200字', trigger: 'change' },
          { whitespace: true, message: '不能全为空字符', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    setAge (data) {
      this.userInfoForm.age = new Date().getFullYear() - new Date(data).getFullYear();
    },
    // 个人信息保存按钮
    userInfoSubmit (name) {
      let _this = this;
      let oUser = Object.assign({}, _this.loginUserInfo, _this.userInfoForm);
      if (oUser.birthday) {
        oUser.birthday = formatDate(oUser.birthday, 'yyyy-MM-dd');
      }
      _this.$refs[name].validate((valid) => {
        if (valid) {
          _this.userInfoLoading = true;
          _this.axios.post('/core/auth/user/updateWeb',
            [oUser]
          ).then(function (response) {
            if (response) {
              _this.$message.success('修改成功');
              $('#headerPersonInfo').slider('hide');
              _this.$emit('modifyUserName', _this.userInfoForm.username);
            }
            _this.userInfoLoading = false;
          }).catch(function () {
            _this.userInfoLoading = false;
          });
        }
      });
    },
    userInfoReset (name) {
      this.$refs[name].resetFields();
    },
    changeDate (now, flag) {
      if (typeof (now) === 'undefined' || typeof (now) === 'string' || now == null) {
        return now;
      }
      let y = now.getFullYear();
      let m = now.getMonth() + 1;
      let d = now.getDate();
      let hour = now.getHours();
      let min = now.getMinutes();
      let ss = now.getSeconds();
      if (flag === 1) {
        return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
      } else if (flag === 2) {
        return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (ss < 10 ? '0' + ss : ss);
      } else if (flag === 3) {

      }
    }
  }
}
</script>
<style scoped>
  .totalForm{
    padding: 10px 30px 0 0;
  }
</style>
