<template>
  <PageWrapper
    title="高级表单"
    content="当一次性提交大量数据时，可使用高级表单，根据自身情况选择是否使用 BasicForm
        组件，以下布局支持自适应"
  >
    <el-form
      ref="formRef"
      :label-width="100"
      :model="formValue"
      :rules="rules"
      label-placement="left"
    >
      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
        <template #header>
          <div class="card-header">
            <span>预约信息</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约姓名" prop="name">
              <el-input v-model="formValue.name" placeholder="输入姓名" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约号码" prop="mobile">
              <el-input v-model="formValue.mobile" placeholder="电话号码" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约时间" prop="datetime">
              <el-date-picker class="w-full" v-model="formValue.datetime" type="datetime" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约医生" prop="doctor">
              <el-select v-model="formValue.doctor" placeholder="请选择预约医生" class="w-full">
                <el-option
                  v-for="item in doctorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              /></el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约事项" prop="matter">
              <el-select
                v-model="formValue.matter"
                multiple
                placeholder="请选择预约事项"
                class="w-full"
              >
                <el-option
                  v-for="item in matterList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约备注" prop="remark">
              <el-input v-model="formValue.remark" placeholder="请输入预约备注" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="预约备注" prop="remark">
              <el-input v-model="formValue.remark" placeholder="请输入预约备注" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="出生日期" prop="dateBirth">
              <el-date-picker
                class="w-full"
                v-model="formValue.dateBirth"
                type="datetime"
                placeholder="请选择出生日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
        <template #header>
          <div class="card-header">
            <span>就诊信息</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="过敏史" prop="allergiChistory">
              <el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="既往史" prop="pastHistory">
              <el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="传染史" prop="contagion">
              <el-input v-model="formValue.contagion" placeholder="请输入传染史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="身份证号" prop="idNo">
              <el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="介绍人" prop="introducer">
              <el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="就诊医生" prop="seeDoctor">
              <el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
                <el-option
                  v-for="item in doctorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="初诊日期" prop="firstDatetime">
              <el-date-picker
                class="w-full"
                v-model="formValue.firstDatetime"
                type="datetime"
                placeholder="请选择初诊日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="近次复诊" prop="subsequent">
              <el-date-picker
                class="w-full"
                v-model="formValue.subsequent"
                type="datetime"
                placeholder="请选择近次复诊"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col>-->
          <!--            <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-col>-->
        </el-row>
      </el-card>

      <el-card shadow="never" class="mt-3 proCard" :body-style="{ padding: '20px 20px 5px 0' }">
        <template #header>
          <div class="card-header">
            <span>患者信息</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="过敏史" prop="allergiChistory">
              <el-input v-model="formValue.allergiChistory" placeholder="请输入过敏史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="既往史" prop="pastHistory">
              <el-input v-model="formValue.pastHistory" placeholder="请输入既往史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="传染史" prop="contagion">
              <el-input v-model="formValue.contagion" placeholder="请输入传染史" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="身份证号" prop="idNo">
              <el-input v-model="formValue.idNo" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="介绍人" prop="introducer">
              <el-input v-model="formValue.introducer" placeholder="请输入介绍人" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="就诊医生" prop="seeDoctor">
              <el-select v-model="formValue.seeDoctor" placeholder="请选择就诊医生" class="w-full">
                <el-option
                  v-for="item in doctorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="初诊日期" prop="firstDatetime">
              <el-date-picker
                class="w-full"
                v-model="formValue.firstDatetime"
                type="datetime"
                placeholder="请选择初诊日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="10" :md="8" :lg="8" :xl="6">
            <el-form-item label="近次复诊" prop="subsequent">
              <el-date-picker
                class="w-full"
                v-model="formValue.subsequent"
                type="datetime"
                placeholder="请选择近次复诊"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col>-->
          <!--            <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-col>-->
        </el-row>
      </el-card>
    </el-form>
    <template #rightFooter>
      <el-space>
        <el-button @click="resetForm(formRef)">重置</el-button>
        <el-button type="primary" @click="formSubmit(formRef)">提交</el-button>
      </el-space>
    </template>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { ElMessage } 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 = {
    name: {
      required: true,
      message: '请输入预约姓名',
      trigger: 'blur',
    },
    remark: {
      required: true,
      message: '请输入预约备注',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入预约电话号码',
      trigger: ['input'],
    },
    datetime: {
      required: true,
      type: 'number',
      message: '请选择预约时间',
      trigger: ['blur', 'change'],
    },
    seeDoctor: {
      required: true,
      type: 'number',
      message: '请选择就诊时间',
      trigger: ['blur', 'change'],
    },
    firstDatetime: {
      required: true,
      type: 'number',
      message: '请选择初诊时间',
      trigger: ['blur', 'change'],
    },
    doctor: {
      required: true,
      type: 'number',
      message: '请选择预约医生',
      trigger: 'change',
    },
  };

  // const { uploadUrl } = globSetting;

  interface IformValue {
    name: string;
    mobile: string;
    remark: string;
    sex: number;
    matter: number[];
    doctor: number;
    dateBirth: string;
    allergiChistory: string;
    pastHistory: string;
    contagion: string;
    idNo: string;
    introducer: string;
    seeDoctor: string;
    firstDatetime: string;
    subsequent: string;
    datetime: [];
  }

  const formValue = reactive<IformValue>({
    name: '',
    mobile: '',
    remark: '',
    sex: 1,
    matter: [1],
    doctor: 1,
    dateBirth: '',
    allergiChistory: '',
    pastHistory: '',
    contagion: '',
    idNo: '',
    subsequent: '',
    firstDatetime: '',
    seeDoctor: '',
    introducer: '',
    datetime: [],
  });
  // 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>
