<template>
  <div class="y-check-box" @click="handleClick">
    <div
      :class="{
        'check-cirle': true,
        'checked': checked
      }"
      :style="{
        width: width + 'rpx',
        height: height + 'rpx'
      }"
    >
    </div>
    <div class="y-checkbox-text" :style="{'font-size': fontSize + 'rpx'}" v-if="text">{{text}}</div>
  </div>
</template>

<script>
export default {
  name: 'checkItem',
  props: {
    checked: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 50
    },
    height: {
      type: Number,
      default: 50
    },
    fontSize: {
      type: Number,
      default: 32
    }
  },
  methods: {
    handleClick () {
      this.$emit('on-click')
    }
  }
}
</script>

<style lang="scss">
@import './check-item.scss'
</style>