<template>
  <div class="select" v-click-outside.click="onClickOutside">
    <button
      class="menu-cover"
      :class="{
        active: isExpand,
      }"
      @click="isExpand = !isExpand"
    >
      {{value ? valueList[value] : placeholder}}
      <img
        class="pulldown-icon"
        :src="isExpand ? require('@/assets/img/service/arrow-down-active.png') : require('@/assets/img/service/arrow-down.png')"
        alt=""
        draggable="false"
      >
    </button>
    <div class="menu" v-show="isExpand">
      <button v-for="(item, index) of valueList" :key="index"
        :class="{
          active: index === value,
        }"
        @click="onSelect(index)"
      >
        {{item}}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    valueList: {
      type: Array,
      default: function() {
        return [
        'all',
        ]
      },
    },
    placeholder: {
      type: String,
      default: '',
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isExpand: false,
    }
  },
  methods: {
    onClickOutside() {
      if (this.isExpand) {
        this.isExpand = false
      }
    },
    onSelect(index) {
      this.isExpand = false
      this.$emit('input', index)
    }
  }
}
</script>

<style lang="less" scoped>
.select {
  height: 7vw;
  position: relative;
  > button.menu-cover {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
    font-weight: bold;
    color: #666666;
    > .pulldown-icon {
      margin-left: 1.5vw;
      width: 3.1vw;
      height: 1.9vw;
    }
  }
  > button.menu-cover.active {
    color: #FE6E69;
    > .pulldown-icon {
      transform: rotate(180deg);
    }
  }
  > .menu {
    position: absolute;
    left: -4.3vw;
    top: 100%;
    width: 25.5vw;
    background: #FDFDFD;
    box-shadow: 0.1vw 0.1vw 1.1vw 0vw rgba(109,128,166,0.29);
    > button {
      width: calc(100% - 2.7vw * 2);
      height: 13.2vw;
      margin-left: 2.7vw;
      margin-right: 2.7vw;
      border-bottom: 1px solid #D9D9D9;
      font-size: 3.2vw;
      font-weight: 500;
      color: #666666;
      &:last-of-type {
        border-bottom: initial;
      }
      &.active {
        width: 100%;
        margin-left: initial;
        margin-right: initial;
        border-bottom: initial;
        font-size: 3.2vw;
        font-weight: bold;
        color: #FDFDFD;
        background: linear-gradient(137deg, #FF615C 0%, #FF9877 100%);
      }
    }
  }
}
</style>