<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <!-- 选中后展示 -->
  <div
    class="filter-array-group"
    :style="focusObj.divFocus ? '' : 'display:inline-flex'"
    v-if="filterArrayShow.length > 0"
    @click.stop="focusShowDiv">
    <div
      v-for="(item, index) in filterArrayShow"
      :key="index"
      :class="[
        item.isEdit ? 'filter-array-span-edit' : 'filter-array-span',
        !focusObj.divFocus ? 'filter-array-span-nofocus' : '',
      ]"
      :style="
        focusObj.divFocus
          ? item.isEdit
            ? 'padding-right: 0px;'
            : 'padding-right: 20px;'
          : 'padding-right: 4px;line-height:14px'
      ">
      <div
        v-if="item.isEdit && item.item.componentType == 'NsInput'"
        class="filter-array-span-edit-div"
        :style="'width:' + item.inputWidth + 'px'">
        <!-- @showFilterLabel="showFilterLabel" -->
        <ns-input-filter-input
          ref="spanItem"
          :value="item.spanFilterValue"
          :chooseItem="item"
          @change="nsSpanInputChange"
          @pressEnter="spanPressEnter"
          @chooseIsEmptyLabel="chooseIsEmptyLabel"
          @keydown="onKeyUpDeleteSpan"
          :spanIndex="index" />
      </div>
      <div
        v-else-if="item.isEdit && item.item.componentType == 'NsSingleSearch'"
        class="filter-array-span-edit-div"
        :style="'width:' + item.inputWidth + 'px'">
        <ns-input-filter-singleSearch
          ref="spanItem"
          :value="item.spanFilterValue"
          :chooseItem="item"
          :optionsValue="item.optionsValue"
          @change="nsInputChange"
          @pressEnter="spanPressEnter"
          @chooseOptions="chooseSingleOptions"
          @keydown="onKeyUpDeleteSpan"
          :spanIndex="index" />
      </div>
      <div
        v-else-if="item.isEdit && item.item.componentType == 'NsMultiSearch'"
        class="filter-array-span-edit-div"
        :style="'width:' + item.inputWidth + 'px'">
        <ns-input-filter-multiSearch
          ref="spanItem"
          :value="item.spanFilterValue"
          :chooseItem="item"
          :optionsValue="item.optionsValue"
          @pressEnter="spanPressEnter"
          @change="nsInputChange"
          @canel="canel"
          @chooseOptions="chooseMultiOptions"
          @keydown="onKeyUpDeleteSpan"
          :spanIndex="index" />
      </div>
      <div
        v-else
        @click.stop="editSpan(item, index)"
        :class="[focusObj.divFocus ? 'span-group-div' : 'span-noFcous-div']">
        <span class="filter-array-span-1"> {{ item.label }}: </span>
        <span class="filter-array-span-2">
          {{ item.value }}
        </span>
        <span
          class="close-span close-icon"
          v-if="focusObj.divFocus"
          @click.stop="delSpan(item, index)">
        </span>
      </div>
      <!-- 下拉过滤标签 -->
      <!-- <div v-if="showFilterLabelIndex == index && item.isEdit" class="ns-input-filter-content">
        <div class="ns-input-filter-list">
          <ul v-for="(item, index) in realTimeFilterList" :key="index" class="filter-list-text">
            <li v-if="index == 0" class="is-disabled"> 选择资源属性进行过滤</li>
            <li @click="chooseLabel(item, index)">
              {{ item.label }}
            </li>
          </ul>
        </div>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed, ref, watch } from 'vue';
  import { NsMessage } from '/nerv-lib/component/message';
  import NsInputFilterInput from './input-filter-input.vue';
  import NsInputFilterSingleSearch from './input-filter-singleSearch.vue';
  import NsInputFilterMultiSearch from './input-filter-multiSearch.vue';
  import * as utils from './input-filter-util';

  export default defineComponent({
    name: 'NsInputFilterInputShowSpan',
    components: {
      'ns-input-filter-input': NsInputFilterInput,
      'ns-input-filter-singleSearch': NsInputFilterSingleSearch,
      'ns-input-filter-multiSearch': NsInputFilterMultiSearch,
    },
    props: {
      filterList: {
        type: Array,
        default: () => [],
      },
      filterArrayShowList: {
        type: Array,
        default: () => [],
      },
      selectedFilterList: {
        type: Array,
        default: () => [],
      },
      focusObjProp: {
        type: Object,
        default: () => {},
      },
      filterArrayList: {
        type: Array,
        default: () => [],
      },
      defaultFilterObj: {
        type: Object,
        default: () => {},
      },
    },
    emits: [
      'change',
      'spanPressEnter',
      'filterformatconvert',
      'searchFilter',
      'processSelected',
      'chooseSingleOptions',
      'chooseMultiOptions',
    ],
    setup(props, ctx) {
      // console.log('props')
      // console.log(props)
      //选中后展示的标签与值
      const filterArrayShow = ref(props.filterArrayShowList);

      // const showFilterLabelIndex = ref(-1);
      //下拉标签数据,props.filterList
      const filterListOperation = ref(props.filterList);
      //默认搜索标签
      const defaultFilter = ref(props.defaultFilterObj);

      //各焦点控制值
      const focusObj = ref(props.focusObjProp);

      const spanItem = ref(null);

      //当前选中的标签
      const chooseItem = ref({
        isChoose: false,
        isEdit: false,
        componentType: '',
        item: {},
        empty: false,
        notEmpty: false,
        isShowEmptyDiv: false,
        showEmptyOption: [],
      });

      //input输入框绑定值
      let filterValue = ref();

      //计算input宽度
      let inputWidth = computed(() => {
        if (typeof filterValue.value == 'undefined') {
          return 8 + 'px';
        }
        return DataLength(filterValue.value) + 'px';
      });

      //传入后端/表格filter字段
      let filterArray = ref(props.filterArrayList);

      /**
       * 选中了某个标签
       * 1.判断组件类型--确定展示形态
       * 2.是否不为空--是否要给用户选择
       * @param item
       * @param index
       */
      function chooseLabel(item: any) {
        if (
          item.componentType != 'NsInput' &&
          item.componentType != 'NsSingleSearch' &&
          item.componentType != 'NsMultiSearch'
        ) {
          NsMessage.error('暂未支持' + item.componentType + '形态！');
          return;
        }
        focusObj.value.focus = true;
        filterValue.value = String(item.label + '：');
        focusObj.value.filterLabelFocus = false;
        pushChooseItem(item, true);
      }

      //处理是否空值选中信息
      function pushChooseItem(item: any, isShowDiv: boolean) {
        //将选中的信息放在chooseItem中
        chooseItem.value.item = item;
        chooseItem.value.componentType =
          typeof item.componentType != 'undefined' ? item.componentType : 'NsInput';
        chooseItem.value.isChoose = isShowDiv;
        //判断空值
        if (typeof item.empty != 'undefined') chooseItem.value.empty = item.empty;
        if (typeof item.notEmpty != 'undefined') chooseItem.value.notEmpty = item.notEmpty;
        if (chooseItem.value.empty) {
          chooseItem.value.isShowEmptyDiv = isShowDiv;
          chooseItem.value.showEmptyOption.push({ label: '空', value: 'empty' });
        }
        if (chooseItem.value.notEmpty) {
          chooseItem.value.isShowEmptyDiv = isShowDiv;
          chooseItem.value.showEmptyOption.push({ label: '不为空', value: 'notEmpty' });
        }
      }

      //监听输入内容
      function valueChange(text: { data: string }) {
        // if (text.data !== null) {
        //    DataLength(text.data);
        // }
        if (typeof text.data != 'undefined' && text.data == '：') {
          let label = filterValue.value.split('：');
          let chooseItem = filterListOperation.value.filter(function (elem) {
            return elem.label == label[0];
          });
          if (chooseItem.length > 0 && label.length <= 2) {
            chooseLabel(chooseItem[0]);
          }
        }
      }

      //监听键盘删除
      function onKeyUpDelete(event: { key: string }) {
        if (event.key == 'Backspace') {
          if (typeof filterValue.value != 'undefined' && filterValue.value != '') {
            return;
          }
          filterArrayShow.value.pop();
          filterArray.value.pop();
          selectedFilter.value.pop();
        }
      }

      //span图标删除
      function onKeyUpDeleteSpan(index: number, isEmit: boolean) {
        // debugger;
        filterArrayShow.value.splice(index, 1);
        filterArray.value.splice(index, 1);
        selectedFilter.value.splice(index, 1);
        if (typeof isEmit == 'undefined' || isEmit) {
          emitData();
        }
      }

      /**
       * 是否有正在修改的span，点击搜索icon时默认已完成输入
       */
      function isEditSpanIng() {
        filterArrayShow.value.forEach((item: any, index) => {
          if (item.isEdit) {
            if (typeof item.changeValue != 'undefined') {
              if (
                (item.spanFilterValue.indexOf(':空') != -1 ||
                  item.spanFilterValue.indexOf(':不为空') != -1) &&
                item.value == ''
              ) {
                let emptyItem = {
                  label: item.spanFilterValue.indexOf(':空') != -1 ? '空' : '不为空',
                  value: item.spanFilterValue.indexOf(':空') != -1 ? 'empty' : 'notEmpty',
                };
                chooseIsEmptyLabel(emptyItem, item.changeValue);
              } else {
                spanPressEnter(item.changeValue, index, true, false);
              }
            } else {
              spanPressEnter(item.spanFilterValue, index, true, false);
            }
          }
        });
      }

      /**
       * span标签回车搜索
       * 需要改对应标签的值
       * 1.filterArrayShow 2.filterArray 3.selectedFilter(当前选中的标签被删除至默认标签时)
       * @param value
       * @param index
       * @param isChange true仅修改/false修改且搜索
       */
      function spanPressEnter(
        value: string,
        index: number,
        isChange: boolean,
        isEditCheck: boolean,
      ) {
        let isEditArray = filterArrayShow.value.filter(function (elem: any) {
          return elem.isEdit == true;
        });
        if (isEditArray.length > 1 && isEditCheck) {
          isEditSpanIng();
          return;
        }
        //还是以key:value形式
        if (value.indexOf('：') != -1) {
          let label = value.split('：')[0];
          let sliceIndex = value.indexOf('：') + 1;
          if (value.split('：')[1] == '') {
            return;
          }
          //原标签修改
          if (label == filterArrayShow.value[index].label) {
            filterArrayShow.value[index].value = value.slice(sliceIndex);
            let checkRes = checkData([selectedFilter.value[index]], value.slice(sliceIndex));
            searchFilter([selectedFilter.value[index]], value.slice(sliceIndex), checkRes, index);
            filterArrayShow.value[index].isEdit = false;
            if (!isChange) {
              emitData();
            }
          } else {
            spanEditDefault(value, index, true);
          }
        } else {
          spanEditDefault(value, index, false);
        }
      }

      /**
       * 原标签被删除的场景
       * 1.不是key：value形式，使用默认标签
       * 2.是key：value形式：是否已存在搜索标签，是：替换 否：使用默认标签，递归再判断一次
       * @param value
       * @param index
       * @param isKeyValue 是否有":"
       */
      function spanEditDefault(value: string, index: any, isKeyValue: boolean) {
        //debugger
        //直接使用默认标签
        if (!isKeyValue) {
          value = defaultFilter.value.label + '：' + value;
          return spanEditDefault(value, index, true);
        } else {
          let sliceIndex = value.indexOf('：') + 1;
          //先匹配是否存在于过滤标签中
          let isExist = filterListOperation.value.filter(function (elem) {
            return elem.label == value.split('：')[0];
          });
          //存在
          if (isExist.length > 0) {
            //判断是否在已搜索的span中
            let isSelectedExist = selectedFilter.value.filter(function (elem) {
              return elem.label == value.split('：')[0];
            });
            if (isSelectedExist.length > 0) {
              filterArrayShow.value.forEach((showValue: any, showIndex) => {
                // debugger;
                if (showValue.label == value.split('：')[0]) {
                  showValue.value = value.slice(sliceIndex);
                  let checkRes = checkData(isSelectedExist, value.slice(sliceIndex));
                  searchFilter(
                    isSelectedExist,
                    value.slice(sliceIndex),
                    checkRes,
                    showIndex,
                    false,
                  );
                  if (showIndex != index) {
                    //删除原span
                    onKeyUpDeleteSpan(showIndex, false);
                  } else {
                    filterArrayShow.value.splice(showIndex, 1);
                    // filterArray.value.splice(index, 1);
                    selectedFilter.value.splice(showIndex, 1);
                  }
                  //处理选中后展示的标签与值 filterArrayShow
                  processSelected(isSelectedExist, value.slice(sliceIndex));
                }
              });
            }
            //作为新的搜索条件
            else {
              //处理search的值
              searchFilter(
                isExist,
                value.slice(sliceIndex),
                checkData(isExist, value),
                undefined,
                false,
              );
              //处理选中后展示的标签与值 filterArrayShow
              processSelected(isExist, value.slice(sliceIndex));
              //删除原span
              onKeyUpDeleteSpan(index, false);
            }
            emitData();
          }
          //不存在 使用默认标签
          else {
            value = defaultFilter.value.label + '：' + value;
            return spanEditDefault(value, index, true);
          }
        }
      }

      /**
       * 处理数据格式
       * 需要注意：
       * 是否是已选择搜索过的标签
       */
      function filterformatconvert(empty: string | undefined, isEmptyValue: string | undefined) {
        ctx.emit('filterformatconvert', empty, isEmptyValue);
      }

      /**
       * input场景数据校验
       * @param chooseObj
       * @param itemValue
       */
      function checkData(chooseObj: any, itemValue: string) {
        if (
          typeof chooseObj[0].componentType != 'undefined' &&
          chooseObj[0].componentType != 'NsInput'
        )
          return;
        let value = itemValue.split('|');
        let rule =
          typeof chooseObj[0].componentProps.rule != 'undefined' &&
          JSON.stringify(chooseObj[0].componentProps.rule) != '{}'
            ? chooseObj[0].componentProps.rule.pattern
            : 'any';
        let result = true;
        switch (rule) {
          case 'any':
            break;
          default:
            rule = new RegExp(rule.split('/')[1]);
            value.forEach((elem) => {
              result = rule.test(elem);
            });
            break;
        }
        return result;
      }

      /**
       * 处理出入后端的值 filterArray
       * @param chooseObj
       * @param itemValue
       * @param checkRes
       * @param filterArrayIndex
       */
      function searchFilter(
        chooseObj: any[],
        itemValue: string,
        checkRes: boolean,
        filterArrayIndex: number,
        isEmit: boolean,
      ) {
        ctx.emit('searchFilter', chooseObj, itemValue, checkRes, filterArrayIndex, isEmit);
      }

      /**
       * 处理filterArrayShow（span展示）
       * 页面展示的选中值
       * @param chooseObj
       * @param itemValue
       */
      function processSelected(chooseObj: any[], itemValue: string) {
        ctx.emit('processSelected', chooseObj, itemValue);
      }

      //已选中的标签
      const selectedFilter = ref(props.selectedFilterList);

      /**
       * 单独处理删除
       * 第一步处理 展示filterArrayShow
       * 第二步处理过滤标签 把选中的这一项补回来
       */
      function delSpan(item: { label: any }, index: number) {
        // debugger;
        filterArrayShow.value.splice(index, 1);
        selectedFilter.value.forEach((elem: any) => {
          if (elem.label == item.label) {
            filterArray.value.forEach((arrayElem: any, elemIndex) => {
              if (arrayElem.name == elem.key) {
                filterArray.value.splice(elemIndex, 1);
              }
            });
          }
        });
        // console.log('selectedFilter', selectedFilter.value)
        // console.log('filterArrayShow', filterArrayShow.value)
        // console.log('filterArray',filterArray.value)
        selectedFilter.value.splice(index, 1);
        emitData();
      }

      /**
       * 还原chooseItem
       */
      function reductionChooseItem() {
        chooseItem.value = {
          isChoose: false,
          isEdit: false,
          componentType: '',
          item: {},
          empty: false,
          notEmpty: false,
          isShowEmptyDiv: false,
          showEmptyOption: [],
        };
      }

      /**
       * inputWidth 计算字符长度
       * @param fData
       */
      const DataLength = (fData: string) => {
        return utils.DataLength(fData);
      };

      /**
       *
       */
      function focusShowDiv() {
        focusObj.value.filterLabelFocus = false;
      }

      /**
       * 选中span，再次输入/修改
       */
      function editSpan(elem: { label: string; value: any }, index: number) {
        // debugger;
        if (!focusObj.value.divFocus) {
          focusObj.value.divFocus = true;
          // focusObj.value.filterLabelFocus = true;
          return;
        }
        let choose = filterListOperation.value.filter(function (filterItem: any) {
          return filterItem.label == elem.label;
        });
        if (choose.length > 0) {
          let spanFilterValue = elem.value;
          filterArrayShow.value[index].spanFilterValue = elem.label + '：' + spanFilterValue;
          filterArrayShow.value[index].inputWidth = DataLength(
            filterArrayShow.value[index].spanFilterValue,
          );
        }
        focusObj.value.filterLabelFocus = false;
        filterArrayShow.value[index].isEdit = true;
      }

      // //需要监听的数据
      // watch(
      //   () => props.filterArrayList,
      //   (newValue, oldValue) => {
      //   }
      // );
      // watch(
      //   () => filterArrayShow.value,
      //   (newValue, oldValue) => {
      //   },
      // );

      /**
       * 各个组件形态
       * nsInputChange input的值变化
       */
      function nsInputChange(value: string | string[], spanIndex: number) {
        if (spanIndex != -1) {
          filterArrayShow.value[spanIndex].inputWidth = DataLength(value);
        }
        //删除了标签
        if (value.indexOf('：') == -1) {
          reductionChooseItem();
        }
      }

      /**
       * 单个span点击，input组件形态再次输入
       * nsSpanInputChange
       */
      function nsSpanInputChange(value: string, index: string | number, bool: boolean) {
        if (value == '') {
          onKeyUpDeleteSpan(index);
        } else {
          if (bool == true) {
            filterValue.value = value;
          }
          filterArrayShow.value[index].changeValue = value;
          filterArrayShow.value[index].inputWidth = DataLength(value);
        }
      }

      /**
       * 组件选中某个空值
       * @param item
       */
      function chooseIsEmptyLabel(item: { label?: string; value: any }, isEmptyValue: any) {
        chooseItem.value.isShowEmptyDiv = false;
        focusObj.value.filterLabelFocus = false;
        // filterValue.value = '';
        //空值和不为空值
        filterformatconvert(item.value, isEmptyValue);
      }

      /**
       * 单选组件 选中
       */
      function chooseSingleOptions(
        value: string,
        option: { value: string; label: any },
        spanIndex: number,
      ) {
        ctx.emit('chooseSingleOptions', value, option, spanIndex);
      }

      /**
       * chooseMultiOptions 多选组件
       */
      function chooseMultiOptions(
        value: string,
        showValue: any,
        arrayValue: { value: any },
        spanIndex: number,
      ) {
        ctx.emit('chooseMultiOptions', value, showValue, arrayValue, spanIndex);
      }

      /**
       * 多选组件取消
       */
      function canel(index: number) {
        filterValue.value = '';
        focusObj.value.filterLabelFocus = false;
        if (index != -1) {
          filterArrayShow.value[index].isEdit = false;
        }
        reductionChooseItem();
      }

      /**
       * table发送数据
       */
      function emitData() {
        // console.log('emitData');
        // console.log(filterArray.value);
        ctx.emit('change', filterArray.value);
      }

      function setFilterArrayList(value: unknown[]) {
        filterArray.value = value;
      }

      function setDefaultFilter(value: Record<string, any>) {
        defaultFilter.value = value;
      }

      function setFilterArrayShow(value: unknown[], type: any) {
        // debugger
        if (typeof type != 'undefined') {
          selectedFilter.value = value;
          return;
        }
        filterArrayShow.value = value;
      }

      function onClickOutsideArrayShow() {
        filterArrayShow.value.forEach((item: any) => {
          item.isEdit = false;
        });
      }

      function showFilterLabel(value: any, index: any) {
        // console.log('showFilterLabel', value);
        // filterValue.value = value;
        // showFilterLabelIndex.value = index;
      }

      return {
        editSpan,
        focus,
        focusObj,
        chooseItem,
        filterArrayShow,
        inputWidth,
        filterValue,
        spanItem,
        // showFilterLabelIndex,
        // showFilterLabel,
        delSpan,
        chooseLabel,
        valueChange,
        onKeyUpDelete,
        onKeyUpDeleteSpan,
        chooseIsEmptyLabel,
        nsInputChange,
        nsSpanInputChange,
        spanPressEnter,
        chooseSingleOptions,
        chooseMultiOptions,
        canel,
        setFilterArrayList,
        setDefaultFilter,
        setFilterArrayShow,
        onClickOutsideArrayShow,
        focusShowDiv,
        isEditSpanIng,
      };
    },
  });
