<template>
  <cr-radio-group :value="radioVal" class="radio-btn" :class="{ readonly }" @input="onChange">
    <cr-radio
      :disabled="disabled"
      :name="item.value"
      :class="{
        checked: value === item.value,
        disabled: item.disabled
      }"
      v-for="(item, index) in radioData"
      :key="index"
    >
      <div v-html="item.label"></div>
    </cr-radio>
  </cr-radio-group>
</template>
<script>
/**
 * @description: 针对cr-radio组件的样式调整
 * @param {type}
 * @return:
 */
const CHANGE_EVENT = "input";
export default {
  name: "CrRadioBtn",
  props: {
    radioData: {
      type: Array,
      default() {
        return [];
      }
    },
    readonly: {
      type: Boolean,
      default: false
    },
    value: null,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(val) {
        this.radioVal = val || "";
        // this.$emit(CHANGE_EVENT, val);
      }
    }
  },
  data() {
    return {
      radioVal: ""
    };
  },
  methods: {
    onChange(val) {
      const item = this.radioData.find(item => item.value === val);
      if (item.disabled) return;
      this.radioVal = val;
      this.$emit(CHANGE_EVENT, val);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../style/var.less";
.radio-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 12px;
  &.readonly {
    position: relative;
    z-index: 1;
    &::after {
      display: block;
      content: " ";
      position: absolute;
      z-index: 2;
      background-color: rgba(0, 0, 0, 0);
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  @{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;
      }
    }
    &.disabled {
      opacity: 0.5;
    }
    &__icon {
      display: none;
    }
    &__label {
      font-size: @font-size-14;
      color: @black;
      width: 100%;
      text-align: center;
      margin-left: 0;
    }
  }
}
</style>
