<template>
  <div class="screen" v-on:click="closeOption">
    <div class="filtering-wrapper">
      <div
        class="filtering-option"
        v-on:click="$emit('filteringType', '추천순')"
      >
        추천순
      </div>
      <div
        class="filtering-option"
        v-on:click="$emit('filteringType', '최신순')"
      >
        최신순
      </div>
      <div
        class="filtering-option"
        v-on:click="$emit('filteringType', '평점 높은순')"
      >
        평점 높은순
      </div>
      <div
        class="filtering-option"
        v-on:click="$emit('filteringType', '평점 낮은순')"
      >
        평점 낮은순
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "filteringOptions",
  props: {
    filteringType: Function,
    onClickFilteringOption: Function,
  },
  methods: {
    closeOption(event) {
      if (!event.target.classList.contains("screen")) return;
      this.$emit("onClickFilteringOption");
    },
  },
};
</script>

<style scopped>
.screen {
  position: fixed;
  top: 0;
  z-index: 3;
  width: 100%;
  max-width: 800px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.filtering-wrapper {
  width: 100%;
  max-width: 800px;
  background-color: white;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  padding: 14px 20px 50px 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  z-index: 2;
}
.filtering-option {
  background-color: white;
  font-size: 15px;
  line-height: 22.2px;
  padding: 19px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--COLOR_GREY_3);
}
.filtering-option:last-child {
  border: none;
}
</style>
