import FortuneWheel from 'vue-fortune-wheel'
import 'vue-fortune-wheel/lib/vue-fortune-wheel.css'

export default {
  components: {
    FortuneWheel
  },
  data () {
    return {
      prizeId: 0,
      canvasVerify: false,
      canvasOptions: {
        borderColor: '#000000',
        borderWidth: 6,
        lineHeight: 50,
        textRadius: 220,
        radius: 300,
        btnBgColor: '#178704',
        btnTextColor: '#ffffff',
        btnText: 'GO',
        btnWidth: 80,
        btnFontSize: 32,
        btnBorderColor: '#000000',
        btnImageSrc: ''
      },
      prizes: [
        {
          id: 1,
          name: 'Blue',
          value: 'Blue\'s value',
          bgColor: '#75bcff',
          color: '#ffffff',
          probability: 25,
          weight: 5
        },
        {
          id: 2,
          name: 'Red',
          value: 'Red\'s value',
          bgColor: '#F10025',
          color: '#ffffff',
          probability: 25,
          weight: 5
        },
        {
          id: 3,
          name: 'Green',
          value: 'Green\'s value',
          bgColor: '#4CB300',
          color: '#ffffff',
          probability: 25,
          weight: 5
        },
        {
          id: 4,
          name: 'Yellow',
          value: 'Yellow\'s value',
          bgColor: '#F7F70A',
          color: '#000000',
          probability: 25,
          weight: 5
        }
      ],
    }
  },
  computed: {
    wheel() :any {
      return this.$refs.wheel
    },
    image() :any {
      return this.$refs.image
    }
  },
  methods: {
    spin(){
      this.wheel.spin()
    },
    spinImage(){
      this.image.spin()
    },
    btnClicked(){
      console.log('button clicked')
      //spin canvas
      this.spin()
    },
    onRotateEnd (prize: PrizeConfig) {
      console.log(prize.value)
    },
  }
};