<template lang="html">
  <form id="{{id}}" data-cpt-type="cpt-input-button" class="pure-form {{size}}">
          <input type="text" v-model="value" placeholder="{{placeholder}}">

          <button type="button" class="pure-button pure-button-primary" @click="submit">
            <slot>确定</slot>
          </button>
  </form>
</template>

<style lang="sass">
   @import "../../styles/core/base.scss";

   .pure-form.l{
     text-align:center;

     > input{
       width:400px;
     }
   }
   .pure-form.m{
     > input{
       width:200px;
       font-size:14px;
     }

     > button{
       font-size:15px;
     }
   }

</style>

<script>

export default {
  props:{
    id:String,
    size:{
      type:String,
      validator:(v)=>{
        return ['l','m','s'].indexOf(v) !== -1
      },
      default:'l',
    },
    value:String,
    onSubmit:{
      type:Function,
      default:_=>_,
    },
    placeholder:String,
  },
  data: function () {
    return {
    }
  },
  computed: {},
  ready: function () {},
  attached: function () {},
  methods: {
    submit(e){
      this.onSubmit(e);
    }
  },
  components: {}
}
</script>
