<template>
  <div class="syNewsearchbar">
    <section class="search-wrap">
      <slot v-if="slotName" :name="slotName"></slot>
      <el-input
        v-else
        class="search-input"
        :class="{ 'search-input-small': smallSearchWidth === true }"
        clearable
        :placeholder="placeholder"
        v-model.trim="keyword"
      >
        <slot slot="suffix" name="filtrateConditions"></slot>
      </el-input>
      <a class="dropdown-search" v-if="showFilter" @click="shrinkFilter">
        {{ shrinkFilterList ? '更多筛选' : '更多筛选' }}
        <i class="el-icon-caret-bottom" :class="{ rotate180: !shrinkFilterList }"></i>
      </a>
      <el-button size="small" class="search-btn hover-btn" @click.stop="searchTable">查询</el-button>
      <el-button v-if="resetBtnFlag" size="small" class="search-btn reset-btn" @click="clearTags">重置</el-button>
      <div class="header-filter-btns">
        <slot name="listBtns"></slot>
      </div>
    </section>
    <section
      class="filter-wrap"
      :style="{
        maxHeight: shrinkFilterList ? '0px' : `${windowHeight}px`,
        boxShadow: shrinkFilterList ? 'none' : 'rgba(0, 0, 0, 0.12) 0px 10px 20px 0px'
      }"
    >
      <div class="filter-list" :class="{ h0: shrinkFilterList, mt0: shrinkFilterList }">
        <slot ></slot>
      </div>
      <!-- 保存筛选数据-->
      <div v-if="showSaveCondition" class="mt10 mb10 clearfix">
        <el-button size="small" class="save-btn search-btn reset-btn" @click="saveScreeningCriteria">保存</el-button>
        <el-select size="small" class="condition-selector" v-model="choosedCondition" clearable @change="selectChange">
          <el-option v-for="(item, index) in savedCondition" :key="index" :label="item.label" :value="item.value" placeholder="已保存的条件">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right;">
              <i class="el-icon-circle-close" @click.stop="deleteItem(index)"></i>
            </span>
          </el-option>
        </el-select>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'SyNewsearchbar',
  data() {
    return {
      keyword: '',
      shrinkFilterList: true,
      windowHeight: 0, // 窗口高度
      // 选中的搜索条件
      choosedCondition: ''
    }
  },
  props: {
    slotName: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    showFilter: {
      type: Boolean,
      default: true
    },
    savedCondition: {
      // 保存的搜索条件
      type: Array,
      default() {
        return []
      }
    },
    showSaveCondition: {
      type: Boolean,
      default: true
    },
    resetBtnFlag: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.getWinH()
    window.addEventListener('resize', event => {
      this.getWinH()
    })
    // 根据分辨率大于显示搜索输入框的宽度
    if (document.body.clientWidth < 1366) {
      this.smallSearchWidth = true
    } else {
      this.smallSearchWidth = false
    }
  },
  methods: {
    // 得到窗口高度
    getWinH() {
      this.windowHeight = window.innerHeight - 140
    },
    // 搜索表格
    searchTable() {
      this.$emit('searchTable', this.keyword)
      this.shrinkFilterList = true
    },
    // 收起展开过滤区
    shrinkFilter() {
      this.shrinkFilterList = !this.shrinkFilterList
    },
    // 清空过滤选项
    clearTags() {
      this.shrinkFilterList = true
      this.$emit('clearTags')
    },
    saveScreeningCriteria() {
      this.$emit('saveScreeningCriteria', this.keyword)
    },
    selectChange(ids) {
      this.$emit('selectChange', ids)
    },
    deleteItem(index) {
      this.$emit('deleteItem', index)
    }
  }
}
</script>
<style lang="scss" scoped>
.syNewsearchbar {
  .search-wrap {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 16px ;
    min-width: 850px;
    .search-input {
      width: 408px;
      float: left;
      i {
        cursor: pointer;
      }
    }
    .search-input-small {
      width: 336px;
    }
    .dropdown-search {
      color: #027aff;
      font-size: 14px;
      float: left;
      margin: 10px 10px 0;
      cursor: pointer;
    }
    .header-filter-btns {
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      top: 16px;
      height: 32px;
    }
  }
  .search-btn {
    background: #027aff;
    color: #fefafa;
    font-size: 14px;
    height: 32px;
    width: 72px;
    border: 1px solid #027aff;
  }
  .reset-btn {
    background: #fff;
    border: 1px solid #d9d9d9;
    color: rgba(0, 0, 0, 0.65);
  }
  .filter-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    background: #fafafa;
    z-index: 999;
    transition: all 0.3s;
    overflow: hidden;
    padding: 0 25px;
    margin-left: -25px;
    .save-btn {
      margin-left: 5px;
      float: right;
    }
    .condition-selector {
      float: right;
    }
    .filter-list {
      margin-top: 20px;
      border-top: 1px solid #eaedf1;
      border-left: 1px solid #eaedf1;
      border-right: 1px solid #eaedf1;
      ul {
        overflow: hidden;
        position: relative;
      }
      .filter-item {
        border-bottom: 1px solid #eaedf1;
        text-align: center;
        font-size: 14px;
        position: relative;
        height: auto;
        .item-title {
          position: absolute;
          width: 95px;
          left: 0;
          top: 0;
          bottom: 0;
          height: auto;
          line-height: 48px;
          background: #f6f7fb;
          color: #5e6470;
          border-right: 1px solid #eaedf1;
        }
        .item-list {
          position: relative;
          left: 100px;
          right: 0;
          padding-right: 50px;
          box-sizing: border-box;
          ul > li {
            float: left;
            color: rgba(0, 0, 0, 0.65);
            line-height: 48px;
            padding: 0 12px;
            cursor: pointer;
          }
          ul > li.isActive {
            color: #027aff;
          }
          .moreFilters {
            width: 100%;
            .showMore {
              float: right;
              line-height: 48px;
              margin-right: 36px;
              color: #027aff;
              font-size: 12px;
            }
            > div {
              width: 100%;
              height: auto;
              > div {
                float: left;
                height: 40px;
                line-height: 30px;
                p {
                  height: 100%;
                  line-height: 30px;
                  padding: 0 4px 0 24px;
                  float: left;
                }
                .operators {
                  float: left;
                }
              }
            }
          }
        }
      }
    }
    .h0 {
      height: 0;
      overflow: hidden;
      margin-bottom: 0;
    }
    .mt0 {
      margin-top: 0;
    }
    .mt10 {
      margin-top: 10px;
    }
    .mb10 {
      margin-bottom: 10px;
    }
    .h40 {
      height: 40px;
      overflow: hidden;
    }
  }
  .clearfix:after {
    content: '.';
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    overflow: hidden;
  }
  .rotate180 {
    transform: rotateZ(180deg);
  }
}
</style>
