<template>
  <el-dialog
    :title="$t1('个人设置')"
    :append-to-body="true"
    :modal-append-to-body="falseValue"
    :close-on-click-modal="falseValue"
    :visible.sync="showDialog"
    :modal="falseValue"
    custom-class="dialog-style list-dialog demo-sty_2"
    width="500px"
    @close="dialogClose"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div id="containt" style="height: 300px">
      <div class="detail-wrap">
        <el-form ref="editForm" :model="user">
          <div class="d-header clearfix">
            <div class="fl">
              <i class="el-icon-info"/>
              {{ dataId ? $t1('查看用户') : $t1('新增用户') }}
            </div>
            <div class="fr">
              <el-button type="primary" plain class="button-sty" @click="reloadContent" icon="el-icon-refresh-right">
                {{ $t1('重置') }}
              </el-button>
              <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData">{{ $t1('保存') }}
              </el-button>
            </div>
          </div>
          <div class="d-cont" style="height: auto">
            <div class="d-item" style="padding-right: 0">
              <div class="title first"><b>{{ $t1('基本信息') }}</b></div>
              <table class="table-detail">
                <tbody>
                <tr>
                  <th>
                    <em class="f-red">*</em>
                    {{ $t1('登录名') }}
                  </th>
                  <td colspan="3">
                    {{ user.loginAccount }}
                  </td>
                </tr>
                <tr>
                  <th>
                    <em class="f-red">*</em>
                    {{ $t1('姓名') }}
                  </th>
                  <td colspan="3">
                    <el-form-item prop="nickName" :rules="[{ required: true, trigger: 'blur' }]">
                      <el-input size="small" v-model="user.nickName" maxlength="200" lay-verify="required" required=""
                                clearable/>
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t1('密码') }}</th>
                  <td colspan="3">
                    <el-form-item prop="password" :rules="passRules">
                      <el-input
                        size="small"
                        type="password"
                        v-model="user.password"
                        show-password
                        maxlength="255"
                        autocomplete="off"
                        auto-complete="new-password"
                        clearable
                      />
                    </el-form-item>
                  </td>
                </tr>
                <tr>
                  <th>{{ $t1('确认密码') }}</th>
                  <td colspan="3">
                    <el-form-item prop="rePassword" :rules="pass2Rules">
                      <el-input
                        size="small"
                        type="password"
                        v-model="user.rePassword"
                        show-password
                        maxlength="255"
                        autocomplete="off"
                        auto-complete="new-password"
                        lay-verify="confirmPass"
                        clearable
                      />
                    </el-form-item>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'userInfo',
  components: {},
  props: ['_dataId'],
  created() {
    if (this._dataId && !isNaN(this._dataId)) this.dataId = this._dataId;
  },
  mounted() {
    this.getData();
  },
  data() {
    var validatePass = (rule, value, callback) => {
      const isPassRequired = !this.dataId;
      if (isPassRequired && (value == '' || value == undefined)) {
        callback(new Error(this.$t1('密码不能为空')));
      } else {
        callback();
      }
      this.$refs.editForm.validateField('rePassword');
    };
    var validatePass2 = (rule, value, callback) => {
      const isPassRequired = !this.dataId;
      const rePassword = value != undefined ? value : '';
      const password = this.user.password != undefined ? this.user.password : '';

      if (isPassRequired && rePassword == '') {
        callback(new Error(this.$t1('确认密码不能为空')));
      } else if (rePassword != password) {
        callback(new Error(this.$t1('两次输入密码不一致!')));
      } else {
        callback();
      }
    };
    return {
      showDialog: true,
      falseValue: false,
      dataId: '',
      hBtn: true,
      user: {},
      vxeOption: {},
      companyInfoOption: {},
      userRoleOption: {},
      showContent: true,
      passRules: [{validator: validatePass, trigger: 'blur', required: false}],
      pass2Rules: [{validator: validatePass2, trigger: 'blur', required: false}]
    };
  },
  methods: {
    getData() {
      let t = this._dataId;
      if (this.dataId && !isNaN(this.dataId)) {
        this.isEdit = true;
        this.$commonHttp({
          url: USER_PREFIX + `/user/get`,
          method: `post`,
          data: {
            id: this.dataId
          },
          isLoading: true,
          modalStrictly: true,
          success: res => {
            var user = res.objx || {};
            this.user = res.objx || {};
            this.user.password = '';
          }
        });
      } else {
        this.isEdit = false;
        this.user = {
          enabled: true
        };
      }
    },
    saveData() {
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = USER_PREFIX + '/user/updateUserInfo';
            this.$http({
              url: url,
              method: `post`,
              data: this.user,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    this.reloadContent();
                  }
                });
              }
            });
          });
        }
      });
    },
    dialogClose() {
      this.$emit('update:visiable', false);
    },
    reloadContent() {
      this.user = {};
      this.getData();
    }
  }
};
</script>
