<template>
  <div style="display: inline;">
    <button
      id="dropdownMenu1"
      class="btn btn-default dropdown-toggle"
      type="button"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="true"
    >
      {{ $t('lang.ComplexFilterHistory.theHistoricalRecord') }}
      <span class="caret" />
    </button>

    <button
      type="button"
      class="btn btn-default"
      aria-haspopup="true"
      aria-expanded="false"
      @click="saveFilterConditionModal=true"
    >
      <span class="glyphicon glyphicon-saved" />
    </button>

    <ul
      class="dropdown-menu"
      aria-labelledby="dropdownMenu1"
    >
      <li v-for="historyQuery,index in historyQueryList" :key="index">
        <a @click.self="selectHistoryQuery(historyQuery)">
          {{ historyQuery.queryName }}
          <span
            class="fa fa-close span-delete"
            @click.self="deleteHistoryById(historyQuery)"
          />
        </a>
      </li>
      <li v-if="historyQueryList.length > 0">
        <a @click="deleteHistory()">{{ $t('lang.ComplexFilterHistory.clearAllRecords') }}</a>
      </li>
    </ul>

    <Modal
      v-model:show="saveFilterConditionModal"
      @ok="saveHistoryQueries"
    >
      <template #header>
        {{ $t('lang.ComplexFilterHistory.saveSearchCriteria') }}
      </template>
      <div>
        <div
          class="form-group"
          style="width: 100%;"
        >
          <label for="condition">{{ $t('lang.ComplexFilterHistory.nameOfSearchCriteria') }}</label>
          <input
            id="condition"
            v-model="queryName"
            autocomplete="off"
            :placeholder="$t('lang.ComplexFilterHistory.pleaseEnterNameSearchCriteria')"
            class="form-control"
            style="width: 100%;"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>


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

import HistoryQueryResource from '../../api/system/HistoryQueryResource.js';
import { Notify, Uuid } from 'pc-component-v3';


export default {

  components: {
  },

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

  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.$parent.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();
        }, 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.$parent.setFilterParams(filterParams);
    },
  },
};

</script>

<style scoped>
.filter-button {
    float: left;
    position: absolute;
    left: 30px;
}

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

.span-delete {
    float: right;
    color: #aaa;
}
</style>