<template>
  <PageWrapper
    title="基础表单"
    content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。表单域标签也可支持响应式。"
  >
    <el-card shadow="never" class="mt-3 proCard">
      <el-row :gutter="20" justify="center">
        <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
          <el-form
            ref="formRef"
            :label-width="80"
            :model="formValue"
            :rules="rules"
            class="py-8"
            label-placement="left"
          >
            <el-form-item label="预约姓名" prop="name">
              <el-input v-model="formValue.name" placeholder="输入姓名" clearable />
            </el-form-item>
            <el-form-item label="预约号码" prop="mobile">
              <el-input v-model="formValue.mobile" placeholder="电话号码" clearable />
            </el-form-item>
            <el-form-item label="预约时间" prop="datetime">
              <el-date-picker
                v-model="formValue.datetime"
                placeholder="请选择预约时间"
                type="datetime"
                clearable
              />
            </el-form-item>
            <el-form-item label="预约医生" prop="doctor">
              <el-select v-model="formValue.doctor" placeholder="请选择预约医生" clearable>
                <el-option
                  v-for="item in doctorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="预约事项" prop="matter">
              <el-select v-model="formValue.matter" multiple placeholder="请选择预约事项" clearable>
                <el-option
                  v-for="item in matterList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formValue.sex" name="sex">
                <el-space>
                  <el-radio :value="1">男</el-radio>
                  <el-radio :value="2">女</el-radio>
                </el-space>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="预约备注" prop="remark">
              <el-input
                v-model="formValue.remark"
                placeholder="请输入预约备注"
                type="textarea"
                clearable
              />
            </el-form-item>
            <!-- <el-form-item label="图片" prop="img">
            <BasicUpload
              v-model="uploadList"
              :action="`${uploadUrl}/v1.0/files`"
              :data="{ type: 0 }"
              :headers="uploadHeaders"
              :height="100"
              :width="100"
              helpText="单个文件不超过20MB，最多只能上传10个文件"
              name="files"
              @uploadChange="uploadChange"
            />
          </el-form-item> -->
            <el-form-item>
              <el-space>
                <el-button type="primary" @click="formSubmit(formRef)">提交预约</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
              </el-space>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts">
  export default {
    name: 'BasicForm',
  };
</script>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { ElMessage, FormRules } from 'element-plus';
  // import { BasicUpload } from '@/components/Upload';
  // import { useGlobSetting } from '@/hooks/setting';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  // const globSetting = useGlobSetting();

  const matterList = [
    {
      label: '种牙',
      value: 1,
    },
    {
      label: '补牙',
      value: 2,
    },
    {
      label: '根管',
      value: 3,
    },
  ];

  const doctorList = [
    {
      label: '李医生',
      value: 1,
    },
    {
      label: '黄医生',
      value: 2,
    },
    {
      label: '张医生',
      value: 3,
    },
  ];

  const rules: FormRules = {
    name: {
      required: true,
      message: '请输入预约姓名',
      trigger: 'blur',
    },
    remark: {
      required: true,
      message: '请输入预约备注',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入预约电话号码',
      trigger: 'blur',
    },
    datetime: {
      required: true,
      type: 'date',
      message: '请选择预约时间',
      trigger: 'change',
    },
    doctor: {
      required: true,
      type: 'number',
      message: '请选择预约医生',
      trigger: 'change',
    },
  };

  // const { uploadUrl } = globSetting;

  const formValue = reactive({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: undefined,
    doctor: undefined,
    datetime: undefined,
  });

  // const uploadList = ref([
  //   'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  // ]);

  // const uploadHeaders = reactive({
  //   platform: 'miniPrograms',
  //   timestamp: new Date().getTime(),
  //   token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
  // });

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证失败，请填写完整信息');
      }
    });
  }

  function resetForm(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.resetFields();
  }

  // function uploadChange(list: string[]) {
  //   console.log(list);
  // }
</script>
