<template>
  <div class="searchResult">
    <div class="wrapper">
      <sort-select></sort-select>
      <button class="general-btn btnFilter" @click="showFilter">
        <span>FILTERS</span>
      </button>
    </div>
    <result-no v-if="false"></result-no>
    <card-list></card-list>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import SortSelect from '@/components/market/SortSelect.vue'
import CardList from '@/components/market/CardList.vue'
import ResultNo from '@/components/market/ResultNo.vue'

@Component({
  name: 'SearchResult',
  components: {
    ResultNo,
    CardList,
    SortSelect
  }
})
export default class extends Vue {
  showFilter() {
    this.$emit('filter-show', true)
  }
}
</script>
<style lang="scss" scoped>
.searchResult {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 2.5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.searchResult .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.searchResult .wrapper .btnFilter {
  width: 14.5em;
  font-size: inherit;
  height: auto;
  padding: 1em 0;
  display: none;
  border-radius: 0.5em;
  background: #3b2a8b;
}

.searchResult .wrapper .btnFilter span {
  font-size: 1.125em;
  line-height: 1.33;
}
@media (max-width: 767px) {
  .searchResult {
    margin-top: 76px;
  }
  .searchResult .wrapper .btnFilter {
    clip-path: none;
    display: block;
  }
}

</style>
