<template>
  <div class="check">
    <input :id="'chk'+accno" ref="chk" :data-accno="accno" :name="'chk'+label" :disabled="disabled" :checked="checked" type="radio">
    <label class="chk-label" :for="'chk'+accno" @click="getChk">
      <i class="chk iconfont" :style="style"></i>
    </label>
    <slot name="data">

    </slot>
  </div>
</template>
<script>
  export default {
    name: 'check',
    data () {
      return {
        style:{
          background:this.checked?'#999':'',
          width:this.size?this.size/100+'rem':'.36rem',
          height:this.size?this.size/100+'rem':'.36rem',
          lineHeight:this.size?this.size/100+'rem':'.36rem',
          borderColor:this.color?this.color:'#e7e7e7',
          fontSize:this.size?+this.size/140+'rem':'.24rem'
        }
      }
    },
    props:['title','size','color','checked','label','accno','disabled','option'],
    methods: {
      getChk(){
        var accno = this.$refs.chk.dataset.accno
        this.$emit('chk',{
          optionLetter:this.option,
          option:accno,
          index:this.label,
          title:this.title
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../css/base.css";
  .chk-label{
    width:.6rem;
    height: .6rem;
  }
  .check label,.check{
    display: flex;
    align-items: center;
    position: relative;
  }
  .check label .chk{
    display: inline-block;
    text-align: center;
    border-radius:50%;
    background: #f0f0f0;
    border: 1px solid #e7e7e7;
    margin-right: .1rem;
    color: white;
  }
  .check input:checked+label .chk{
    background: #5351ff;
    border: none;
  }
  .check input:checked+label .chk:before{
    content: '\e633';
  }
  .check a{
    text-decoration: underline;
    color:#5351ff;
  }
</style>




<!--<template>-->
  <!--<div class="check">-->
    <!--<input :id="id" :name="type?type:'radio'" type="radio">-->
    <!--<label :for="id" @click="getId">-->
       <!--<div class="label-text">-->
         <!--<slot></slot>-->
       <!--</div>-->
    <!--</label>-->
  <!--</div>-->
<!--</template>-->
<!--<script>-->
  <!--export default {-->
    <!--name: 'radio',-->
    <!--data () {-->
      <!--return {-->

      <!--}-->
    <!--},-->
    <!--props:['id','type','scale','index'],-->
    <!--methods: {-->
      <!--getId(){-->
        <!--// this.$emit('id',this.id)-->
        <!--if (this.type){-->
          <!--this.$emit('type',{-->
            <!--option:this.id,-->
            <!--title:this.type,-->
            <!--index:this.index-->
          <!--})-->
        <!--}-->
      <!--}-->
    <!--}-->
  <!--}-->
<!--</script>-->
<!--<style scoped>-->
  <!--.check{-->
    <!--margin-top: 12px;-->
    <!--margin-left: 12px;-->
    <!--/*height: 19px;*/-->
  <!--}-->
  <!--.label-text{-->
    <!--word-break: break-all;-->
    <!--display: inline-block;-->
    <!--margin-left: 30px;-->
    <!--height: 100%;-->
  <!--}-->
  <!--.check label{-->
    <!--height: 100%;-->
  <!--}-->
  <!--.check label,.check{-->
    <!--display: flex;-->
    <!--align-items: center;-->
    <!--position: relative;-->
  <!--}-->
  <!--.check label:before{-->
    <!--position: absolute;-->
    <!--left: 5px;-->
    <!--top: 0;-->
    <!--content: '';-->
    <!--width: 16px;-->
    <!--height: 16px;-->
    <!--border: 2px solid #888888;-->
    <!--margin-right: 8px;-->
    <!--border-radius: 50%;-->
  <!--}-->
  <!--.check label:after{-->
    <!--position: absolute;-->
    <!--left: 10px;-->
    <!--top: 5px;-->
    <!--content: '';-->
    <!--width: 10px;-->
    <!--height: 10px;-->
    <!--border-radius: 50%;-->
  <!--}-->
  <!--.check input:checked+label:after{-->
    <!--background: #888888;-->
  <!--}-->
  <!--.check a{-->
    <!--text-decoration: underline;-->
    <!--color: #888888;-->
  <!--}-->
<!--</style>-->
