<template>
  <div class="ipub-radio"
       @click="handleClick">
    <div :class="['ipub-radio__radio', checkBox?'ipub-radio__checkBox':'', isChecked?'ipub-radio__radio--checked':'', disabled?'ipub-radio__radio--disabled':'']"></div>
    <div :class="['ipub-radio__label', disabled?'ipub-radio__label--disabled':'']">
      <slot><span>{{label}}</span></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IpubRadio',
  // 读取父组件属性
  inject: {
    theme: {
      // 函数式组件取值不一样
      default: () => ({})
    }
  },
  props: {
    value: {
      type: [String, Number, Object, Boolean],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    checked: Boolean,
    disabled: Boolean,
    checkBox: Boolean
  },
  computed: {
    isChecked () {
      if (this.checkBox && this.theme.currentValue) {
        return this.theme.currentValue.includes(this.value)
      }
      if (this.theme.currentValue === this.value) {
        return true
      }
      if (this.checked) {
        return this.checked
      }
      return false
    }
  },
  methods: {
    handleClick () {
      if (this.disabled) {
        return
      }
      if (this.$parent.handleChange) {
        this.$parent.handleChange(this.value)
      } else {
        this.$emit('change', (this.value || this.value === false || this.value === 0) ? this.value : this.isChecked)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-radio {
  display: inline-flex;
  min-height: 20px;
  line-height: 20px;
  cursor: pointer;
  & + & {
    margin-left: 20px;
  }
  &__label {
    vertical-align: baseline;
    display: inline-block;
    line-height: 20px;
    &--disabled {
      color: $default_color;
      cursor: not-allowed;
    }
  }
  &__checkBox,
  &__radio {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid $main_color;
    margin-right: 4px;
    margin-top: 3px;
    position: relative;
    vertical-align: bottom;
    box-sizing: border-box;
    &::after {
      content: '';
      position: absolute;
      left: 7px;
      top: 7px;
      width: 0;
      height: 0;
      background: transparent;
      border-radius: 50%;
      transition: 0.3s all;
    }
    &--checked {
      &::after {
        left: 1px;
        top: 1px;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        background: $link_color;
      }
      &.ipub-radio__radio--disabled {
        &::after {
          background: $disable_color;
        }
      }
    }
    &:hover {
      &::after {
        left: 1px;
        top: 1px;
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        background: $link_color;
        opacity: 0.5;
      }
    }
    &--disabled {
      border-color: $disable_color;
      cursor: not-allowed;
      &:hover {
        &::after {
          background: $disable_color;
          opacity: 0;
        }
      }
      &.ipub-radio__radio--checked {
        &:hover {
          &::after {
            background: $disable_color;
            opacity: 1;
          }
        }
      }
    }
  }
  .ipub-radio__checkBox {
    border-radius: 0;
    &::after {
      border-radius: 0;
    }
  }
}
</style>
