<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 :disabled="isViewDisabledBtn=='isView'?true:false" type="primary" class="mt-4 ml-2"
        @click="addConditionForm">新增条件筛选</a-button>
      <a-button :disabled="isViewDisabledBtn=='isView'?true:false" 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 isViewDisabledBtn = window.localStorage.getItem('isViewDisabledBtn')
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>