<template>
  <PageWrapper title="模态框">
    <template #headerContent
      >模态框，用于向用户收集或展示信息，Modal 基于 Dialog 组件，扩展最大化功能
      <br />
      以下是 useModal 方式，ref
      方式，也支持，使用方式和其他组件一致，如：modalRef.value.closeModal()</template
    >
    <el-card class="mt-3 proCard">
      <el-alert title="Modal嵌套Form" type="info">
        使用 useModal 进行弹窗展示和操作，并演示了在 Modal 内和 Form 组件，组合使用方法
      </el-alert>
      <el-divider />
      <el-space>
        <el-button type="primary" @click="showModal">打开Modal嵌套Form例子</el-button>
      </el-space>
      <el-divider />
      <el-alert title="个性化轻量级" type="info">
        使用 useModal 进行弹窗展示和操作，自定义配置，实现轻量级效果，更多配置，请参考文档
      </el-alert>
      <el-divider />
      <el-space>
        <el-button type="primary" @click="showLightModal">轻量级确认</el-button>
      </el-space>
      <el-divider />
      <el-alert title="提示" type="info">
        组件暴露了，setProps 方法，用于修改组件内部
        Props，比如标题，等，具体参考UI框架文档，DialogReactive Properties
      </el-alert>
    </el-card>

    <basicModal @register="modalRegister" ref="modalRef" @ok="okModal">
      <template #default>
        <BasicForm @register="register" @reset="handleReset" class="basicForm">
          <template #statusSlot="{ model, field }">
            <el-input v-model="model[field]" placeholder="请输入您今天的状态" />
          </template>
        </BasicForm>
      </template>
    </basicModal>

    <basicModal @register="lightModalRegister" ref="modalRef" @ok="lightOkModal">
      <template #default>
        <el-space>
          <el-button type="primary" @click="updateTitle">更新标题</el-button>
          <el-button type="danger" @click="lightCloseModal">关闭弹窗</el-button>
        </el-space>
      </template>
    </basicModal>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { basicModal, useModal } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';

  const schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'Input',
      label: '姓名',
      labelMessage: '这是一个提示',
      rowProps: {
        span: 1,
      },
      componentProps: {
        placeholder: '请输入姓名',
        onInput: (e: any) => {
          console.log(e);
        },
      },
      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      field: 'mobile',
      component: 'Input',
      label: '手机',
      componentProps: {
        placeholder: '请输入手机号码',
        showButton: false,
        onInput: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'type',
      component: 'Select',
      label: '类型',
      rowProps: {
        //span: 24,
      },
      componentProps: {
        placeholder: '请选择类型',
        options: [
          {
            label: '舒适性',
            value: 1,
          },
          {
            label: '经济性',
            value: 2,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeDate',
      component: 'DatePicker',
      label: '预约时间',
      rowProps: {
        //span: 24,
      },
      defaultValue: 1183135260000,
      componentProps: {
        type: 'date',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeTime',
      component: 'TimePicker',
      label: '停留时间',
      rowProps: {
        //span: 24,
      },
      componentProps: {
        clearable: true,
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeProject',
      component: 'Checkbox',
      label: '预约项目',
      rowProps: {
        //span: 24,
      },
      componentProps: {
        placeholder: '请选择预约项目',
        options: [
          {
            label: '种牙',
            value: 1,
          },
          {
            label: '补牙',
            value: 2,
          },
          {
            label: '根管',
            value: 3,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'makeSource',
      component: 'RadioGroup',
      label: '来源',
      rowProps: {
        //span: 24,
      },
      componentProps: {
        options: [
          {
            label: '网上',
            value: 1,
          },
          {
            label: '门店',
            value: 2,
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'status',
      label: '状态',
      rowProps: {
        //span: 24,
      },
      //插槽
      slot: 'statusSlot',
    },
  ];

  const modalRef: any = ref(null);

  const [modalRegister, { openModal, closeModal, setSubLoading }] = useModal({
    title: '新增预约',
    width: 600,
    confirmButText: '提交预约',
  });

  const [
    lightModalRegister,
    {
      setProps,
      openModal: lightOpenModal,
      closeModal: lightCloseModal,
      setSubLoading: lightSetSubLoading,
    },
  ] = useModal({
    title: '确认对话框',
  });

  const [register, { submit }] = useForm({
    labelWidth: 80,
    layout: 'horizontal',
    submitButtonText: '提交预约',
    showActionButtonGroup: false,
    schemas,
  });

  async function okModal() {
    const formRes = await submit();
    if (formRes) {
      closeModal();
      ElMessage.success('提交成功');
    } else {
      ElMessage({
        message: '验证失败，请填写完整信息',
        type: 'error',
      });
      setSubLoading(false);
    }
  }

  function lightOkModal() {
    lightCloseModal();
    lightSetSubLoading();
  }

  function showLightModal() {
    lightOpenModal();
  }

  function showModal() {
    openModal();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }

  function updateTitle() {
    setProps({ title: '我是一个新的弹窗标题' });
  }
</script>

<style lang="scss" scoped>
  .n-dialog.basicModalLight {
    width: 416px;
    padding-top: 26px;
  }
</style>
