<template>
  <div
    v-if="type === 'icon'"
    :class="['bx-radio-warp']"
    >
    <span
      @click="handleClick('radio')"
      class="bx-radio-icon-warp"
      >
      <bxs-icon
        :color=" isDisabled ? '#ccc' : '' "
        v-if="isCellParent"
        :name="cellIcon"
        />
      <bxs-icon
        v-else
        :color=" isDisabled ? '#ccc' : '' "
        :name="icon"
        />
    </span>
    <span
      class="bx-radio-text"
      :class="[{'bx-radio-content--disable': (isDisabled || isLabelDisabled) }, labelPosition]"
      @click="handleClick('label')"
      >
      <slot />
    </span>
  </div>
  <div
    v-else-if="type === 'button'"
    :class="['bx-radio-warp']"
    >
    <bxs-button
      plain
      :class="[ {'bx-radio-content--disable': isDisabled }]"
      size="small"
      :type="btnType"
      :disabled="isDisabled"
      @click="handleClick('radio')"
      >
      <slot />
    </bxs-button>
  </div>
</template>
<script>
import { create } from '../utils'
import Icon from '../icon/index'
import Button from '../button/index'

export default create({
  name: 'radio',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
  },
  props: {
    name: null,
    value: null,
    type: {
      type: String,
      default: 'icon',
      validator: str => ['icon', 'button'].indexOf(str) !== -1,
    },
    selectColor: {
      type: String,
      default: 'primary',
    },
    disabled: Boolean,
    labelDisabled: Boolean, // 即将废弃
    labelPosition: String,
  },
  data() {
    return {
      parent: null,
      isCellParent: false,
    }
  },
  computed: {
    currentValue: {
      get() {
        return this.parent ? this.parent.value : this.value
      },

      set(val) {
        this.parent.$emit('input', val)
      },
    },

    isDisabled() {
      return this.parent ? this.parent.disabled || this.disabled : this.disabled
    },

    isLabelDisabled() {
      return this.parent
        ? this.parent.disabled || this.disabled || this.labelDisabled
        : this.disabled
    },
    icon() {
      return this.name === this.currentValue
        ? `circle-dot bx-radio-color-${this.bColor}`
        : 'circle'
    },
    cellIcon() {
      return this.name === this.currentValue ? 'check' : ''
    },
    bColor() {
      return this.parent
        ? this.parent.selectColor || this.selectColor
        : this.selectColor
    },
    btnType() {
      return this.name === this.currentValue ? this.bColor : 'assist'
    },
  },
  created() {
    this.parent = this.findParent('bxs-radio-group')
    this.isCellParent = this.findParent('bxs-cell')
  },
  methods: {
    handleClick(label) {
      if (this.isDisabled || (label === 'label' && this.isLabelDisabled)) {
        return
      }
      this.currentValue = this.name
    },
    findParent(name) {
      let parent = this.$parent
      while (parent) {
        if (parent.$options.name === name) {
          break
        }
        parent = parent.$parent
      }
      return parent
    },
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
