<template>
  <div class="search" :style="searchStyle">
    <div class="flex">
      <div
        v-for="(item, index) in searchData.list"
        :key="index"
        class="search-item"
        :style="item.type == 'date' ? 'flex-basis: 48%' : ''"
      >
        <!-- 时间范围 -->
        <div class="item" v-if="item.type == 'date'">
          <div class="label" v-if="item.label">{{ item.label }}：</div>
          <a-range-picker
            v-model:value="searchData.searchForm[item.field]"
            :format="dateFormat"
            :valueFormat="dateFormat"
            style="width: 100%"
          />
        </div>
        <!-- 用户 -->
        <div class="item" v-else-if="item.type == 'user'">
          <div class="label" v-if="item.label">{{ item.label }}：</div>
          <SelectUser
            :selectedIds="searchData.searchForm[item.field]"
            :multiple="true"
            @change="
              (ids) => {
                searchData.searchForm[item.field] = ids;
              }
            "
            @change-names="
              (names) => {
                searchData.showData[item.field] = names;
              }
            "
          >
            <a-input
              :value="searchData.showData[item.field]"
              :placeholder="item.label"
              style="width: 100%"
            >
              <template #addonAfter>
                <Icon icon="ant-design:user-outlined" />
              </template>
            </a-input>
          </SelectUser>
        </div>

        <div class="item" v-else>
          <div class="label" v-if="item.label">{{ item.label }}：</div>
          <a-input
            v-model:value="searchData.searchForm[item.field]"
            :placeholder="item.placeholder || t('请输入') + item.label"
            style="width: 100%"
          />
        </div>
      </div>
    </div>
    <!-- 搜索按钮 -->
    <div class="flex">
      <a-button type="primary" @click="search" class="search-btn">{{ t('搜索') }}</a-button>
      <a-button @click="reset" class="search-btn">{{ t('重置') }}</a-button>
      <span @click="expansionOrContraction" class="show-icon" v-if="searchData.showSearchIcon"
        >{{ searchData.showAll ? t('收缩') : t('展开') }}
        <Icon icon="ion:chevron-forward" :class="searchData.showAll ? 'show' : 'hide'"
      /></span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive } from 'vue';
  import { Icon } from '/@/components/Icon/index';
  import { SelectUser } from '/@/components/SelectOrganizational/index';
  import { cloneDeep } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const dateFormat = 'YYYY-MM-DD HH:mm:ss';
  const props = defineProps(['searchConfig', 'searchStyle']);
  const emits = defineEmits(['search', 'scrollHeight']);
  // 搜索
  onMounted(() => {
    initSearch();
  });
  let searchData: {
    showAll: boolean;
    showSearchIcon: boolean;
    searchForm: any;
    showData: any;
    originalData: Array<{ field: string; label: string; value: string; type: string }>;
    list: Array<{ field: string; label: string; value: string; type: string; placeholder: string }>;
  } = reactive({
    showAll: false,
    showSearchIcon: true,
    originalData: [],
    list: [],
    searchForm: {},
    showData: {},
  });

  function initSearch() {
    if (props.searchConfig) {
      searchData.showAll = true;
      searchData.originalData = cloneDeep(props.searchConfig);
      searchData.originalData.forEach((element) => {
        if (element.field === 'originator' || element.field === 'userID') {
          searchData.searchForm[element.field] = [];
          searchData.showData[element.field] = '';
        } else if (element.field === 'searchDate') {
          searchData.searchForm[element.field] = [null, null];
        } else {
          searchData.searchForm[element.field] = element.value ? element.value : '';
        }
      });
      expansionOrContraction();
    }
  }
  function search() {
    let params = {};
    for (const key in searchData.searchForm) {
      if (Object.prototype.hasOwnProperty.call(searchData.searchForm, key)) {
        const value = searchData.searchForm[key];
        if (key === 'originator') {
          //发起人
          if (Array.isArray(value)) {
            params['originator'] = value.join(',');
          }
        } else if (key === 'searchDate') {
          if (Array.isArray(value)) {
            params['startTime'] = value[0];
            params['endTime'] = value[1];
          }
        } else {
          params[key] = value;
        }
      }
    }
    emits('search', params);
  }
  function reset() {
    initSearch();
    search();
  }
  // 展开或者收缩
  function expansionOrContraction() {
    searchData.showAll = !searchData.showAll;
    if (searchData.originalData.length > 3) {
      searchData.showSearchIcon = true;
      searchData.list = cloneDeep(searchData.originalData).splice(0, 3);

      if (searchData.showAll) {
        searchData.list.push(
          ...cloneDeep(searchData.originalData).splice(3, searchData.originalData.length),
        );
      }
    } else {
      searchData.showSearchIcon = false;
      searchData.list = cloneDeep(searchData.originalData);
    }
    emits('scrollHeight');
  }
</script>
<style lang="less" scoped>
  :deep(.ant-input) {
    border-radius: 4px;
  }
  // 搜索
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 16px;
    height: 52px;
    position: relative;
    flex: 1;
    padding: 0 16px;

    .search-item {
      display: flex;
      align-items: center;
      margin-right: 16px;
    }

    .item {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .search-btn {
      margin-left: 16px;
      border-radius: 4px;
      width: 74px;
    }

    .show-icon {
      color: @primary-color;
      margin: 0 10px;
      align-self: center;
    }

    .show {
      transform: rotate(-90deg);
    }

    .hide {
      transform: rotate(90deg);
    }

    .label {
      min-width: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>
