<template>
  <el-drawer v-model="isDrawer" :size="width" :title="props.title" @close="handleReset">
    <el-form
      :model="formParams"
      :rules="rules"
      ref="formRef"
      label-placement="left"
      :label-width="80"
    >
      <el-form-item label="登录账号" prop="username">
        <el-input placeholder="请输入登录账号" v-model="formParams.username" disabled />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          type="password"
          show-password-on="mousedown"
          placeholder="请输入密码"
          v-model="formParams.password"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="passwordRe">
        <el-input
          type="password"
          show-password-on="mousedown"
          placeholder="请输入密码"
          v-model="formParams.passwordRe"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-space>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { FormRules, ElMessage } from 'element-plus';
  import { cloneDeep } from 'lodash-es';
  import { UserType, resetCode } from '@/api/system/user-operate';

  const rules: FormRules = {
    username: {
      required: true,
      message: '登录账号不能为空',
      trigger: 'blur',
    },
    password: {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
    passwordRe: {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  };
  const emit = defineEmits(['change']);

  const props = defineProps({
    title: {
      type: String,
      default: '添加用户',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  const defaultValueRef = () => ({
    password: '',
    passwordRe: '',
  });

  const message = ElMessage;
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);

  const formParams = ref<UserType>(defaultValueRef());

  async function openDrawer(username?, userId? ) {
    formParams.value.username = username;
    formParams.value.userId = userId;
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((valid) => {
      if (!valid) {
        return message.error('请填写完整信息');
      }
      // 克隆
      const params = cloneDeep(formParams.value);
      if (params.password != params.passwordRe) {
        return message.error('两次密码不一致');
      }
      const addData = {
        newPwd: formParams.value.password as string,
        userId: Number(formParams.value.userId),
      };
      resetCode(addData).then(() => {
        emit('change');
        handleReset();
        closeDrawer();
        ElMessage.success('重置成功');
      });

      //然后进行调接口
    });
  }

  function handleReset() {
    formRef.value.resetFields();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
