<template>
  <cr-radio-group v-model="radioVal" class="radio-btn">
    <cr-radio
      :name="item.value"
      :class="{ checked: value === item.value }"
      v-for="(item, index) in radioData"
      :key="index"
    >
      <div v-html="item.label"></div>
    </cr-radio>
  </cr-radio-group>
</template>
<script>
const CHANGE_EVENT = "input";
export default {
  name: "CrRadioBtn",
  props: {
    radioData: {
      type: Array,
      default() {
        return [];
      }
    },
    value: null
  },
  watch: {
    value(val) {
      this.radioVal = val;
      this.$emit(CHANGE_EVENT, val);
    },
    radioVal(val) {
      this.$emit(CHANGE_EVENT, val);
    }
  },
  data() {
    return {
      radioVal: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "../style/var.less";
.radio-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 12px;
  @{deep} .cr-radio {
    margin-right: 10px;
    flex: 1;
    background: @white;
    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
    border-radius: @border-radius-sm;
    height: 36px;
    line-height: 36px;
    transition: all 0.1s linear;
    &:last-child {
      margin-right: 0;
    }
    &.checked {
      background-color: @orange-light;
      @{deep} .cr-radio__label {
        font-weight: @font-weight-bold;
      }
    }
    &__icon {
      display: none;
    }
    &__label {
      font-size: @font-size-14;
      color: @black;
      width: 100%;
      text-align: center;
      margin-left: 0;
    }
  }
}
</style>