</script>
<style lang="less" scoped>
  .ns-input-filter-list {
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 0 16px 0 rgb(54 58 80 / 16%);
    min-width: 150px;
    color: rgba(0, 0, 0, 0.9);
  }
  .ns-input-filter-content {
    position: absolute;
    z-index: 9;
  }

  .filter-list-text {
    overflow-y: auto;
    padding: 0;
    list-style: none;
    color: rgba(0, 0, 0, 0.9);
    margin: 0px;
  }
  .filter-list-text > li.is-disabled {
    background-color: transparent;
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
  .filter-list-text > li:first-child,
  .filter-list-text > li:last-child {
    border-radius: 0 0 0 0;
  }
  .filter-list-text > li:hover {
    background-color: #ebeef2;
  }
  .filter-list-text > li {
    margin-bottom: 0;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    display: block;
    cursor: pointer;
  }
  :deep(.ant-input) {
    border: transparent !important;
  }
  .ant-input:focus {
    border: transparent !important;
    box-shadow: none !important;
  }
  .filter-array-span-nofocus {
    max-width: 100px;
  }
  .span-noFcous-div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 120px;
  }
  .span-group-div {
    display: inline;
    max-width: none;
    white-space: normal;
    vertical-align: middle;
    word-break: break-word;
  }
  .filter-array-span {
    position: relative;
    background-color: #f3f4f7;
    color: #000;
    margin: 4px;
    margin-left: 0px;
    line-height: 11px;
    vertical-align: middle;
    border: 1px solid #f3f4f7;
    border-radius: 0;
    padding: 2px 4px;
    min-height: 20px;

    vertical-align: inherit;
    display: inline-block;
    width: max-content;
    font-size: 12px;
    vertical-align: top;

    max-width: 470px;

    text {
    }
  }
  .filter-array-span-edit {
    position: relative;
    // background-color: #f3f4f7;
    color: #000;
    line-height: 10px;
    vertical-align: middle;
    border-radius: 0;
    margin-left: 4px;
    min-height: 20px;

    vertical-align: inherit;
    display: inline-block;
    width: max-content;
    font-size: 12px;
    vertical-align: top;
    max-width: 470px;

    :deep(.ant-input) {
      padding: 3px 0px !important;
      display: inline;
      white-space: normal;
      vertical-align: middle;
      word-break: break-word;
      max-width: 440px;
      padding-right: 5px !important;
    }
  }
  .filter-array-span-1 ::before {
    display: inline-block;
    content: '';
  }
  .filter-array-span-2 ::before {
    display: inline-block;
    content: '';
  }
  .close-span {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: inherit;
    font-size: 0;
  }
  .close-icon {
    position: absolute;
    right: 2px;
    bottom: 0;
    top: 0;
    margin: auto;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuOTk3NCAxQzQuMTMyODQgMSAxIDQuMTMyODUgMSA3Ljk5NzRDMSAxMS44NjE5IDQuMTMyODUgMTQuOTk0OCA3Ljk5NzQgMTQuOTk0OEMxMS44NjE5IDE0Ljk5NDggMTQuOTk0OCAxMS44NjE5IDE0Ljk5NDggNy45OTc0QzE0Ljk5NDggNC4xMzI4NSAxMS44NjE5IDEgNy45OTc0IDFaTTUuNTYyNTQgMTEuNjM4OEw0LjQyMzU3IDEwLjUwNjdMNi45MTQyMSA4LjAwMDk3TDQuNDA4NDQgNS41MTAzMkw1LjU0MDU0IDQuMzcxMzVMOC4wNDYzMyA2Ljg2MTk5TDEwLjUzNyA0LjM1NjIyTDExLjY3NTkgNS40ODgzM0w5LjE4NTMgNy45OTQwOUwxMS42OTExIDEwLjQ4NDhMMTAuNTU5IDExLjYyMzdMOC4wNTMyIDkuMTMzMDlMNS41NjI1NCAxMS42Mzg4WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPg==);
  }
</style>
