<template>

  <div class="text-mark" @click="show=false" v-if="show">
    <div class="text-area" @click.stop>
      <div style="position: relative;">

        <div style="position: absolute;bottom:0;right:0; font-size:0.24rem; color:#999; z-index:9;" v-if="type=='text' && val != null"><span>{{val.toString().length}} / {{max}}</span></div>

      <textarea v-if="show && type=='text'" v-model="val" class="diy-textarea" v-focus></textarea>
      <input v-if="show && type=='number'" v-model="val" class="diy-textarea" v-focus />
      </div>
      <div style="height: 1px; background-color: #eee; margin-bottom: 0.16rem; margin-left:-0.16rem; margin-right:-0.16rem;"></div>
      <mt-button class="text-area-btn-left" @click.stop="cancel" size="small">取消</mt-button>
      <mt-button class="text-area-btn-right" @click="confirm" size="small" type="primary">确定</mt-button>
      <div class="text-area-btn-clear"></div>
    </div>
  </div>

</template>

<script>
    export default {
      props:{
        max:{
          type: Number,
          default: 50
        },
        type:{
          type:String,
          default: 'text'
        },
        value:{
          default:''
        },
        visible:{
          type:Boolean,
          default: false
        }
      },

        name: "InputText",
      data(){
          return {
            val:'',
            old_val: '',
            show:false
          }
      },
      created(){
        this.val = this.value
        this.old_val = this.value
        this.show = this.visible
      },
      methods:{
        confirm(){
          this.$emit('input', this.val)
          this.show = false
        },
        cancel(){
          this.val = this.old_val
          this.$emit('input', this.old_val)
          this.show = false
        }
      },
      watch:{
        val(val,old){
          window.scrollTo(0, document.documentElement.clientHeight)
          if(this.type == 'text'){
            if(val.length > this.max){
              this.val = this.old
            }
          }
          if(this.type == 'number'){

            if(typeof(this.val*1) != 'number'){
              this.val = old
            }
            if(val > this.max){
              this.val = this.max
            }
          }
        },
        visible(val){
          this.show = val
        },
        show(val){
          this.$emit('update:visible', val)
        }
      },
      directives: {
        focus: {
          // 当绑定元素插入到 DOM 中。
          inserted: function (el) {
            // 聚焦元素
            document.body.appendChild(el.parentNode.parentNode.parentNode)

            el.focus()
            window.scrollTo(0, document.documentElement.clientHeight)
            if (el.setSelectionRange) { // 标准浏览器
              el.setSelectionRange(el.value.length, el.value.length)
            }
          }
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
  .text-area-btn-right{float:right;}
  .text-area-btn-left{float:left;}
  .text-area-btn-clear{
    clear: both;}
  .text-area{position: absolute;bottom:0; left:0; right:0; padding:0.16rem; z-index:999999; background-color: #fff;}
.text-mark{position: fixed;top:0;bottom:0;left:0;right:0; background-color: rgba(0,0,0,0.3);z-index: 999999;}
  .text-mark input{font-size:0.40rem;}
  .text-mark textarea{font-size:0.36rem;}
</style>
