<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();
    collapseContainerRef.value.show = true;
  };

  //ft add 表单数据置空
  const resetConditionScreenForm = () => {
    conditionScreeningList.value = [];
    resetFilter();
    for (let i = 0; i < unref(refItem.conditionScreeningRefs).length; i++) {
      unref(refItem.conditionScreeningRefs)[i]?.resetConditionScreenForm();
    }
  };
  //ft add 表单数据置空

  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,
    resetConditionScreenForm,
  });
</script>

<style lang="less" scoped>
  :deep(.vben-collapse-container__header) {
    overflow: hidden !important;
    overflow-y: scroll !important;
    white-space: pre !important;
    height: 93px !important;
  }
</style>