<template>
  <a-form-item v-bind="formItemProps" :style="itemStyle">
    <template #label v-if="record.itemLabelShowFlag">
      <span
        >{{ record.itemLabelName }}
        <a-tooltip v-if="record.itemTipFlag">
          <template #title>{{ record.itemTipContent }}</template>
          <QuestionCircleOutlined />
        </a-tooltip>
        <span v-if="formConfig.config.layout == 'vertical'"> :</span></span
      >
      <span class="selected" v-if="showFieldId && record.fieldCode && record.fieldCode != record.itemId"></span>
    </template>
    <FormItemComponent
      v-model:formData="props.formData"
      :formConfig="props.formConfig"
      :record="props.record"
      :isDesgin="props.isDesgin"
      :formRef="props.formRef"
      :readonly="props.readonly"
      @onClick="onClick"
      @onChange="onChange"
      @onBlur="onBlur"
      @onFocus="onFocus"
      @onInput="onInput"
    />
  </a-form-item>
</template>

<script setup name="FormItem">
import { computed, inject } from 'vue';
import { getRules } from '../utils/rules';
import FormItemComponent from './form-item.component.vue';
import Request from '@/utils/request/request-util';

const props = defineProps({
  // 表单数据
  formData: {
    type: Object,
    default: () => ({})
  },
  //当前item
  record: {
    type: Object,
    required: true
  },
  formConfig: {
    type: Object,
    required: true
  },
  // 是否显示选中字段
  showFieldId: {
    type: Boolean,
    default: true
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // 是否隐藏
  hidden: {
    type: Boolean,
    default: true
  },
  // 是否是设计
  isDesgin: {
    type: Boolean,
    default: false
  },
  // ref
  formRef: {
    type: Object,
    default: null
  }
});

let formObj = inject('formObj');

const itemStyle = computed(() => {
  const { formItemStyle } = props.record;
  let style = {
    marginTop: 0,
    marginRight: 0,
    marginBottom: '16px',
    marginLeft: 0
  };
  if (formItemStyle) {
    const { marginTop, marginRight, marginBottom, marginLeft } = formItemStyle;
    style.marginTop = (marginTop || 0) + 'px';
    style.marginRight = (marginRight || 0) + 'px';
    style.marginBottom = (marginBottom || 0) + 'px';
    style.marginLeft = (marginLeft || 0) + 'px';
  }
  return style;
});

// 当前表单属性
const formItemProps = computed(() => {
  const { formConfig } = props;
  let { fieldCode, itemRequiredFlag, rules, labelCol, wrapperCol } = props.record;
  //<editor-fold desc="布局属性">
  labelCol = labelCol
    ? labelCol
    : formConfig.config.layout === 'horizontal'
      ? formConfig.config.labelLayout === 'flex'
        ? { style: `width:${formConfig.config.labelWidth}px` }
        : formConfig.config.labelCol
      : {};

  wrapperCol = wrapperCol
    ? wrapperCol
    : formConfig.config.layout === 'horizontal'
      ? formConfig.config.labelLayout === 'flex'
        ? { style: 'width:auto;flex:1' }
        : formConfig.config.wrapperCol
      : {};

  const style = formConfig.config.layout === 'horizontal' && formConfig.config.labelLayout === 'flex' ? { display: 'flex' } : {};
  /**
   * 将字符串正则格式化成正则表达式
   */
  rules = getRules(props.record);
  return {
    labelCol,
    wrapperCol,
    style: { ...style },
    name: fieldCode,
    required: itemRequiredFlag,
    rules
  };
});

// 点击
const onClick = record => {
  if (record?.formItemEvent?.onClickEventCode) {
    const func = new Function('formObj', 'Request', record.formItemEvent.onClickEventCode);
    func(formObj, Request);
  }
};
// 改变
const onChange = record => {
  if (record?.formItemEvent?.onChangeEventCode) {
    const func = new Function('formObj', 'Request', record.formItemEvent.onChangeEventCode);
    func(formObj, Request);
  }
};
// 失去焦点
const onBlur = record => {
  if (record?.formItemEvent?.onBlurEventCode) {
    const func = new Function('formObj', 'Request', record.formItemEvent.onBlurEventCode);
    func(formObj, Request);
  }
};
// 获取焦点
const onFocus = record => {
  if (record?.formItemEvent?.onFocusEventCode) {
    const func = new Function('formObj', 'Request', record.formItemEvent.onFocusEventCode);
    func(formObj, Request);
  }
};
// 输入值
const onInput = record => {
  if (record?.formItemEvent?.onInputEventCode) {
    const func = new Function('formObj', 'Request', record.formItemEvent.onInputEventCode);
    func(formObj, Request);
  }
};
</script>

<style scoped lang="less">
.selected {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: rgba(42, 130, 228, 1);
  border-radius: 50%;
  margin-left: 10px;
}
</style>
