<template>
  <a-modal class="dc-user-change-password-modal" title="修改密码" :visible="modalVisible" :width="500" :confirm-loading="confirmLoading" :maskClosable="false" cancelText="取消" okText="确认" @ok="handleOk" @cancel="handleCancel">
    <a-form-model class="dc-form-model" ref="formRef" :model="form" :rules="rules" layout="horizontal" :label-col="{ flex: '75px' }">
      <!-- 菜单名称 -->
      <a-form-model-item label="新密码" prop="newPassword">
        <a-input v-model="form.newPassword" :maxLength="20" allow-clear />
      </a-form-model-item>
      <!-- 菜单名称 -->
      <a-form-model-item label="确认密码" prop="repeatNewPassword">
        <a-input v-model="form.repeatNewPassword" :maxLength="20" allow-clear />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { FormModel, Input, message } from "ant-design-vue";
import { Prop, Ref } from "vue-property-decorator";
import { ChangePassword } from "../../model/ChangePassword";
import { userStore } from "../../stores/user.store";
import { IdentityType } from "../../constants/enum/identity-type.enum";
import { RestfulResponse } from "../../model/RestfulResponse";
import { apiService } from "../../services/api.service";
import sysUserLoginApi from "../../constants/api/sys-user-login.api";
import { Code } from "../../constants/enum/code.enum";
import { RestApi } from "../../model/RestApi";

@Component({
  name: "UserChangePassword",
  components: {
    [Input.name]: Input,
    [FormModel.name]: FormModel,
    [FormModel.Item.name]: FormModel.Item,
  },
})
export default class UserChangePassword extends Vue {
  @Ref() formRef!: FormModel | any; // 表单对象引用

  @Prop({ default: () => false }) visible!: boolean; // 模态框展开标识

  confirmLoading = false; // 请求等待状态标识

  form: ChangePassword = new ChangePassword({
    userId: userStore.user?.userId,
    identityType: IdentityType.password.code,
  });

  validateRepeatPass = (rule: any, value: any, callback: any) => {
    if (value !== this.form.newPassword) {
      callback(new Error("两次密码不一致!"));
    } else {
      callback();
    }
  };

  rules = {
    newPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
    repeatNewPassword: [
      { required: true, message: "请再次输入密码", trigger: "blur" },
      { validator: this.validateRepeatPass, trigger: "change" },
    ],
  };

  // 内部显示标识
  get modalVisible() {
    return this.visible;
  }

  set modalVisible(newValue) {
    this.$emit("update:visible", newValue);
  }

  /**
   * @description: 确认事件
   * @author ChenRui
   * @date 2021/10/11 17:01
   */
  handleOk() {
    this.formRef.validate((valid: boolean) => {
      if (valid) {
        this.confirmLoading = true;

        const restApi: RestApi = new RestApi(sysUserLoginApi.updatePassword);
        restApi.url = this.$dc.baseApi + sysUserLoginApi.updatePassword.url;

        apiService.general(restApi, undefined, this.form).then((response: RestfulResponse) => {
          this.confirmLoading = false;
          if (response.code === Code.SUCCESS.code) {
            message.info({ content: response.msg! });
            this.handleCancel(null, response);
          } else {
            message.error({ content: response.msg! });
          }
        });
      }
    });
  }

  /**
   * @description: 取消编辑
   * @author ChenRui
   * @date 2021/10/11 17:01
   */
  handleCancel(event: any, response: RestfulResponse) {
    this.$emit("close", response || RestfulResponse.failure());
    this.modalVisible = false;
  }
}
</script>

<style scoped lang="scss">
.dc-user-change-password-modal {
  .dc-form-model {
    ::v-deep {
      > .ant-form-item {
        display: flex;
        flex-direction: row;
        .ant-form-item-control-wrapper {
          flex-grow: 1;
          .ant-input-affix-wrapper {
            padding: 0;
          }
        }
      }
    }
  }
}
</style>
