<template>
    <y-cell :custom-class="classStr"
            :title="title"
            :is-require="isRequire"
            :dis-padding-horizontal="disPaddingHorizontal"
            type="bodyMax"
            @click="fnClick">
        <template slot="title" v-if="isSlotTitle && !title">
            <slot name="title"></slot>
        </template>
        <div :class="{y_cellField_pet:groupTopic == 'pet',y_cellField_petBig:groupTopic == 'petBig'}">
            <div class="y_cellField_box">
                <template v-if="isText || (isPassword && passwordShow) || isVaild">
                    <div class="y_cellField_input">
                        <input type="text"
                               v-model="value"
                               :placeholder="mapPlaceHolder"
                               ref="input"
                               :disabled="disabled"
                               :auto-focus="isFocus"
                               :focus="isFocus"
                               placeholder-style="color:#C9CACA;"
                               @change="$emit('change',$event)"
                               @blur="fnBlur"
                               @input="$emit('input',$event)"
                               @focus="fnFocus"/>
                        <span v-if="isPassword" class="y_cellField_forgetPassword y_ceilField_eyeShow"
                              @click.stop="passwordShow = !passwordShow"></span>
                        <y-button :topic="vaildSecond > -1 ? 'gray' : buttonTopic"
                                  block
                                  :disabled="vaildSecond > -1"
                                  :text="vaildText"
                                  :size="buttonSize"
                                  v-if="isVaild"
                                  height="26px"
                                  :radius="buttonRadius"
                                  :plain="buttonPlain"
                                  padding="5px"
                                  :loading="loadingVaild"
                                  loading-text=""
                                  @click="fnVaild"></y-button>
                        <div class="y_cellField_button" v-else-if="isBtn" @click.stop="">
                            <slot name="button"></slot>
                        </div>
                    </div>
                </template>

                <template v-if="isH5Vaild">
                    <div class="y_cellField_input">
                        <input type="tel"
                               v-model="value"
                               :placeholder="mapPlaceHolder"
                               ref="input"
                               :disabled="disabled"
                               :auto-focus="isFocus"
                               :focus="isFocus"
                               placeholder-style="color:#C9CACA;"
                               @change="$emit('change',$event)"
                               @blur="fnBlur"
                               @input="$emit('input',$event)"
                               @focus="$emit('focus',$event)"/>
                        <y-button :topic="vaildSecond > -1 ? 'gray' : buttonTopic"
                                  block
                                  :disabled="vaildSecond > -1"
                                  :text="vaildText"
                                  :size="buttonSize"
                                  :height="buttonHeight"
                                  :radius="buttonRadius"
                                  :plain="buttonPlain"
                                  padding="5px"
                                  :loading="loadingVaild"
                                  loading-text=""
                                  @click="fnVaild"></y-button>
                    </div>
                </template>
                <template v-if="isNumber">
                    <div class="y_cellField_input">
                        <input type="number"
                               v-model="value"
                               :placeholder="mapPlaceHolder"
                               ref="input"
                               :disabled="disabled"
                               :auto-focus="isFocus"
                               :focus="isFocus"
                               placeholder-style="color:#C9CACA;"
                               @change="$emit('change',$event)"
                               @blur="fnBlur"
                               @input="$emit('input',$event)"
                               @focus="$emit('focus',$event)"/>
                    </div>
                </template>
                <template v-if="isTel">
                    <div class="y_cellField_input">
                        <input type="tel"
                               v-model="value"
                               :placeholder="mapPlaceHolder"
                               ref="input"
                               :disabled="disabled"
                               :auto-focus="isFocus"
                               :focus="isFocus"
                               placeholder-style="color:#C9CACA;"
                               @change="$emit('change',$event)"
                               @blur="fnBlur"
                               @input="$emit('input',$event)"
                               @focus="$emit('focus',$event)"/>
                    </div>
                </template>
                <template v-if="isPassword && !passwordShow">
                    <div class="y_cellField_input">
                        <input type="password"
                               v-model="value"
                               :placeholder="mapPlaceHolder"
                               ref="input"
                               :disabled="disabled"
                               :auto-focus="isFocus"
                               :focus="isFocus"
                               placeholder-style="color:#C9CACA;"
                               @change="$emit('change',$event)"
                               @blur="fnBlur"
                               @input="$emit('input',$event)"
                               @focus="$emit('focus',$event)"/>
                        <span class="y_cellField_forgetPassword" @click.stop="passwordShow = !passwordShow"></span>
                    </div>
                </template>
            </div>
        </div>
    </y-cell>
</template>

