<template>
<Layout-Child>
    <div class='mt-6 w-11/12 mx-auto text-font-white'>
        <div v-if="$route.params.type == 'signature' ">
            <textarea v-model="inputSet.value" name="description" id="description" cols="30" rows="10" class="bg-font-light-black w-full py-4 px-4 mt-3  rounded-md text-sm" :placeholder="inputSet.placeholder"></textarea>
            <div class=" tips py-3 px-2 text-font-red text-xs">{{inputSet.value.length}}/300</div>
        </div>
        <div class="input flex flex-col " v-else>
            <!-- <div class="input-label text-font-dark-blue pl-3">
                标题
            </div> -->
            <div>
                <input :type="inputSet.type" 
                v-model="inputSet.value" 
                :maxlength="inputSet.maxlength" 
                :placeholder="inputSet.placeholder"
                :disabled='inputSet.disabled'
                @keyup="checkInput"
                class=" w-full py-4 px-4 mt-3 bg-font-light-black rounded-md text-sm"> 
            </div>
            <div class=" tips py-3 px-2 text-font-red text-xs">{{inputSet.value.length}}/20</div>
        </div>
    </div>
        <div class="fixed bottom-0 w-full left-0 z-30">
        <app-btn text="确认" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled='btnDisabled'  border='none' @click.native='submitUserInfo'></app-btn>
    </div>
</Layout-Child>
</template>

<script lang="ts">
import Vue from 'vue';
import {UserInfo} from '@/types/Dto'
export default Vue.extend({
    data(){
        return{
            inputSet:{
                type:'text',
                value:'',
                maxlength:50,
                placeholder:'填写内容',
                disabled:false
            },
            userInfo:{} as any,
            btnDisabled:true
        }
    },
    watch: {
        'inputSet.value':function(nv,ov){
            console.log(nv,ov);
            if(nv&& nv.length && nv.length>3){
                this.btnDisabled = false;
            }else{
                this.btnDisabled = true;
            }
        }
    },
    created(){
        if(this.$route.meta){
          this.$route.meta.title = this.$route.params.title
          this.userInfo = this.$util.userMsg.getUserMsg() as UserInfo
          this.inputSet.value = this.userInfo[this.$route.params.type]
          this.inputSet.placeholder = this.$route.params.title
        }
    },
  components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),

        'app-btn':()=>import('@/components/common/Btn.vue')
  },
  methods:{
      async submitUserInfo(){
        let data = {} as any
        const value = this.inputSet.value;
        data[this.$route.params.type] = value;

        const reqEdit = await this.$service.userService.editUserInfo(data)
        if(reqEdit){
            this.$util.userMsg.updateUserMsg(reqEdit)
            this.$toast.success('用户信息更新成功')
            this.$router.go(-1)
        }
     },
     checkInput(e:any){
         if(this.$route.path.indexOf('telephone') != -1 && e.key != 'Backspace'){
            const isNumber = (value:any)=> {
               var patrn = /^\d$/;
               if (patrn.exec(value) == null || value == "") {
                  return false
               } else {
                  return true
               }
            }
            if(!isNumber(e.key) || this.inputSet.value.length > 11){
                this.inputSet.value = this.inputSet.value.slice(0,this.inputSet.value.length-1)
            }
         }
     }
  }
});
</script>
