<template>
  <view :class="className" :style="style" class="cu-form-group">
    <view class="title">
      <text v-if="required" class="lr-required">*</text>
      {{ title }}
    </view>
    <radio
      @change="change"
      :class="[isCheck ? 'checked' : '', color ? color : '', point ? 'radio' : '']"
      :checked="isCheck"
      :value="radioValue"
      :disabled="disabled"
    ></radio>
  </view>
</template>

<script>
export default {
  name: 'l-radio',

  props: {
    title: {},
    disabled: {},
    point: {},
    color: {},
    radioValue: {},
    value: {},
    required: {}
  },

  methods: {
    change(e) {
      if (e.detail.value) {
        this.$emit('input', this.radioValue)
        this.$emit('change', this.radioValue)
      }
    }
  },

  computed: {
    isCheck() {
      return this.value && this.value == this.radioValue
    }
  }
}
</script>
