<template>
  <div>
      <h2>选中值: {{currentValue}}</h2>
      <radio-group
        v-model="currentValue"
        title="列表功能选择"
        :titleStyle="{color: 'red'}"
        :options="options"
        :bgColor="bgColor"
        :borderColor="borderColor"
        :allDisabled="allDisabled"
        @change="onChange"
      ></radio-group>
      <div @click="allDisabled = !allDisabled">change it</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { RadioGroup } from '../../tunas'

export default Vue.extend({
  components: {
    RadioGroup
  },
  data () {
    return {
      options: [
        { value: 1, title: '东方红', borderColor: 'blue', bgColor: 'red' },
        { value: 2, title: '东方红2', textColor: 'red' },
        { value: 3, title: '东方红3' }
      ],
      // allDisabled: true,
      allDisabled: false,
      currentValue: 3,
      bgColor: '#333',
      borderColor: '#F00',
    }
  },

  methods: {
    onChange (v) {
      console.log('radio changed, new value:', v)
    }
  }
})
</script>
