<template>
  <div class="row no-wrap overflow-hidden button-panel">
    <div
      v-for="(item, i) in options"
      :key="item.value"
      :class="{ selected: item.value === selectedValue }"
      :style="i === options.length - 1 ? {} : { borderRight: 0 }"
      class="radio-cell q-px-sm"
    >
      <!-- style="border-right: 0;" -->
      <q-radio
        v-model="selectedValue"
        :disable="disabled"
        :label="item.label"
        :val="item.value"
        dense
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.button-panel {
  min-height: 40px;

  .radio-cell {
    --q-color-primary: #1491cf;
    border: 1px solid rgba(1, 72, 116, 0.18);
    overflow: hidden;

    display: inline-grid;
    align-items: center;
    justify-items: center;

    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;

    color: rgba(2, 12, 18, 0.9);

    min-width: 5.2em;

    &.selected {
      background: #e9f1f8;
    }
  }
}
</style>

<script lang="ts">
import { Component, ModelSync, Prop, Vue } from 'vue-property-decorator';
import { Option } from '@/recruits/models';

@Component({})
export default class RadioSelect extends Vue {
  @Prop({ default: false })
  readonly disabled: boolean;

  @Prop()
  readonly options: Array<Option>;

  @ModelSync('selected', 'change', { type: String })
  readonly selectedValue: string;
}
</script>
