<template>
  <a-modal
    v-model:visible="props.visible"
    title="发送消息"
    width="800px"
    @cancel="dialogClose"
  >
    <a-form :model="formData" :label-col="{ style: { width: '10-0px' } }" ref="formRef">
      <a-form-item
        label="消息内容"
        name="message"
        :rules="{ required: true, message: '请输入消息内容', trigger: 'blur' }"
      >
        <a-textarea v-model:value="formData.message"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="dialogClose">取消</a-button>
        <a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
      </span>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
  import { sendMsg } from '@/api/system/user';
  import { useUserStore } from '@/store/modules/user';
  import { onMounted, reactive, ref } from 'vue';
  import { useLockFn } from '@/utils/useLockFn';
  import { message } from 'ant-design-vue';

  /**
   * 定义参数
   */
  const userStore = useUserStore();
  const userInfo: object = userStore.getUserInfo || {};
  const emit = defineEmits(['update:visible']);
  const formRef = ref();

  /**
   * 定义接收的参数
   */
  const props = defineProps({
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
    receiveId: {
      type: String,
      default: '',
    },
  });

  /**
   * 定义表单参数
   */
  const formData = reactive({
    message: '',
  });

  /**
   * 关闭窗体
   */
  const dialogClose = () => {
    emit('update:visible', false);
  };

  /**
   * 执行提交表单数据
   */
  const handleSubmit = async () => {
    await formRef.value?.validate();
    await sendMsg({
      formId: userInfo.id,
      receiveId: props.receiveId,
      message: formData.message,
    });
    message.success('发送成功');
    emit('update:visible', false);
  };

  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
</script>
