<template>
  <!-- 栅格 -->
  <template v-if="props.record.componentCode == 'grid' && !props.record.itemHiddenFlag">
    <a-col :span="spanCol(props.record)">
      <a-row class="grid-row" :gutter="[props.record.gutter, props.record.gutter]">
        <a-col class="grid-col" v-for="(colItem, idnex) in props.record.children" :key="idnex" :span="spanCol(colItem)">
          <FormViewerLayout
            v-for="(cItem, cIndex) in colItem.children"
            :key="cIndex"
            :record="cItem"
            :formConfig="props.formConfig"
            :readonly="props.readonly"
            :formRef="props.formRef"
            v-model:formData="props.formData"
          />
        </a-col>
      </a-row>
    </a-col>
  </template>
  <!-- 其他 -->
  <template v-else>
    <a-col
      :span="spanCol(props.record)"
      v-if="!props.record.itemHiddenFlag"
      :class="{ 'h-0': props.record.componentCode == 'modal-prompt' }"
    >
      <form-item
        :record="props.record"
        :formConfig="props.formConfig"
        :readonly="props.readonly"
        :formRef="props.formRef"
        v-model:formData="props.formData"
        :show-field-id="false"
      ></form-item>
    </a-col>
  </template>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { isMobile } from '@/utils/common/util';
import FormItem from '../design/components/form-item.vue';

const props = defineProps({
  // 表单数据
  formData: {
    type: Object,
    default: () => ({})
  },
  //当前item
  record: {
    type: Object,
    required: true
  },
  formConfig: {
    type: Object,
    required: true
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // ref
  formRef: {
    type: Object,
    default: null
  }
});

const windowWidth = ref(window.innerWidth);

const spanCol = computed(() => {
  return item => {
    const isMobileDevice = windowWidth.value <= 768 || isMobile();
    return isMobileDevice ? 24 : item.itemColumnNumber || 0;
  };
});

onMounted(() => {
  window.addEventListener('resize', resize);
});

onUnmounted(() => {
  window.removeEventListener('resize', resize);
});

const resize = e => {
  windowWidth.value = e.target.innerWidth;
};
</script>

<style scoped lang="less"></style>
