<template>
  <div>
    <div v-if="filterSchema" class="grid-complex-filter-panel">
      <div class="grid-item-1">
        <a-space>
          <a-button type="primary" @click="complexSearch">
            {{ $t('lang.ComplexFilterPanel.query') }}
          </a-button>
          <a-button danger @click="clearSearchCondition">
            {{ $t('lang.ComplexFilterPanel.empty') }}
          </a-button>
          <ComplexFilterHistory :window-no="windowNo" :tab-index="tabIndex" />
          <FilterColumnDef
            :filter-schema-lines="filterSchema.filterSchemaLines" :window-no="windowNo"
            :tab-index="tabIndex" @property-changed="propertyChanged($event)"
          />
        </a-space>
      </div>

      <div class="grid-item-2">
        <div class="grid-container">
          <template v-for="filterSchemaLine in filterSchema.filterSchemaLines">
            <template v-if="filterSchemaLine.visible">
              <!-- 树控件 -->
              <template v-if="filterSchemaLine.displayType == 'Tree'">
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2-3-4-5" style="line-height: 34px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1-2-3-4-5 tree-widget"
                >
                  <component
                    :is="filterSchemaLine.componentName"
                    :key="'filter-component-' + componentLoadedCount + '-' + filterSchemaLine.componentName"
                    ref="infoComponent"
                    :where-clause-source="{ 'curdComplexFilterSchemaLine': { 'curdWindowNo': windowNo, 'tabIndex': tabIndex, 'fieldName': filterSchemaLine.fieldName } }"
                    :ids="filterSchemaLine.fieldValue.ids" @value-changed="
                      treeValueChange(filterSchemaLine, 'value1', $event)
                    "
                  />
                </div>
              </template>

              <!-- 枚举选择框 -->
              <template v-else-if="filterSchemaLine.displayType == 'ListBoxEnumEditor'">
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2" style="line-height: 34px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column3-4-5"
                >
                  <a-select v-model:value="filterSchemaLine.value1" style="width: 100%;" class="form-control">
                    <a-select-option value="" />
                    <a-select-option
                      v-for="keyValue in filterSchemaLine.keyValues" :key="keyValue.keyStr"
                      :value="keyValue.keyStr"
                    >
                      {{ keyValue.value }}
                    </a-select-option>
                  </a-select>
                </div>
              </template>

              <!-- CheckBox 搜索框 -->
              <template v-else-if="filterSchemaLine.displayType == 'CheckBoxEditor'">
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2" style="line-height: 34px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column3-4-5"
                >
                  <div>
                    <label>
                      <a-select v-model:value="filterSchemaLine.value1" style="width: 120px;">
                        <a-select-option value="">{{ $t('lang.ComplexFilterPanel.all') }}</a-select-option>
                        <a-select-option value="true">{{ $t('lang.ComplexFilterPanel.yes') }}</a-select-option>
                        <a-select-option value="false">{{ $t('lang.ComplexFilterPanel.no') }}</a-select-option>
                      </a-select>
                    </label>
                  </div>
                </div>
              </template>

              <!--单选ID搜索框-->
              <template v-else-if="filterSchemaLine.displayType == 'SearchBoxEditor'">
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2" style="line-height: 34px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column3-4-5"
                >
                  <FilterSearchWidget
                    :key="'filter-search-widget-' + windowNo + '_' + tabIndex + '_' + filterSchemaLine.fieldName"
                    :field-name="filterSchemaLine.fieldName"
                    :where-clause-source="{ 'curdComplexFilterSchemaLine': { 'curdWindowNo': windowNo, 'tabIndex': tabIndex, 'fieldName': filterSchemaLine.fieldName } }"
                    :info-window-no="filterSchemaLine.infoWindowNo" :title-name="filterSchemaLine.displayName"
                    :field-value="filterSchemaLine.fieldValue" :display-name="filterSchemaLine.entityFieldName"
                    @value-changed="
                      searchWidgetValueChanged(filterSchemaLine, 'value1', $event)
                    "
                  />
                </div>
              </template>

              <!-- 多选Id搜索框-->
              <template v-else-if="filterSchemaLine.displayType == 'MultiSearchBoxEditor'">
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2" style="line-height: 34px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column3-4-5"
                >
                  <FilterMultiSearchWidget
                    ref="filterMultiSearchWidget"
                    :key="'filter-multi-search-widget-' + windowNo + '_' + tabIndex + '_' + filterSchemaLine.fieldName"
                    style="width: 100%" :widget-id="filterSchemaLine.id" :title-name="filterSchemaLine.displayName"
                    :where-clause-source="{ 'curdComplexFilterSchemaLine': { 'curdWindowNo': windowNo, 'tabIndex': tabIndex, 'fieldName': filterSchemaLine.fieldName } }"
                    :info-window-no="filterSchemaLine.infoWindowNo" :display-name="filterSchemaLine.entityFieldName"
                    :field-value="filterSchemaLine.fieldValue" @value-changed="
                      multiSearchValueChange(filterSchemaLine, 'value1', $event)
                    "
                  />
                </div>
              </template>

              <template v-else>
                <label
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_title'
                  " :for="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " class="grid-item-row-column1 grid-item-label"
                >
                  {{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}
                </label>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_AND_OR'
                  " class="grid-item-row-column2" style="line-height: 16px"
                >
                  <AndOr v-model="filterSchemaLine.isCompositeOr" />
                  <CaseSensitive v-model="filterSchemaLine.isCaseSensitive" />
                </div>

                <div
                  :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_constraintEnum'
                  " class="grid-item-row-column3"
                >
                  <a-select v-model:value="filterSchemaLine.constraintEnum" style="width: 100px;">
                    <a-select-option value="Equals">{{ $t('lang.ComplexFilterPanel.isEqual') }}</a-select-option>
                    <a-select-option value="NotEqual">{{ $t('lang.ComplexFilterPanel.isNotEqual') }}</a-select-option>
                    <a-select-option value="GreaterThan">{{ $t('lang.ComplexFilterPanel.isGreater') }}</a-select-option>
                    <a-select-option value="GreaterThanOrEqual">
                      {{ $t('lang.ComplexFilterPanel.greaterThanOrEqual') }}
                    </a-select-option>
                    <a-select-option value="LessThan">{{ $t('lang.ComplexFilterPanel.lessThan') }}</a-select-option>
                    <a-select-option value="LessThanOrEqual">
                      {{ $t('lang.ComplexFilterPanel.lessThanOrEqualTo') }}
                    </a-select-option>
                    <a-select-option value="StartsWith">
                      {{ $t('lang.ComplexFilterPanel.leftIncluding') }}
                    </a-select-option>
                    <a-select-option value="EndsWith">
                      {{ $t('lang.ComplexFilterPanel.rightIncludes') }}
                    </a-select-option>
                    <a-select-option value="Contains">{{ $t('lang.ComplexFilterPanel.including') }}</a-select-option>
                    <a-select-option value="IsNull">{{ $t('lang.ComplexFilterPanel.isEmpty') }}</a-select-option>
                    <a-select-option value="IsNotNull">{{ $t('lang.ComplexFilterPanel.isNotNull') }}</a-select-option>
                    <a-select-option value="IN">{{ $t('lang.ComplexFilterPanel.in') }}</a-select-option>
                    <a-select-option value="Between">{{ $t('lang.ComplexFilterPanel.between') }}</a-select-option>
                    <a-select-option value="SPLIT">{{ $t('lang.ComplexFilterPanel.division') }}</a-select-option>
                  </a-select>
                </div>

                <div
                  :id="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget1'
                  " :class="{
                    'grid-item-row-column4':
                      filterSchemaLine.constraintEnum == 'Between',
                    'grid-item-row-column4-5':
                      filterSchemaLine.constraintEnum != 'Between',
                  }"
                >
                  <!-- 文本控件 -->
                  <a-input
                    v-if="filterSchemaLine.displayType == 'TextEditor'" v-model:value="filterSchemaLine.value1"
                    autocomplete="off" :placeholder="$t('lang.ComplexFilterPanel.pleaseEnterContent')"
                  />

                  <!-- 数字控件 -->
                  <a-input-number
                    v-if="filterSchemaLine.displayType == 'NumberEditor'"
                    v-model:value="filterSchemaLine.value1"
                    style="width: 90%"
                    :placeholder="$t('lang.ComplexFilterPanel.pleaseEnterTheNumber')" onmousewheel="return false;"
                    @mousewheel="mouseWheelEvent"
                  />

                  <!-- 日期时间控件 -->
                  <DateTime
                    v-if="filterSchemaLine.displayType == 'DateTimeBoxEditor'" v-model="filterSchemaLine.value1"
                    style="width:100%"
                  />

                  <!--  日期控件-->
                  <Date
                    v-if="filterSchemaLine.displayType == 'DateBoxEditor'" v-model="filterSchemaLine.value1"
                    style="width:100%"
                  />

                  <!--  年份选择器控件-->
                  <YearPicker v-if="filterSchemaLine.displayType == 'YearEditor'" v-model="filterSchemaLine.value1" />

                  <!--  年月选择器控件-->
                  <VueMonthlyPicker
                    v-if="filterSchemaLine.displayType == 'YearMonthEditor'" id="month-picker"
                    v-model="filterSchemaLine.value1" date-format="YYYY-MM" class="vue-monthly-picker m-date"
                  />
                </div>

                <div
                  v-if="filterSchemaLine.constraintEnum == 'Between'" :key="windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    filterSchemaLine.fieldName +
                    '_widget2'
                  " class="grid-item-row-column5"
                >
                  <!-- 文本控件 -->
                  <a-input
                    v-if="filterSchemaLine.displayType == 'TextEditor'" v-model:value="filterSchemaLine.value2"
                    autocomplete="off" type="text" placeholder="请输入内容" class="form-control"
                  />

                  <!-- 数字控件 -->
                  <a-input-number
                    v-if="filterSchemaLine.displayType == 'NumberEditor'" v-model:value="filterSchemaLine.value2"
                    style="width: 90%" placeholder="请输入数字"
                  />

                  <!-- 日期控件 -->
                  <DateTime
                    v-if="filterSchemaLine.displayType == 'DateTimeBoxEditor'" v-model="filterSchemaLine.value2"
                    style="width:100%"
                  />

                  <!--  日期控件-->
                  <Date
                    v-if="filterSchemaLine.displayType == 'DateBoxEditor'" v-model="filterSchemaLine.value2"
                    :value="filterSchemaLine.value2" style="width:100%"
                  />

                  <!--  年份选择器控件-->
                  <YearPicker
                    v-if="filterSchemaLine.displayType == 'YearEditor'" :date-value="filterSchemaLine.value2"
                    @selected="filterSchemaLine.value2 = $event"
                  />

                  <!--  年月选择器控件-->
                  <VueMonthlyPicker
                    v-if="filterSchemaLine.displayType == 'YearMonthEditor'" id="month-picker"
                    v-model="filterSchemaLine.value2" date-format="YYYY-MM" class="vue-monthly-picker m-date"
                  />
                </div>
              </template>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>



import Common from '../../common/Common.js';
import Language from '../../common/Language.js';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import FilterSchema from './FilterSchema.js';
import HistoryQueryResource from '../../api/system/HistoryQueryResource.js';


import FilterColumnDef from '../filter/FilterColumnDef.vue';
import ComplexFilterHistory from '../filter/ComplexFilterHistory.vue';
import FilterSearchWidget from '../filter/FilterSearchWidget.vue';
import FilterMultiSearchWidget from '../filter/FilterMultiSearchWidget.vue';;



import AndOr from './AndOr.vue';
import CaseSensitive from './CaseSensitive.vue';
// import AssetCategoryTree from '../../asset/widget/AssetCategoryTree.vue';

import ClientOrganizationTree from '../../widget/ClientOrganizationTree.vue';
import { Notify, Uuid } from 'pc-component-v3';
import dayjs from 'dayjs';

export default {
  components: {
    AndOr,
    CaseSensitive,
    FilterColumnDef,
    FilterSearchWidget,
    FilterMultiSearchWidget,
    ComplexFilterHistory,
    // AssetCategoryTree,
    ClientOrganizationTree,
  },
  provide() {
    return {
      setFilterParams: this.setFilterParams,
      getFilterParams: this.getFilterParams,
    };
  },

  props: {

    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    filterSchema: {
      type: Object,
      default: null,
    },
  },


  emits: ['complexSearch'],


  data: function () {
    this.Language = Language;
    return {
      dynamicComponentLoaded: false,  // 动态组件是否已经加载
      componentLoadedCount: 0,  // 已经加载的动态组件的数量，解决动态组件不渲染的问题。
    };
  },

  watch: {
    'filterSchema': {
      handler: function (newValue, oldValue) {
        console.log('filterSchema:', newValue);
        this.dynamicInit();
      },
      immediate: true,
    },
  },

  methods: {

    /**
     * 动态初始化高级搜索控件
     */
    dynamicInit: function () {
      let _self = this;
      if (_self.filterSchema == null) {
        return;
      }

      if (_self.dynamicComponentLoaded == true) {
        return;
      }

      _self.filterSchema.filterSchemaLines.forEach(filterSchemaLine => {
        if (filterSchemaLine.displayType == 'Tree') {

          let componentName = filterSchemaLine.componentName;

          if (filterSchemaLine.vueName != null && filterSchemaLine.vueName != undefined) {
            const vueName = filterSchemaLine.vueName;
            let promise = null;

            promise = new Promise((resolve, reject) => {
              // import('../../../../Dictionary' + vueName).then(remoteComponent => {
              //   resolve(remoteComponent);
              // }).catch(error => {
              //   reject(error);
              // });
            });

            promise.then(remoteComponent => {
              console.log('remoteComponent：' + remoteComponent.default.name);
              if (componentName !== remoteComponent.default.name) {
                let errorMessage = '数据字典-高级搜索控件部件名称定义的是' + componentName + '，但是程序中name定义的是' + remoteComponent.default.name + '，两者必须相同。';
                console.error(errorMessage);
                Notify.error('高级搜索控件部件名称定义错误', errorMessage, false);
              }
              window.app.component(componentName, remoteComponent.default);
              _self.componentLoadedCount++;
            }, errorData => {
              console.error(errorData);
            });
          }
        }
      });

      _self.dynamicComponentLoaded = true;
    },

    /**
     * 显示状态发生改变
     */
    propertyChanged: function (filterSchemaLine) {
      var _self = this;

      _self.filterSchema.filterSchemaLines.forEach(function (filterSchemaLine1) {
        if (filterSchemaLine.fieldName === filterSchemaLine1.fieldName) {
          filterSchemaLine1.visible = filterSchemaLine.visible;
          filterSchemaLine1.sortNo = filterSchemaLine.sortNo;
        }
      });

      FilterSchema.filterSchemaLinePropertyChanged(
        _self.windowNo,
        _self.tabIndex,
        _self.filterSchema.filterSchemaLines,
      );

      _self.filterSchema.filterSchemaLines.sort(function (item1, item2) {
        return item1.sortNo - item2.sortNo;
      });
    },

    /**
     * 搜索框值发生改变
     * @param  {Object} newFieldValue 改变后的值
     * @param  {Object} filterSchemaLine          当前field
     * @return {void}
     */
    searchWidgetValueChanged: function (filterSchemaLine, key, newFieldValue) {
      filterSchemaLine[key] = newFieldValue.id;
      filterSchemaLine.fieldValue = newFieldValue;
    },

    /**
     * 多选搜索框值（id）发生改变事件
     * @param {Object} newFieldValue
     * @param {Object} item
     * @param {Object} index
     */
    multiSearchValueChange: function (filterSchemaLine, key, newFieldValue) {
      console.log('newFieldValue:', newFieldValue);
      var _self = this;
      filterSchemaLine.fieldValue = newFieldValue;
      var ids = newFieldValue.ids;
      filterSchemaLine[key] = ids.join(',');
    },

    /**
     * 树选中项（id）发生改变事件
     * @param {Object} newFieldValue
     * @param {Object} item
     * @param {Object} index
     */
    treeValueChange: function (filterSchemaLine, key, ids) {
      var _self = this;
      filterSchemaLine.fieldValue.ids = ids;
      filterSchemaLine[key] = ids.join(',');
    },

    /**
     * 清除搜索条件
     * @author YangZhiJie
     * @version 1.0 20180201
     */
    clearSearchCondition: function () {
      var _self = this;
      var filterParams = [];
      if (_self.filterSchema.filterSchemaLines != undefined) {
        _self.filterSchema.filterSchemaLines.forEach(function (
          filterSchemaLine,
        ) {
          filterSchemaLine.value1 = '';
          filterSchemaLine.value2 = '';
          // AND OR
          filterSchemaLine.isCompositeOr = false;
          // 大小写不敏感
          filterSchemaLine.isCaseSensitive = false;
          // 恢复约束放式
          filterSchemaLine.constraintEnum = filterSchemaLine.oldConstraintEnum;

          if (filterSchemaLine.fieldValue != undefined) {
            if (filterSchemaLine.fieldValue.displayValue != undefined) {
              filterSchemaLine.fieldValue.displayValue.splice(
                0,
                filterSchemaLine.fieldValue.displayValue.length,
              );
            }
            if (filterSchemaLine.fieldValue.ids != undefined) {
              filterSchemaLine.fieldValue.ids.splice(
                0,
                filterSchemaLine.fieldValue.ids.length,
              );
            }
          }
        });
      }

      // tiangaunghui 20180424
      // YangZhiJie 20180424
      // 清空选择框内的内容
      if (_self.$refs.filterMultiSearchWidget != undefined) {
        if (_self.$refs.filterMultiSearchWidget instanceof Array) {
          for (var i = 0; i < _self.$refs.filterMultiSearchWidget.length; i++) {
            _self.$refs.filterMultiSearchWidget[i].clearSearchCondition();
          }
        } else {
          _self.$refs.filterMultiSearchWidget.clearSearchCondition();
        }
      }

      //this.complexSearch();

      this.$emit('complexSearch', null);
    },

    /**
     * 禁止滚轮滚动影响数字
     */
    mouseWheelEvent: function (event) {
      if (event || Window.event) {
        event.preventDefault();
      }
    },

    /**
     * 获取查询条件(供外部调用)
     */
    getFilterParams: function () {
      var _self = this;
      var filterParams = [];
      if (_self.filterSchema.filterSchemaLines != undefined) {
        _self.filterSchema.filterSchemaLines.forEach(function (
          filterSchemaLine,
        ) {
          if (filterSchemaLine.displayType == 'CheckBoxEditor') {
            if (
              filterSchemaLine.value1 != undefined &&
              filterSchemaLine.value1 != ''
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = false;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else if (filterSchemaLine.displayType == 'MultiSearchBoxEditor') {
            if (
              filterSchemaLine.value1 != undefined &&
              filterSchemaLine.value1 != ''
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.fieldValue = filterSchemaLine.fieldValue;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = false;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else if (filterSchemaLine.displayType == 'SearchBoxEditor') {
            if (
              filterSchemaLine.value1 != undefined &&
              filterSchemaLine.value1 != ''
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.fieldValue = filterSchemaLine.fieldValue;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = false;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else if (filterSchemaLine.displayType == 'Tree') {
            if (
              filterSchemaLine.value1 != undefined &&
              filterSchemaLine.value1 != ''
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.fieldValue = filterSchemaLine.fieldValue;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = false;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else if (filterSchemaLine.displayType == 'YearMonthEditor') {
            if (
              (filterSchemaLine.value1 != undefined &&
                filterSchemaLine.value1 != '') ||
              (filterSchemaLine.value2 != undefined &&
                filterSchemaLine.value2 != '')
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = dayjs(filterSchemaLine.value1).format('YYYY-MM');
              if (filterSchemaLine.value2 != undefined &&
                filterSchemaLine.value2 != '') {
                filterParam.value2 = dayjs(filterSchemaLine.value2).format('YYYY-MM');
              }
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = filterSchemaLine.isCaseSensitive;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else if (filterSchemaLine.displayType == 'NumberEditor') {
            if (filterSchemaLine.value1 != undefined || filterSchemaLine.value2 != undefined) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.value2 = filterSchemaLine.value2;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = filterSchemaLine.isCaseSensitive;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          } else {
            if (
              (filterSchemaLine.value1 != undefined &&
                filterSchemaLine.value1 != '') ||
              (filterSchemaLine.value2 != undefined &&
                filterSchemaLine.value2 != '')
            ) {
              let filterParam = {};
              filterParam.fieldName = filterSchemaLine.fieldName;
              filterParam.value1 = filterSchemaLine.value1;
              filterParam.value2 = filterSchemaLine.value2;
              filterParam.isCompositeOr = filterSchemaLine.isCompositeOr;
              filterParam.isCaseSensitive = filterSchemaLine.isCaseSensitive;
              filterParam.constraintEnum = filterSchemaLine.constraintEnum;
              filterParams.push(filterParam);
            }
          }
        });
      }
      return filterParams;
    },

    /**
     * 获取查询条件(供外部调用)
     */
    setFilterParams: function (filterParams) {
      if (filterParams == null) {
        return;
      }
      var _self = this;
      if (_self.filterSchema.filterSchemaLines != undefined) {
        for (let i = 0; i < _self.filterSchema.filterSchemaLines.length; i++) {
          let filterSchemaLine = _self.filterSchema.filterSchemaLines[i];
          let fieldName = filterSchemaLine.fieldName;
          for (let j = 0; j < filterParams.length; j++) {
            if (filterParams[j].fieldName == fieldName) {
              filterSchemaLine.value1 = filterParams[j].value1;
              filterSchemaLine.value2 = filterParams[j].value2;
              filterSchemaLine.fieldValue = filterParams[j].fieldValue;
              filterSchemaLine.isCompositeOr = filterParams[j].isCompositeOr;
              filterSchemaLine.isCaseSensitive =
                filterParams[j].isCaseSensitive;
              filterSchemaLine.constraintEnum = filterParams[j].constraintEnum;
              break;
            }
          }
        }
      }
    },

    /**
     * 复杂搜索
     * @return {void}
     */
    complexSearch: function () {
      this.$emit('complexSearch', this.getFilterParams());
    },
  },

};
</script>

<style scoped>
.grid-complex-filter-panel {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: min-content auto;
  height: calc(100%);
  width: 100%;
}

.grid-item-1 {
  grid-row: 1 / 2;
  grid-column: 0 / 1;
}

.grid-item-2 {
  overflow-y: auto;
  grid-row: 2/ 3;
  grid-column: 0 / 1;
}

.filter-button {
  float: left;
  position: absolute;
  left: 30px;
}

.dropdown-toggle {
  margin-left: 0px;
  width: 120px;
}

.span-delete {
  float: right;
  color: #aaa;
}

.grid-container {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 80px 70px 104px 1fr 1fr;
  gap: 0px;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-flow: row dense;
  overflow: auto;
}

.grid-item-label {
  height: 34px;
  line-height: 34px;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.grid-item-row-column1 {
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-item-row-column2 {
  grid-column-start: 2;
  grid-column-end: 3;
  justify-self: center;
  text-align: center;
}

.grid-item-row-column3 {
  grid-column-start: 3;
  grid-column-end: 4;
}

.grid-item-row-column4 {
  grid-column-start: 4;
  grid-column-end: 5;
}

.grid-item-row-column5 {
  grid-column-start: 5;
  grid-column-end: 6;
}

.grid-item-row-column2-3-4-5 {
  grid-column-start: 2;
  grid-column-end: 6;
}

.grid-item-row-column1-2-3-4-5 {
  grid-column-start: 1;
  grid-column-end: 6;
}

.grid-item-row-column3-4-5 {
  grid-column-start: 3;
  grid-column-end: 6;
}

.grid-item-row-column4-5 {
  grid-column-start: 4;
  grid-column-end: 6;
}

.m-btn-xs {
  padding: 0px;
  line-height: 16px;
  height: 16px;
  border-radius: 3px;
  margin: 0px;
  width: 70px;
}

.tree-widget {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  max-height: 300px;
  overflow: auto;
  padding: 5px;
  border-radius: 4px 4px 0 0;
}

.svg-logo {
  width: 25px;
  height: 25px;
  cursor: pointer;
  display: inline-table;
  padding: 3px;
  user-select: none;
}
</style>