<template>
  <div>
    <CollapseContainer ref="collapseContainerRef" @expand="handleExpand">
      <template #title>
        <div>条件筛选</div>
        <RichText :otherAttribute="otherAttribute" @resetFilter="resetFilter"
      /></template>

      <template v-for="(item, index) in conditionScreeningList" :key="item">
        <ConditionScreeningForm
          :conditionScreeningList="conditionScreeningList"
          :ref="refItem.conditionScreeningRefs"
          :index="index"
          @deleteConditionForm="deleteConditionForm"
        />
      </template>
    </CollapseContainer>

    <div class="flex justify-between">
      <a-button type="primary" class="mt-4 ml-2" @click="addConditionForm">新增条件筛选</a-button>
      <a-button type="primary" class="mt-4 mr-2" @click="preView" v-if="isPreview">保存</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { unref, ref } from 'vue';
  import ConditionScreeningForm from './ConditionScreeningForm.vue';
  import { conditionPreView } from '../config/formatData.ts';
  import { CollapseContainer } from '/@/components/Container/index';
  import RichText from './RichText.vue';
  const props = defineProps({
    childGetFieldsValue: {
      type: Function,
      required: true,
    },
  });
  const refItem = {
    conditionScreeningRefs: ref([]),
  };

  const isPreview = ref(true);
  const collapseContainerRef = ref();
  const conditionScreeningList = ref([Date.now()]);
  const addConditionForm = () => {
    if (!unref(isPreview)) {
      collapseContainerRef.value.handleExpand();
    }
    unref(conditionScreeningList).push(Date.now());
    const lastIndex = refItem.conditionScreeningRefs.value.length - 1;
    refItem.conditionScreeningRefs.value[lastIndex]?.appendSchemaByField(
      {
        field: 'AND',
        label: '和',
        component: 'Input',
        slot: 'and',
        // labelWidth: 50,
        colProps: { span: 3 },
      },
      'value'
    );
  };
  const handleExpand = (show) => {
    isPreview.value = show;
  };

  const otherAttribute = ref([]);
  // 预览条件筛选结果
  const preView = async () => {
    const attributes = [];
    const fieldsValue = props.childGetFieldsValue();
    for (let i = 0; i < unref(refItem.conditionScreeningRefs).length; i++) {
      const valid = await unref(refItem.conditionScreeningRefs)[i].validate();
      if (!valid) return;
      attributes.push({
        ...unref(refItem.conditionScreeningRefs)[i].getFieldsValue(),
        attribute: fieldsValue.type2,
      });
    }
    otherAttribute.value = conditionPreView(attributes, fieldsValue.operationType);
    collapseContainerRef.value.handleExpand();
  };

  const resetFilter = () => {
    otherAttribute.value = [];
  };
  const deleteConditionForm = (index) => {
    unref(conditionScreeningList).splice(index, 1);
    const lastIndex = refItem.conditionScreeningRefs.value.length - 2;
    refItem.conditionScreeningRefs.value[lastIndex]?.removeSchemaByFiled('AND');
  };

  defineExpose({
    refItem,
    conditionScreeningList,
    otherAttribute,
  });
</script>