<template>
  <div>
    <CollapseContainer ref="collapseContainerRef" @expand="handleExpand">
      <template #title>
        <div>条件筛选</div>
        <RichText
          :firstAttribute="firstAttribute"
          :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.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 handleExpand = (show) => {
    isPreview.value = show;
  };

  const firstAttribute = ref({});
  const otherAttribute = ref([]);
  // 预览条件筛选结果
  const preView = async () => {
    const attributes = [];
    const fieldsValue = props.childGetFieldsValue();
    for (let i = 0; i < unref(refItem.conditionScreeningRefs).length; i++) {
      if (i === 0) {
        const attr = conditionPreView(
          [
            {
              ...unref(refItem.conditionScreeningRefs)[i].getFieldsValue(),
              attribute: fieldsValue.type2,
            },
          ],
          fieldsValue.operationType
        );
        firstAttribute.value = attr[0];
        await unref(refItem.conditionScreeningRefs)[i].validate();
        continue;
      }
      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 = () => {
    firstAttribute.value = {};
    otherAttribute.value = [];
  };
  const deleteConditionForm = (index) => {
    unref(conditionScreeningList).splice(index, 1);
  };
  defineExpose({
    refItem,
  });
</script>