<template>
  <div class="radio-group" :class="[block ? 'block-raido' : '', underline ? 'vux-1px-b' : '']">
    <label
      v-for="(item, index) of dataSource"
      :key="index"
      :class="[`radio-${align}`, item.disabled ? 'disabled-radio' : '', underline ? 'underline' : '']"
    >
      <input
        type="radio"
        :disabled="item.disabled"
        :value="item.value"
        v-model="currentVal"
        @change="handleChange(item)"
      />
      {{item.label}}
    </label>
  </div>
</template>

<script>
export default {
    name: 'RadioGroup',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        // 数据格式： [{ label: '', value: '' }]
        dataSource: {
            type: Array,
            default: () => [],
            required: true
        },
        // 是否块级radio，可选
        block: {
            type: Boolean,
            default: false
        },
        // radio 位置 right / left
        align: {
            type: String,
            default: 'left',
            validator (value) {
                return ['right', 'left'].includes(value)
            }
        },
        // 一行显示 并且有分割线  demo 学生荣誉
        underline: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {}
    },
    computed: {
        currentVal: {
            get () {
                return this.value
            },
            set (v) {
                this.$emit('input', v)
            }
        }
    },
    methods: {
        handleChange (item) {
            this.$emit('change', item.value, item) // 导出第一个值为双向绑定的value 第二个为item
        }
    },
    created () {}
}
</script>

<style lang="stylus" scoped>
.radio-group
  display flex
  flex-wrap wrap
  label
    position relative
    // height 40px
    // line-height 40px
    padding 9px
    width auto
    font-size 16px
    display block
    white-space normal
    word-break break-all
    input[type='radio']
      outline 0 !important
      background-color transparent
      -webkit-appearance none
      position absolute
      width 20px
      height 20px
      padding 0
      top 50%
      transform translateY(-50%)
      border 1px solid #999
      border-radius 50%
      transition all 0.35s
      &:before
        content ''
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        width 10px
        height 10px
        border-radius 50%
        background-color transparent
        transition all 0.35s
      &:checked
        border-color #007aff
        &:before
          background #007aff
    &.disabled-radio
      opacity 0.4
      input[type='radio']
        opacity 0.4
    &.radio-left
      padding-left 30px
      input[type='radio']
        left 4px
    &.radio-right
      padding-right 30px
      input[type='radio']
        right 4px
    &.underline
      &.radio-right
        padding-left 15px
        padding-right 48px
        input[type='radio']
          right 15px
      &.radio-left
        padding-right 15px
        padding-left 48px
        input[type='radio']
          left 15px
      &:not(:last-child)
        &:after
          content ' '
          position absolute
          left 15px
          bottom 0
          right 0
          height 1px
          border-bottom 1px solid #C7C7C7
          color #C7C7C7
          -webkit-transform-origin 0 100%
          transform-origin 0 100%
          -webkit-transform scaleY(0.5)
          transform scaleY(0.5)
  &.block-raido
    flex-direction column
</style>
