<template>
  <!-- v-model="modelValue" -->

      <label class="select form_elemen">
          <slot></slot>
      <select  class="select__select"  :value="modelValue" @change="changeOption"   :disabled="disableInput">
          <option disabled value="">Выберите из списка</option>
          <option
                  v-for="option in options"
                  :key="option.value"
                  :value="option.value"
          >
              {{ option.name }}
          </option>
      </select>
      </label>


</template>

<script>
import {mapState} from 'vuex';
export default {
  name: 'my-select',
  props: {
      exception:{
        type:Boolean,
          default:false
      },
    modelValue: {
      type: [String,Number]
    },

    options: {
      type: Array,
      default: () => []
    }
  },
    computed: {
        ...mapState({
            state_disableInput: state=>state.disableInput,
        }),

        disableInput(){
            if(this.state_disableInput && !this.exception){
                return true;
            }
            return false;
        },


    },

  methods: {
    changeOption(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

<style scoped>
.select{
    width: 100%;
}
.form_elemen{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space:nowrap;
    gap:5px;
}

.select__select{
    min-height: 33px;
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: #444;
    line-height: 1.3;
    padding: .5em 1.5em .4em .8em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 0 1px rgba(196, 190, 190, 0.04);
    border-radius: 8px;
   -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url( "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdUlEQVR4nO3NwQnCAAxG4c9xPAgWoah4sUIpoiJ0MldwIqdQqUsUIR4UtS096ruEJP9L+PPgiJV2ZJF/YoEbtg1yHrnlu+UcFXYf5AJXzL59mOCC/ct8HfJUCxKcUUa/CTnVgXEcOUS9950Z4oSRHgz6yH6EGoCbERduBT22AAAAAElFTkSuQmCC" );
    background-repeat: no-repeat, repeat;
    background-position: right .5em top 50%, 0 0;
    background-size: .65em auto, 100%;

}

.select__select::-ms-expand { display: none; }
.select__select:hover { border-color: #888; }
.select__select:focus { border-color: #aaa;
    box-shadow: 0 0 1px 2px rgba(59, 153, 252, .7);
    /*box-shadow: 0 0 0 3px -moz-mac-focusring;*/
    color: #222;
    outline: none;
}
.select__select option { font-weight:normal; }
*[dir="rtl"] .select__select, :root:lang(ar) .select__select, :root:lang(iw) .select__select {
    background-position: left .7em top 50%, 0 0;
    padding: .8em .8em .5em 1.4em;
}






</style>
