<template>
  <select class="trifle-select">
    <option v-show="placeholder" disabled selected value=''>{{ placeholder }}</option>
    <option
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
    >
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  name: 'Select',
  props: {
    name: {
      type: String,
      required: true,
    },
    options: {
      type: Array,
      default: function() {
        return [{ value: '', label: '' }]
      },
      required: true,
    },
    onChange: {
      type: Function,
      default: function() {},
    },
    placeholder: {
      type: String,
      default: '',
    },
    value: {
      type: String,
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../const/variable.scss';

.trifle-select {
  -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  background: palette(white, base);
  background: url('../../assets/images/arrow.png') right 50% no-repeat,
    -webkit-linear-gradient(top, #fff 0%, #f3fbff 100%);
  background: url('../../assets/images/arrow.png') right 50% no-repeat,
    linear-gradient(to bottom, #fff 0%, #f3fbff 100%);
  background-color: transparent;
  border: 1px solid palette(gray, base);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
  height: 42px;
  line-height: normal;
  padding: 8px 28px 8px 6px;
  position: relative;
  width: 100%;

  &:hover,
  &:focus {
    border-color: palette(blue, base);
  }

  &:disabled {
    background: palette(gray, base);
    border-color: palette(gray, light);
    color: palette(gray, light);
  }

  > option {
    color: palette(red, base);

    &:disabled {
      color: palette(gray, light);
    }
  }
}
</style>
