<template>
  <a-space>
    <a-dropdown-button :trigger="['click']">
      {{ $t('lang.ComplexFilterHistory.theHistoricalRecord') }}
      <template #overlay>
        <a-menu>
          <a-menu-item v-for="(historyQuery, index) in historyQueryList" :key="index">
            <div class="history-item-container">
              <span class="history-name" @click="selectHistoryQuery(historyQuery)">
                {{ historyQuery.queryName }}
              </span>
              <CloseOutlined class="delete-icon" @click="deleteHistoryById(historyQuery)" />
            </div>
          </a-menu-item>
          <a-menu-item v-if="historyQueryList.length > 0">
            <a type="danger" @click="deleteHistory">{{ $t('lang.ComplexFilterHistory.clearAllRecords') }}</a>
          </a-menu-item>
          <a-menu-item v-if="historyQueryList.length === 0">
            <span>No Data</span>
          </a-menu-item>
        </a-menu>
      </template>
      <template #icon>
        <DownOutlined />
      </template>
    </a-dropdown-button>

    <a-button type="default" @click="saveFilterConditionModal = true">
      <EditOutlined />
    </a-button>

    <a-modal
      v-model:open="saveFilterConditionModal" :title="$t('lang.ComplexFilterHistory.saveSearchCriteria')"
      @ok="saveHistoryQueries"
    >
      <a-form layout="vertical">
        <a-form-item :label="$t('lang.ComplexFilterHistory.nameOfSearchCriteria')">
          <a-input
            v-model:value="queryName"
            :placeholder="$t('lang.ComplexFilterHistory.pleaseEnterNameSearchCriteria')"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-space>
</template>


<script>
import Common from '../../common/Common.js';

import HistoryQueryResource from '../../api/system/HistoryQueryResource.js';
import { Notify, Uuid } from 'pc-component-v3';
import {
  DownOutlined,
  EditOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue';

export default {
  components: {
    DownOutlined,
    EditOutlined,
    CloseOutlined,
  },
  inject: ['setFilterParams', 'getFilterParams'],
  props: {

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

  emits: ['set-filter-params', 'get-filter-params'],

  data: function () {
    return {
      //查询条件别名
      queryName: '',
      historyQueryList: [],
      saveFilterConditionModal: false,
    };
  },

  mounted: function () {
    this.getHistoryQueries();
  },

  methods: {



    /**
         * 获取历史查询数据
         */
    getHistoryQueries: function () {
      var _self = this;
      HistoryQueryResource.listByCondition('ComplicateFilter', 10, _self.windowNo, _self.tabIndex).then(successData => {
        _self.historyQueryList = successData;
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 保存查询记录
         */
    saveHistoryQueries: function () {
      var _self = this;
      if (_self.queryName != undefined && _self.queryName != '') {
        var filterParams = _self.getFilterParams();
        var condition = JSON.stringify(filterParams);
        var historyQuery = {
          type: 'ComplicateFilter',
          condition: condition,
          queryName: _self.queryName,
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
        };
        HistoryQueryResource.save(historyQuery).then(successData => {
          _self.getHistoryQueries();
          _self.saveFilterConditionModal = false;
        }, errorData => {
          Common.processException(errorData);
        });
        _self.queryName = '';
      } else {
        Notify.error('未填写搜索条件名', '请填写要定义的搜索条件的名称。', false);
      }
    },

    /**
         * 删除所有的历史记录
         */
    deleteHistory: function () {
      var _self = this;
      HistoryQueryResource.deleteByType('ComplicateFilter', _self.windowNo, _self.tabIndex).then(successData => {
        _self.getHistoryQueries();
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 删除单个历史记录
         * @param {Object} historyQuery
         */
    deleteHistoryById: function (historyQuery) {
      var _self = this;
      HistoryQueryResource.deleteById('ComplicateFilter', historyQuery.id).then(successData => {
        _self.getHistoryQueries();
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 选择了查询条件
         * @param {Object} historyQuery
         */
    selectHistoryQuery: function (historyQuery) {
      var _self = this;
      var filterParams = JSON.parse(historyQuery.condition);
      _self.setFilterParams(filterParams);
    },
  },
};

</script>

<style scoped>
.history-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.delete-icon {
  color: #ff4d4f;
  margin-left: 8px;
  transition: color 0.3s;
}

.delete-icon:hover {
  color: #ff7875;
}

:deep(.ant-dropdown-menu-item) {
  padding: 8px 12px;
}

:deep(.ant-btn-default) {
  border-color: #d9d9d9;
}
:deep(.ant-form-item-label > label) {
  font-size: 14px !important;
  font-weight: 600 !important;
}
</style>