<template>
  <div class="searchResult">
    <!-- <div class="wrapper">
      <sort-select
        v-if="showSort"
        :filters="sorts"
        @filter-change="sortChange"
      ></sort-select>
      <button class="general-btn btnFilter" v-if="showSort" @click="showFilter">
        <span>FILTERS</span>
      </button>
    </div> -->
    <!-- <result-no title="COMING SOON." desc=""></result-no> -->
    <card-list v-if="selectIdx -1 == 0"></card-list>
    <DunList v-else-if="selectIdx -1 == 1"></DunList>
    <ChipList v-else-if="selectIdx-1 == 2"></ChipList>
  </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 DunList from "@/components/market/DunList.vue";
import ChipList from "@/components/market/ChipCardList.vue";
import ResultNo from "@/components/market/ResultNo.vue";

declare module "vue/types/vue" {
  interface Vue {
    showSort?: boolean;
  }
}

@Component({
  name: "SearchResult",
  components: {
    ResultNo,
    CardList,
    ChipList,
    SortSelect,
    DunList
  },
  props: ["showSort","selectIdx"],
})
export default class extends Vue {
  private sorts = ["None", "Latest", "Cheapest Item", "Most Expensive"];
  showFilter() {
    this.$emit("filter-show", true);
  }

  sortChange(id: number) {
    console.log("sort change: ", id);
  }
}
</script>
<style lang="scss" scoped>
.searchResult {
  display: flex;
  -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: 40px;
  padding: 1em 0;
  display: none;
  line-height: 18px;
  border-radius: 0.5em;
  background: #3b2a8b;
}

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