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

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

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

  computed: {
    isCheck() {
      return this.value && this.value == this.radioValue
    }
  },

  methods: {
    change(e) {
      this.$emit('input', this.radioValue)
      this.$emit('change', this.radioValue)
    }
  }
}
</script>
