<template>
  <FormItem
    :label="item.type !== 'divider' ? item.label : ''"
    :name="item.prop"
    :rules="item.rules"
  >
    <template v-if="item.type === 'divider'">
      <Divider style="margin: 0">{{ item.label }}</Divider>
    </template>
    <template v-else-if="item.type === 'input'">
      <Input v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'select'">
      <Select v-model:value="model" v-bind="item?.fieldProps"></Select>
    </template>
    <template v-else-if="item.type === 'inputNumber'">
      <InputNumber
        v-model:value="model"
        v-bind="item?.fieldProps"
        style="width: 100%"
      />
    </template>
    <template v-else-if="item.type === 'image'">
      <Image v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'checkboxGroup'">
      <CheckboxGroup v-model:value="model" v-bind="item?.fieldProps">
      </CheckboxGroup>
    </template>
    <template v-else-if="item.type === 'backgroundSelect'">
      <BackgroundSelect v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'colorSelect'">
      <ColorSelect v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'colorScheme'">
      <ColorScheme v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'radioGroup'">
      <RadioGroup v-model:value="model" size="small" v-bind="item?.fieldProps">
      </RadioGroup>
    </template>
    <template v-else-if="item.type === 'radioGroupButton'">
      <RadioGroup v-model:value="model" size="small" >
        <RadioButton
          v-for="option in item.fieldProps.options"
          :key="option.value"
          :value="option.value"
          >{{ option.label }}</RadioButton
        >
      </RadioGroup>
    </template>
    <template v-else-if="item.type === 'position'">
      <Position v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'fontStyle'">
      <FontStyle v-model:value="model" v-bind="item?.fieldProps" />
    </template>
    <template v-else-if="item.type === 'slider'">
      <FormItemRest>
        <CusSlider v-model:value="model" v-bind="item?.fieldProps" />
      </FormItemRest>
    </template>
    <template v-else-if="item.type === 'boderRadiusSelect'">
      <FormItemRest>
        <BorderRadius v-model:value="model" v-bind="item?.fieldProps" />
      </FormItemRest>
    </template>
    <!-- 提示 -->
    <template v-if="item.tip">
      <Tooltip :title="item.tip">
        <InfoCircleOutlined style="color: #666" />
      </Tooltip>
    </template>
  </FormItem>
</template>

<script setup lang="ts">
import { IFormItem } from "./type";
import { defineProps, defineEmits, ref, watch } from "vue";
import {
  FormItem,
  FormItemRest,
  Input,
  Select,
  InputNumber,
  CheckboxGroup,
  Image,
  Divider,
  RadioGroup,
  Tooltip,
  RadioButton,
} from "ant-design-vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import { isEqual } from "lodash-es";

import BackgroundSelect from "./BackgroundSelect.vue";
import ColorSelect from "./ColorSelect.vue";
import ColorScheme from "./ColorScheme.vue";
import Position from "./Position.vue";
import FontStyle from "./FontStyle.vue";
import CusSlider from "./CusSlider.vue";
import BorderRadius from "./BorderRadius.vue";

const props = defineProps<{ item: IFormItem; modelValue: any }>();
const emit = defineEmits(["update:modelValue"]);

const model = ref(props.modelValue);

watch(
  () => model.value,
  () => {
    emit("update:modelValue", model.value);
  },
  { deep: true }
);

watch(
  () => props.modelValue,
  (val) => {
    if(!isEqual(val, model.value)) {
      model.value = val;
    }
  }
)
</script>

<style lang="less" scoped>
:deep(.ant-divider-inner-text) {
  font-size: 12px;
  color: #666;
}
</style>
