
<template>
  <div class="form-radio mb-4 last:mb-0 flex" :style="options.style">
    <v-label :options="options"></v-label>
    <div class="form-value flex-1">
      <div
        class="form-radio-item mb-2 last:mb-0 flex"
        :class="{ selected: isSelected(item) }"
        @click="handleChange(item)"
        :key="index"
        v-for="(item, index) in options.options"
      >
        <div class="dot"></div>
        <div class="text">{{ item }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Base from '../base';
import vLabel from './label';

export default {
  name: 'v-form-radio',
  extends: Base,
  components: {
    vLabel,
  },
  props: {
    value: String,
  },
  methods: {
    handleChange(value){
      console.log('xxx', value);
      this.$emit('update:value', value);
    },
    isSelected(item){
      return item === this.value;
    }
  }
}
</script>
<style lang="less" scoped>
.form-radio {
  .form-radio-item {
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    border-radius: 0.4rem;
    .dot {
      width: 1.2rem;
      height: 1.2rem;
      margin-right: 0.25rem;
      margin-top: -0.1rem;
      box-sizing: border-box;
      border: 2px solid #fff;
      background: transparent;
      border-radius: 1.2rem;
    }
    &.selected {
      .dot {
        border: 2px solid #fe441f;
        background: #fe441f;
      }
    }
  }
}
</style>
