<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height = "auto">
        <!-- 条件筛选工具栏 -->
        <div class="header-button-box">
          <el-button size = "mini" class="el-icon-edit" type="primary" @click="updateUserConfirm">{{$t("Security.saveModify")}}</el-button>
          <el-button size = "mini" class="el-icon-edit-outline" type="primary" v-if="updateCommand.visible" @click="updateCommand.execute">{{$t("Security.modifyPassword")}}</el-button>
        </div>
      </el-header>
      <!-- Form数据表单 -->
      <el-main>
        <el-form ref="form" :model="userForm" :inline="true" :label-width="formLabelWidth" size="mini">
          <el-row class="user-box">
            <el-form-item :label="$t('Security.userName')+'：'">
              <el-input type="text" size='mini' :placeholder="$t('common.placeholder')"
                        v-model="userForm.userName"
                        v-on:blur="userNameCheck"
                        autocomplete="off"></el-input>
            </el-form-item>
            <br/>
            <el-form-item :label="$t('Security.userGroup')+'：'">
              <el-select v-model="userForm.usergroupKey" size="mini"
                         :placeholder="$t('common.placeholder')"
                         :disabled="true">
                <el-option
                  v-for="item in userGroupList"
                  :key="item.usergroupKey"
                  :label="item.usergroupName"
                  :value="item.usergroupKey">
                </el-option>
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item :label="$t('Security.telephone')+'：'">
              <el-input type="text" size='mini' :placeholder="$t('common.placeholder')"
                        v-model="userForm.phone"
                        :clearable="true"
                        v-on:blur="phoneCheck"
                        autocomplete="off"></el-input>
            </el-form-item>
            <br/>
            <el-form-item :label="$t('Security.address')+'：'">
              <el-input type="text" size='mini' :placeholder="$t('common.placeholder')"
                        v-model="userForm.address"
                        v-on:blur="textLengthCheck(userForm.address)"
                        :clearable="true"
                        autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import UserService from '../../domain/services/UserService'
import UserGroupService from '../../domain/services/UserGroupService'
import CommandExecuteContext from '../../commands/CommandExecuteContext'
import UserCommands from '../../commands/UserCommands'
import legitimacyCheck from '../../utils/legitimacyCheck'
import HelperUtil from '../../utils/HelperUtil'

export default {
  name: 'ModifyPersonalInfo',

  components: {
    CommandExecuteContext
  },

  // 创建期间
  beforeCreate () {
  },

  created () {
    this.getUserInfo()
    this.getAllUserGroups()
    if (window.localStorage.getItem('user-language') === 'en') {
      this.formLabelWidth = '80px'
    } else {
      this.formLabelWidth = '60px'
    }
  },

  data () {
    return {
      // 命令
      commandContext: {},

      // form参数
      formLabelWidth: '120px',

      // 用户对象
      user: {
        address: '',
        delFlag: 0,
        editFlag: 0, // 0可编辑；1不可编辑
        lockFlag: 0, // 0：未锁定 1：已锁定
        modifyTime: '',
        password: '',
        phone: '',
        userKey: '',
        userName: '',
        usergroupKey: ''
      },
      // 用户组List
      userGroupList: [],

      // 用户表单
      userForm: {
        userName: '',
        usergroupKey: '',
        phone: '',
        address: ''
      }

    }
  },

  methods: {
    /* ---------------------------修改用户初始化--------------------------- */

    /***
      * @Description  : 获取登录用户信息
      * @author       : zf
      * @date         : 2019/05/10 11:38
      */
    getUserInfo: function () {
      let _this = this
      UserService.getUserInfo().then(result => {
        // 成功
        _this.user = result
        _this.userForm.usergroupKey = _this.user.usergroupKey
        _this.userForm.address = _this.user.address
        _this.userForm.phone = _this.user.phone
        _this.userForm.userName = _this.user.userName
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /***
       * @Description  : 获取全部用户组
       * @author       : zf
       * @date         : 2019/03/13 16:00
       */
    getAllUserGroups: function () {
      let _this = this
      UserGroupService.getAllUserGroups().then(result => {
        // 成功
        _this.userGroupList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },

    /* ---------------------------修改用户其他信息--------------------------- */

    updateUserConfirm: function () {
      let _this = this
      if (this.userForm.userName === this.user.userName && this.userForm.phone === this.user.phone && this.userForm.address === this.user.address) {
        _this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.UNUPDATE_CODE))
        return
      }
      _this.InfoTip.conformTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.MODIFY_PERSONERLY_INFORMATION)).then(() => {
        this.updateUserConfiguration()
      }).catch(() => {
      })
    },

    /***
       * @Description  : 保存修改选项
       * @author       : zf
       * @date         : 2019/03/13 10:30
       */
    updateUserConfiguration: function () {
      let _this = this
      if (this.userNameCheck() && this.phoneCheck()) {
        let currentUser = {}
        currentUser['userKey'] = this.user.userKey
        currentUser['userName'] = this.userForm.userName
        currentUser['usergroupKey'] = this.userForm.usergroupKey
        currentUser['editFlag'] = this.user.editFlag
        currentUser['password'] = this.user.password
        currentUser['phone'] = this.userForm.phone
        currentUser['address'] = this.userForm.address
        currentUser['modifyTime'] = this.user.modifyTime
        currentUser['delFlag'] = this.user.delFlag
        currentUser['lockFlag'] = this.user.lockFlag
        let loadingInstance = _this.Loading.openLoading()
        UserService.modifyUserInfo(currentUser).then(result => {
          // 成功
          _this.Loading.closeLoading(loadingInstance)
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.MODIFY_CODE))
          _this.getUserInfo()
        }).catch(err => {
          // 失败
          _this.Loading.closeLoading(loadingInstance)
          _this.InfoTip.errorTip(_this, err)
        })
      }
    },

    /* ---------------------------修改表单检查合法性--------------------------- */

    /***
       * @Description  : 检验电话号码合法性
       * @author       : zf
       * @date         : 2019/03/18 14:29
       */
    phoneCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.phoneNumberCheck(this.userForm.phone)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PHONE_CODE))
        return false
      } else {
        return true
      }
    },

    /***
       * @Description  : 用户名检测
       * @author       : zf
       * @date         : 2019/03/18 14:32
       */
    userNameCheck: function () {
      let userCheck = legitimacyCheck()
      if (!userCheck.textNullCheck(this.userForm.userName)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE))
        return false
      } else {
        if (this.textLengthCheck(this.userForm.userName)) {
          return true
        } else {
          return false
        }
      }
    },

    /***
      * @Description  : 校验输入文本长度不能超过20个字符
      * @author       : zf
      * @date         : 2019/05/20 10:46
      */
    textLengthCheck: function (text) {
      let userCheck = legitimacyCheck()
      if (!userCheck.textLengthCheck(text)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))
        return false
      }
      return true
    }

  },

  computed: {
    updateCommand () {
      return UserCommands.updateUserPwdCommand(this.user, this.commandContext)
    }
  },

  watch: {
    '$i18n.locale' () {
      if (window.localStorage.getItem('user-language') === 'en') {
        this.formLabelWidth = '80px'
      } else {
        this.formLabelWidth = '60px'
      }
    }
  }
}
</script>

<style scoped>
  .user-box{
    text-align: left;
  }
  .user-box /deep/ .el-form-item__label{
    font-size:12px;
  }
  .user-box /deep/ .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
  .user-box /deep/ .el-input{
    width: 200px;
  }
  .user-box /deep/ .el-form-item__label{
    color:#2c3e50;
    padding-right: 0px;
  }
</style>
