<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useVModel } from "@vueuse/core";
import { basicFormProps } from "./types";
import { CONTACT_OPTIONS } from "./configs/config";
import RemoteSelect from "../../RemoteSelect";

const contact = ref("0");

const props = defineProps(basicFormProps);

const formData = useVModel(props, "formData");

onMounted(() => {
  const data = formData.value[props.contact];

  if (!props.contact || !data) return;

  contact.value =
    CONTACT_OPTIONS.find(c => c.rule.validator("", data))?.value || "4";
});
</script>

<template>
  <template v-for="(item, index) in formItems" :key="index">
    <el-col
      v-bind="item.span ? { span: item.span } : colLayout"
      v-if="!item.isHidden"
    >
      <el-form-item
        :label="item.label"
        :prop="item.field"
        :rules="
          item.type !== 'contact' ? item.rules : CONTACT_OPTIONS[contact].rule
        "
        :label-width="item.labelWidth"
        :style="itemStyle"
      >
        <!--插槽  -->
        <template v-if="item.slot">
          <slot :name="item.slot" />
        </template>

        <!-- 输入框 -->
        <template v-if="item.type === 'input'">
          <el-input
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            clearable
          />
        </template>

        <!-- 数字输入 -->
        <template v-if="item.type === 'number'">
          <el-input-number
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            clearable
          />
        </template>

        <!-- 选择框 -->
        <template v-if="item.type === 'select'">
          <el-select
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            clearable
            filterable
          >
            <el-option
              v-for="(opt, index) in item.options"
              :key="index"
              :label="opt.label"
              :value="opt.value"
              :disabled="item.otherOptions?.disabled ? opt.disabled : false"
            />
          </el-select>
        </template>

        <template v-if="item.type === 'radio'">
          <el-radio-group v-model="formData[item.field]">
            <el-radio
              v-for="(opt, index) in item.options"
              :key="index"
              :label="opt.value"
              >{{ opt.label }}</el-radio
            >
          </el-radio-group>
        </template>

        <template v-if="item.type === 'img_preview'">
          <el-image :src="formData[item.field]" />
        </template>

        <template v-if="item.type === 'input_group'">
          <el-input v-model="formData[item.field]">
            <template #prepend>
              <el-select
                v-model="formData[item.type_field]"
                placeholder="Select"
                style="width: 150px"
              >
                <el-option
                  v-for="option in item.otherOptions?.inputGroupOptions"
                  :value="option.value"
                  :label="option.label"
                />
              </el-select>
            </template>
          </el-input>
        </template>

        <template v-if="item.type === 'img_upload'">
          <el-upload class="el-avatar" />
        </template>

        <template v-if="item.type === 'checkbox'">
          <el-checkbox-group v-model="formData[item.field]">
            <el-checkbox
              v-for="(opt, index) in item.options"
              :key="index"
              :label="opt.value"
              >{{ opt.label }}
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <template v-if="item.type === 'date_picker'">
          <el-date-picker
            v-model="formData[item.field]"
            v-bind="item.otherOptions"
            format="YYYY-MM-DD"
          />
        </template>

        <!-- 联系方式 -->
        <template v-if="item.type === 'contact'">
          <el-input v-model="formData[item.field]">
            <template #prepend>
              <el-select style="width: 115px" v-model="contact">
                <el-option
                  v-for="c in CONTACT_OPTIONS"
                  :key="c.value"
                  :label="c.label"
                  :value="c.value"
                />
              </el-select>
            </template>
          </el-input>
        </template>

        <template v-if="item.type === 'remote-select'">
          <RemoteSelect
            v-model="formData[item.field]"
            :api="item.otherOptions.api"
            :placeholder="item.placeholder"
            :response-label-prop="item.otherOptions.responseLabelProp"
            :response-val-prop="item.otherOptions.responseValProp"
            :request-prop="item.otherOptions.requesetProp"
            :is-root="item.otherOptions.isRoot"
            :prop="item.otherOptions.prop"
          />
        </template>

        <template v-if="item.type === 'range'">
          <div flex gap-2 w-full>
            <el-input
              v-model="formData[item.field][0]"
              :placeholder="item.otherOptions?.startPlaceholder"
            />

            <span>至</span>

            <el-input
              v-model="formData[item.field][1]"
              :placeholder="item.otherOptions?.endPlaceholder"
            />
          </div>
        </template>
      </el-form-item>
    </el-col>
  </template>
</template>
