<template>
  <DialogForm
    ref="formRef"
    v-model:visible="dialogVisible"
    :model="model"
    :rules="rules"
    title="重置密码"
    :openButton="false"
    :dialogProps="{ width: '30%' }"
    @closed="closeDialog"
  >
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="model.password"
        type="password"
        show-password
      ></el-input>
    </el-form-item>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleCommitClick">重置</el-button>
      </span>
    </template>
  </DialogForm>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { resetUserPassword } from '~/service/user';

const props = defineProps({
  modelValue: Boolean,
  data: Array,
  done: Function
});
const formRef = ref();
const dialogVisible = ref(props.modelValue);
const model = reactive({
  password: ''
});
const rules = {
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ]
};

const emits = defineEmits(['update:modelValue']);

watch(
  () => props.modelValue,
  (v) => {
    dialogVisible.value = v;
  }
);

const handleCommitClick = async () => {
  try {
    await formRef.value.validate();
    const { code } = await resetUserPassword({
      user_guid: props.data.map((v) => v.user_guid).join(),
      password: model.password
    });
    if (code == 0) {
      formRef.value.close();
    }
  } catch (error) {}
};

const closeDialog = () => {
  dialogVisible.value = false;
  emits('update:modelValue', false);
};
</script>
