<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElForm } from "element-plus";
import { useVModel } from "@vueuse/core";
import { basicFormProps } from "./types";
import { contacts } from "./configs/config";
import RemoteSelect from "../../RemoteSelect";
import { ImageSingleUpload } from "/@/components/ImageUpload";
import SupplierQuery from "./fields/supplier-query.vue";
import BusinessQuery from "./fields/business-query.vue";
import BusinessPermission from "./fields/business-permission/index.vue";
import SupplierPermission from "./fields/supplier-permisson/index.vue";
import DepartQuery from "./fields/depart.vue";
import User from "./fields/user.vue"

const props = defineProps(basicFormProps);
const emit = defineEmits(["trigger-blur"]);

const formRef = ref<InstanceType<typeof ElForm>>(null);
const formData = useVModel(props, "formData");
const contact = ref("0");

//校验方法
function vaildate(callback?: (valid: boolean) => void) {
  formRef.value?.validate(vaild => {
    callback && callback(vaild);
  });
}

onMounted(() => setContact());

function setContact() {
  const data = formData.value[props.contact];
  if (!props.contact || !data) return;
  contact.value = contacts.find(c => c.rule.validator("", data))?.value || "4";
}

function handleChange({ trigger, onChange, field }: any) {
  if (!trigger || trigger !== "change") {
    return;
  }

  emit("trigger-blur", formData.value);
  onChange && onChange(formData.value[field]);
}

defineExpose({ vaildate });
</script>

<template>
  <el-form
    ref="formRef"
    v-model="formData"
    :model="formData"
    :disabled="disabled"
    :label-width="labelWidth"
  >
    <el-row>
      <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"
                v-bind="item.otherOptions"
                @change="handleChange(item)"
                clearable
              />
            </template>

            <template v-if="item.type === 'user-query'">
              <user 
                v-model="formData[item.field]"
                :placeholder="item.placeholder"
                @change="handleChange(item)"
                clearable
                v-bind="item.otherOptions"
              />
            </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 === 'business-permission'">
              <BusinessPermission
                @change="handleChange(item)"
                v-model="formData[item.field]"
              />
            </template>

           <template v-if="item.type === 'supplier-permission'">
              <SupplierPermission
                @change="handleChange(item)"
                v-model="formData[item.field]"
                :isAll="formData[item.field].isAll"
                :notInitial="formData[item.field].notInitial"
              />
            </template>

            <!-- 选择框 -->
            <template v-if="item.type === 'select'">
              <el-select
                v-model="formData[item.field]"
                :placeholder="item.placeholder"
                @change="handleChange(item)"
                clearable
                filterable
                v-bind="item.otherOptions"
              >
                <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 === '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"
                      :key="option.value"
                    />
                  </el-select>
                </template>
              </el-input>
            </template>

            <template v-if="item.type === 'img_upload'">
              <ImageSingleUpload v-model:imgUrl="formData[item.field]" />
            </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]"
                style="width: 100%"
                format="YYYY-MM-DD"
                v-bind="item.otherOptions"
                @change="handleChange(item)"
              />
            </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 === 'supplier-query'">
              <SupplierQuery
                v-model="formData[item.field]"
                :placeholder="item.placeholder || '卖出方公司'"
                @change="handleChange(item)"
              />
            </template>

            <template v-if="item.type === 'depart-query'">
              <DepartQuery
                v-model="formData[item.field]"
                :disabled="item.disabled"
                :placeholder="item.placeholder || '所在部门'"
                @change="handleChange(item)"
              />
            </template>

            <template v-if="item.type === 'business-query'">
              <BusinessQuery
                v-model="formData[item.field]"
                :placeholder="item.placeholder || '买入方公司'"
              />
            </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>

      <el-form-item> <slot name="custom" /></el-form-item>

      <el-form-item>
        <slot name="action" />
      </el-form-item>
    </el-row>

    <el-form-item>
      <slot name="footer" />
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
:deep(.el-select) {
  width: 100%;
}
</style>
