<template>
  <div class="">
    <div class="check">
      <input :id="'chk'+label" ref="chk" :data-accno="accno" :disabled="disabled" :checked="checked" type="checkbox">
      <label class="chk-label" :for="'chk'+label" @click="getChk">
        <i class="chk iconfont" :style="style"></i>
        <span v-if="title">
         {{title?title:'我已阅读并同意'}}
        </span>
      </label>
      <a v-if="url&&proto" @click="showProto">《{{proto}}》</a>
    </div>
    <div class="mask abs" v-if="protoThisVisible">
      <span class="fr closeX" @click="protoThisVisible = !protoThisVisible">&times;</span>
      <div class="proto" ref="proto"></div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import config from '../../lib/config'
  import base from '../../lib/base'
  export default {
    name: 'check',
    data () {
      return {
        protoThisVisible:this.protoVisible,
        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:['url','proto','title','size','color','checked','label','accno','disabled','protoVisible'],
    watch:{
      protoThisVisible:function () {
        console.log(this.protoVisible)
        if(this.url&&this.protoThisVisible){
          console.log(this.url);
          if(this.url == "****"){

          }else {
            $.ajax({
              methods:"get",
              'url': config.baseUrl+'/static/protocal/'+this.url,
              success: data=>{
                console.log(data)
                this.$refs.proto.innerHTML = data
              }
            })
          }
        }
      }
    },
    methods: {
      showProto(){
        if(this.url == "****"){
          base.msg.alert("暂无存款产品协议");
          return;
        }else{
          this.protoThisVisible = true
          this.$emit('showProto')
        }

      },
      getChk(){
        //条款勾选框
        if (this.proto||this.url){
          this.$emit('chk',!this.$refs.chk.checked)
          return
        }
        //复选框列表
        var accno = this.$refs.chk.dataset.accno
        this.$emit('chk',{
          accno:accno,
          checked:!this.$refs.chk.checked
        })
      }
    }
  }
</script>
<style scoped>
  @import "../../css/base.css";
  .chk-label .chk{
    /*width:.6rem;*/
    /*height: .6rem;*/
    margin-left: .26rem;
  }
  .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;
    width: .36rem;
    height: .36rem;
    line-height: .36rem;
  }
  .check input:checked+label .chk{
    background: #5c71e6;
    border: none;
  }
  .check input:checked+label .chk:before{
    content: '\e633';
  }
  .check a{
    /*text-decoration: underline;*/
    color:#5c71e6;
  }
  .mask{
    top: 0;
    background: white;
    z-index:1000;
    overflow-y: auto;
  }
  .closeX{
    padding:0 .3rem;
    font-size: .44rem;
  }
  .proto{
    height: 100%;
    padding:.5rem .36rem;
    box-sizing: border-box;
  }
</style>
