<template>
  <a-collapse v-model:activeKey="activeKey" expand-icon-position="right">
    <a-collapse-panel key="1" :header="record.itemLabelName" :disabled="props.readonly || props.disabled">
      <a-row :style="{ height: '100%' }" :gutter="props.formConfig?.config?.rowGutter">
        <template v-for="item in props.record.children" :key="item.itemId">
          <component :is="Col" :span="item.itemColumnNumber" v-if="showFormItem(item)">
            <form-item
              :record="item"
              :formConfig="props.formConfig"
              :readonly="props.readonly"
              :isDesgin="props.isDesgin"
              :formRef="props.formRef"
              v-model:formData="props.formData"
              :show-field-id="false"
            ></form-item>
          </component>
        </template>
      </a-row>
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup name="FormCollapse">
import { ref, onMounted } from 'vue';
import { Col } from 'ant-design-vue';
import { useUserStore } from '@/store/modules/user';
import FormItem from '../../components/form-item.vue';

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

const emits = defineEmits(['update:value']);

const userStore = useUserStore();

const showFormItem = item => {
  if (item.permissionCode) {
    if (!item.itemHiddenFlag && userStore.authorities.find(aItem => aItem == item.permissionCode)) {
      return true;
    } else {
      return false;
    }
  } else if (!item.itemHiddenFlag) {
    return true;
  }
  return false;
};

onMounted(() => {});

// 默认激活
const activeKey = ref('1');
</script>

<style></style>
