<template>
    <div class="wrapper bg-white rounded-md px-4">
        <div class="title text-text-secondary h-7 text-sm relative p-0">
            <span class="leading-7">
                <slot name="title">title</slot>
            </span>
            <span class=" absolute right-0 leading-7">{{getSize}}/<slot name="limit"></slot></span>
        </div>
        <div class="content h-13 my-3">
            <input class=" text-text-primary text-base placeholder-mygray border-0 w-full leading-5" v-model="text" type="text" :placeholder="hint" @blur="isNull">
            <p class="text-xs mt-1 text-red-600" v-show="show">*不可为空</p>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';


export default Vue.extend({
  name: 'team-create',
  props:{
      hint:{
          type:String,
          default:''
      },
  },
  data(){
      return{
          text:'',
          show:false
      }
  },
  methods:{
      isNull():void{
          if(this.text ===''){
              this.show = true
          }else{
              this.show = false
          }
      }
  },
  computed:{
      getSize():number{
          return this.text.length
      },   
  },
  watch:{
      text():void{
          let size = Number(this.$slots.limit![0].text)
          if(this.getSize >= size){
            this.text = this.text.substring(0,size)          
          }    
      }
  }
});
</script>

<style lang="less">
</style>
