<template>
    <view class="diy-form-phone dir-top-nowrap" :style="[boxStyle]">
        <view class="_diy-form-label"
              :style="{ color: data.title_color}"
              v-if="data.list_style != 3"
              :class="{required: data.is_required}">
            {{ data.title }}
        </view>
        <view :style="[inputStyle]" style="margin-bottom: 40rpx" class="dir-left-nowrap cross-center">
            <view class="_diy-form-label left box-grow-0"
                  :style="{ color: data.title_color}"
                  v-if="data.list_style == 3"
                  :class="{required: data.is_required}">
                {{ calcTextWidth(data.title) }}
            </view>
            <view class="p-input box-grow-1" :class="{right: data.list_style == 3}">
                <app-input type="digit"
                           v-model="form.mobile"
                           :placeholder="data.place_text"
                           :padding-left="0"
                           :color="data.in_color"
                           background-color="inherit"
                           :placeholder-style="`color:${data.place_color};font-size: 30rpx`"
                ></app-input>
            </view>

        </view>

        <view class="_diy-form-label"
              :style="{ color: data.title_color}"
              v-if="data.list_style != 3"
              :class="{required: data.is_required}">
            验证码
        </view>

        <view :style="[inputStyle]" class="dir-left-nowrap cross-center">
            <view class="_diy-form-label left box-grow-0"
                  :style="{ color: data.title_color}"
                  v-if="data.list_style == 3"
                  :class="{required: data.is_required}">
                验证码
            </view>
            <view class="dir-left-nowrap box-grow-1 cross-center main-between">
                <view class="p-input box-grow-1" :class="{right: data.list_style == 3}">
                    <app-input type="text"
                               v-model="form.check"
                               placeholder="请输入验证码"
                               :padding-left="0"
                               background-color="inherit"
                               :color="data.in_color"
                               :placeholder-style="`color:${data.place_color};font-size: 30rpx`"
                    ></app-input>
                </view>
                <view class="box-grow-0" v-if="is_send" :style="[btnStyle('send')]">已发送{{ second }}S</view>
                <view class="box-grow-0" v-else :disabled="inputDisabled" :style="[btnStyle('nosend')]"
                      @click="handleSend">发送
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'diy-form-phone',
    props: {
        index: [Number, String],
        value: Object,
        formId: [Number, String]
    },
    data() {
        return {
            is_send: false,
            second: 60,
            form: {
                mobile: '',
                id: '',
                check: '',
            },
            inputDisabled: false,
            data: {},
        }
    },
    watch: {
        'form.check': {
            handler(newValue) {
                this.$emit('updateValue', {
                    index: this.index,
                    value: this.form,
                });
            },
            deep: true
        }
    },
    created() {
        this.data = this.value;
    },
    methods: {
        handleSend() {
            const self = this;
            let {mobile} = self.form;

            if (!mobile) {
                uni.showToast({title: '请输入手机号', icon: 'none'});
                return false;
            }
            if(self.inputDisabled){
                return;
            }
            self.inputDisabled = true;
            self.$request({
                url: self.$api.phone.send_captcha,
                data: {
                    mobile,
                    form_id: this.formId,
                    index: this.index,
                },
                method: 'POST',
            }).then(e => {
                let {code, msg} = e;
                self.inputDisabled = false;

                if (code === 0) {
                    self.is_send = true;
                    self.form.id = e.data.validate_code_id;
                    async function time() {
                        function timeout(ms) {
                            return new Promise(resolve => setTimeout(resolve, ms));
                        }

                        self.second = 60;
                        for (let i = self.second; i--; i >= 0) {
                            await timeout(1000);
                            self.second = i;
                            if (i === 0) {
                                self.is_send = false;
                            }
                        }
                    }

                    time();
                    uni.showToast({title: msg});
                } else {
                    this.inputDisabled = false;
                    uni.showToast({title: msg, icon: 'none'});
                }
            });
        },
    },
    computed: {
        calcTextWidth() {
            return text => text ? text.substring(0, 4) : '';
        },
        btnStyle() {
            return (type) => {
                let {
                    nosend_btn_color,
                    send_btn_color,
                    nosend_text_color,
                    send_text_color
                } = this.data;
                let style = {
                    fontSize: '24rpx',
                    borderRadius: '6rpx',
                    marginLeft: '24rpx',
                };
                if (type === 'nosend') {
                    Object.assign(style, {
                        background: nosend_btn_color,
                        color: nosend_text_color,
                        padding: '12rpx 30rpx',
                    })
                }
                if (type === 'send') {
                    Object.assign(style, {
                        background: send_btn_color,
                        color: send_text_color,
                        padding: '12rpx 16rpx',
                    })
                }
                return style;
            };
        },
        boxStyle() {
            let {
                bg_color,
                input_padding,
            } = this.data;
            return {
                backgroundColor: bg_color,
                padding: `20rpx ${input_padding}rpx`,
            }
        },
        inputStyle() {
            let {
                border_color,
                input_radius,
                padding_color,
                list_style,
            } = this.data;
            let style = {
                padding: '0 24rpx',
            }
            if (list_style == 1) {
                Object.assign(style, {
                    borderBottomWidth: '1px',
                    borderBottomStyle: 'solid',
                    borderBottomColor: border_color,
                })
            } else {
                Object.assign(style, {
                    border: `1px solid ${border_color}`,
                    borderRadius: `${input_radius}rpx`,
                    background: padding_color,
                })
            }
            return style;
        },
    },

}
</script>

<style scoped lang="scss">
._diy-form-label {
    padding-left: #{20rpx};
    font-size: #{30rpx};
    white-space: nowrap;
    margin-bottom: #{18rpx};
}

._diy-form-label.required:after {
    content: '*';
    margin-left: 6#{rpx};
    color: #FF4544;
}

.diy-form-phone {
    ._diy-form-label.left {
        padding: 0;
        margin: 0;
        width: 140#{rpx};
    }

    .p-input {
        height: 84#{rpx};
    }
    .p-input.right {
        text-align: right;
    }
}
</style>
