<!-- webview only -->
<template>
  <div
      @click="changeCheck"
      :class="['bili-radio-default', checked_show ? 'bili-radio-checked': '', disabled ? 'bili-radio-disabled' : ''] "
      :style="[propsStyle.default, checked_show && {'background-color': color}, checked_show && propsStyle.selected, disabled && propsStyle.disabled]"
  >
    <i :class="[checked_show ? icon ? icon : 'icon-select' : '']"></i>
  </div>
</template>
<script>
import shortId from 'shortid';

export default {
  name: 'BRadio',
  inject: ['radio'],
  props: {
    checked: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: 'default',
    },
    value: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: ''
    },
    propsStyle: {
      type: Object,
      default: {
        default: {},
        selected: {},
        disabled: {}
      }
    }
  },
  data() {
    return {
      id: '',
      checked_show: false
    };
  },
  watch: {
    "radio.selected": function (value){
      if (value && value.id === this.id) {
        this.checked_show = true;
      } else {
        this.checked_show = false;
      }
    },
    // 动态变更
    checked(value) {
      this.checked_show = value;
      if (this.radio) {
        if (value) {
          this.radio.selected = Object.assign({}, {id: this.id, value: this.value});
        } else {
          this.radio.selected = Object.assign({}, {id: null, value: ''});
        }
      }
    }
  },
  mounted() {
    this.checked_show = this.checked;
    this.id = shortId.generate();
    if (this.radic) {
      if (this.checked) {
        this.radio.selected = {id: this.id, value: this.value};
      }
    }
  },
  methods: {
    changeCheck() {
      if (this.disabled) {
        return;
      }
      if (this.checked_show) {
        return;
      }

      this.checked_show = !this.checked_show;
      if (this.radio) {
        this.radio.selected = {id: this.id, value: this.value};
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bili-radio-default {
  line-height: 22px;
  margin-right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #ffffff;
  display: inline-block;
  border: 1px solid #cccccc;
  text-align: center;
  vertical-align: middle;
}

.bili-radio-checked {
  color: #ffffff;
  background-color: #fb7299;
  border-color: transparent;
}

.bili-radio-disabled {
  background-color: #dddddd;
}

</style>
