<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElForm, ElMessage } from "element-plus";
import { useVModel } from "@vueuse/core";
import { basicFormProps } from "./types";
import { CONTACT_OPTIONS } 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 BrandQuery from "./fields/brand-query.vue";
import CustomerQuery from "./fields/customer-query.vue"
// import PlatformQuery from "./fields/customer-query.vue"


import { shortcuts } from "./date-picker"


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?: (vaild: boolean) => void) {
  formRef.value?.validate(vaild => {
    callback && callback(vaild);
  });
}

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

function handleChange({ onChange, field }: any, isRange: boolean) {
  if(isRange){
    const [first, end] = formData.value[field]
    if(!first && !end){ return; }

    if(!first){
      ElMessage.warning('请输入起始值')
      return;
    }

    if(!end){
      ElMessage.warning('请输入结束值')
      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 === 'number'">
              <el-input-number v-model="formData[item.field]" :placeholder="item.placeholder" clearable  @change="handleChange(item)" />
            </template>

            <!-- 选择框 -->
            <template v-if="item.type === 'select'">
              <el-select v-model="formData[item.field]" :placeholder="item.placeholder" clearable  @change="handleChange(item)">
                <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]"  @change="handleChange(item)">
                <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]"  @change="handleChange(item)">
                <template #prepend>
                  <el-select v-model="formData[item.type_field]" placeholder="Select" style="width: 150px"  @change="handleChange(item)">
                    <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="formData[item.field]" />
            </template>

            <template v-if="item.type === 'checkbox'">
              <el-checkbox-group v-model="formData[item.field]"  @change="handleChange(item)">
                <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]"  
                @change="handleChange(item)" 
                style="width: 100%" 
                format="YYYY-MM-DD" 
                v-bind="item.otherOptions" 
                :shortcuts="shortcuts"  
              />
            </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, true)" />
            </template>

            <template v-if="item.type === 'business-query'">
              <BusinessQuery v-model="formData[item.field]" :placeholder="item.placeholder || '买入方公司'"  @change="handleChange(item, true)" />
            </template>

            <template v-if="item.type === 'brand-query'">
              <BrandQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'"  @change="handleChange(item, true)" />
            </template>

            <template v-if="item.type === 'platform-query'">
              <PlatformQuery v-model="formData[item.field]" :placeholder="item.placeholder || '品牌'"  @change="handleChange(item, true)" />
            </template>


            <template v-if="item.type === 'customer-query'">
              <CustomerQuery 
                v-model="formData[item.field]" 
                :placeholder="item.placeholder || '企业客户'"  
                @change="handleChange(item, true)" 
                v-bind="item.otherOptions"
              />
            </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" @change="handleChange(item, true)" />

                <span>至</span>

                <el-input v-model="formData[item.field][1]" :placeholder="item.otherOptions?.endPlaceholder" @change="handleChange(item, true)" />
              </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>