<script>
    import yCell from "./yCell";
    import yButton from "./yButton";
    import field from "./mixins/field";

    export default {
        name: "yCellField",
        mixins:[field],
        components: {
            yCell,
            yButton
        },
        computed: {
            classStr() {
                return "y_cellField" + (this.customClass ? " " + this.customClass : "");
            },
            groupTopic(){
                return this.cellTopic ? this.cellTopic : "";
            },
            isText() {
                return this.type == "input";
            },
            isNumber() {
                return this.type == "number";
            },
            isTel() {
                return this.type == "tel";
            },
            isPassword() {
                return this.type == "password";
            },
            isSelect() {
                return this.type == "select";
            },
            isSlotTitle(){
                return !!(this.$slots && this.$slots.title);
            },
            isMobile() {
                return this.type == "mobile";
            },
            isVaild() {
                return this.type == "vaild";
            },
            isH5Vaild() {
                return this.type == "h5valid";
            },
            isBtn() {
                return !!(this.$slots && this.$slots.button)
            },
            vaildText(){
                if(this.vaildSecond>-1){
                    return this.vaildSecond + "s";
                }
                else{
                    return this.vaildButtonText;
                }
            }
        },
        data() {
            return {
                isFocus: false,
                mapPlaceHolder: this.placeholder || this.placeHolder,

                cellTopic:false,
                loadingVaild:false,
                passwordShow: false,
                secondCache:{},
                value:this.modelValue,
                vaildSecond:-1,
            }
        },
        inject:["yCellGroup"],
        methods: {
            fnBlur(event) {
                this.isFocus = false;
                this.$emit("blur", event);
            },
            fnClick() {
                this.fnSetFocus();
            },
            fnFocus() {
                if (this.$refs["input"] && this.$refs["input"].scrollIntoView) {
                    this.$refs["input"].scrollIntoView({block: "center", inline: "center"})
                }

                this.$emit("focus");
            },
            //兼容微信小程序
            fnSetFocus() {
                if (this.isText || this.isPassword || this.isVaild) {
                    this.isFocus = true;
                    if (this.$refs["input"] && this.$refs["input"].focus) {
                        this.$refs["input"].focus();
                    }
                }
            },
            fnvaildSuccess(){
                const self = this;
                self.loadingVaild = false;
                self.vaildCount();
            },
            fnvaildFail(){
                this.loadingVaild = false;
            },
            fnVaild(){
                const self = this;
                if(self.loadingVaild)return;
                if(this.vaildSecond >=0)return;
                self.loadingVaild = true;
                self.$emit("vaild",res=>{
                    if(res){
                        self.fnvaildSuccess();
                    }
                    else{
                        self.fnvaildFail();
                    }
                });
                if(self.vaildFn && self.vaildFn.call){
                    let ret = self.vaildFn();
                    if(ret.then){
                        self.loadingVaild = true;
                        ret.then(data=>{
                            self.loadingVaild = false;
                            self.vaildCount();
                        },error=>{
                            self.loadingVaild = false;
                        })
                    }
                    else{
                        self.vaildCount();
                    }
                }
            },
            vaildCount(){
                let ccNow = Math.round(new Date().getTime()/1000);
                if(!this.secondCache[this.vaildMobile]){
                    this.secondCache[this.vaildMobile] = Math.round(new Date().getTime()/1000);
                }
                let ccDis = 60 - (ccNow - this.secondCache[this.vaildMobile]);
                if(ccDis >=-1){
                    this.vaildSecond = ccDis;

                    this.ast = setTimeout(this.vaildCount,1000);
                }
                else{
                    this.secondCache[this.vaildMobile] = "";
                }

            },
        },
        model:{
            prop:"modelValue",
            event:"update:modelValue"
        },
        props: {
            autoFocus:Boolean,
            buttonRadius:"",
            buttonHeight:"",
            buttonPlain:Boolean,
            buttonSize:{
                default:"small"
            },
            buttonTopic:{
                default:"gradient"
            },
            customClass:String,
            disabled:Boolean,
            disPaddingHorizontal:Boolean,
            focus:Boolean,
            help: Boolean,
            isRequire:Boolean,
            //是否圆角
            isRound:Boolean,
            modelValue:"",
            placeholder:{
                type:String
            },
            placeHolder:{
                type:String
            },
            //主题颜色 ，目前只有normal和灰色
            topic:{
                default:"normal",
            },
            //组件类型【input:文本输入|select:选择值|mobile:电话|vaild:验证码|password:密码】
            type: {
                default: "input",
                type: String
            },
            vaildMobile:{
                default:"10000",
                type:String,
            },
            vaildButtonText:{
                default:"获取验证码",
                type:String
            },
            vaildFn:Function,



            required: Boolean,
            title: String,
            formValue: ""

        },
        watch:{
            value(){
                this.$emit("update:modelValue",this.value);
                this.$emit("modelValue",this.value);
            },
            modelValue(){
                this.value = this.modelValue;
            },
            vaildMobile(){
                this.ast && clearTimeout(this.ast);
                this.vaildSecond = -1;
                if(this.secondCache[this.vaildMobile] && this.secondCache[this.vaildMobile]>-1){
                    this.vaildCount()
                }
            },
            isFocus(){
                if(!this.isFocus) {
                    this.$emit("update:focus", this.isFocus);
                }
            },
            focus(){
                this.isFocus = this.focus;
            }
        },
        beforeMount() {
            if(this.yCellGroup){
                this.cellTopic = this.yCellGroup.topic;
            }
        },
        mounted(){
            if(this.autoFocus){
                this.fnSetFocus();
            }
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";

    .y_cellField {
    }

    .y_cellField_pet{
        .y_cellField_input{
            input{
                font-weight: bold;
            }
        }
    }
    .y_cellField_petBig{
        /*.y_cellField_input{
            padding: 8px 15px;
            border-radius: 30px;
            background: $color_bg_default;
        }*/
    }

    .y_cellField_box{
        display: flex;
        min-height:24px;
    }
    .y_cellField_button{
        display: inline-block;
        vertical-align: middle;
    }
    .y_cellField_input {
        display: flex;
        width: 100%;

        input {
            flex: 1;
            border: none;
            background: none;
            color: $font_color_title;
            width: 100%;
            text-align: left;
            height: $cell_line_height;
            line-height: $cell_line_height;
            min-height:$cell_line_height;
            padding: 0;
            margin:0;

            &::-webkit-input-placeholder,&.y_cellMobile_input_holder {
                color: $font_color_contentSecondeary;
            }
        }

        .y_cellField_forgetPassword {
            font-family: yesaway_ui;

            &:before {
                content: "\e64e";
                font-size: $cell_font_size + 2px;
                text-align: right;
                vertical-align: middle;

            }

            &.y_ceilField_eyeShow {
                &:before {
                    content: "\e653";
                    color: $color_topic_secondary;
                }
            }
        }
    }
</style>
