var app = new Vue({
    el: '#app',
    data: {
        isLoad: false,
        ticket: '',

        COMPANY: null,
        isCompanyError: false,
        companyErrorMessage: null,
        
        CITIES: null,
        isCitiesError: false,
        citiesErrorMessage: null,
        
        CHARGE: null,
        isChargeError: false,
        chargeErrorMessage: null,

        POSITION: null,
        isPositionError: false,
        positionErrorMessage: null,
        
        TEL01: null,
        TEL02: null,
        TEL03: null,
        isTelError: false,
        telErrorMessage: null,
        
        EMAIL1: null,
        isEmail1Error: false,
        email1ErrorMessage: null,
        
        NUM: '0',
        isNumError: false,
        numErrorMessage: null,

        errorMessagePrefix: '※ ',
        errorMessageSuffix: '。',
        isError: false,
        errorOffsetTop: null,
        debounceDelay: 500
    },
    watch: {
        COMPANY: function (newValue, oldValue) {
            this.debouncedCheckCompany()
        },
        CHARGE: function (newValue, oldValue) {
            this.debouncedCheckCharge()
        },
        CITIES: function (newValue, oldValue) {
            this.debouncedCheckCities()
        },
        TEL01: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        TEL02: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        TEL03: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        EMAIL1: function (newValue, oldValue) {
            this.debouncedCheckEmail1()
        },
        NUM: function (newValue, oldValue) {
            this.debouncedCheckNum()
        }
    },
    created: function () {
        this.debouncedCheckCompany = _.debounce(this.checkCompany, this.debounceDelay)
        this.debouncedCheckCharge = _.debounce(this.checkCharge, this.debounceDelay)
        this.debouncedCheckCities = _.debounce(this.checkCities, this.debounceDelay)
        this.debouncedCheckTel = _.debounce(this.checkTel, this.debounceDelay)
        this.debouncedCheckEmail1 = _.debounce(this.checkEmail1, this.debounceDelay)
        this.debouncedCheckNum = _.debounce(this.checkNum, this.debounceDelay)
    },
    methods:{
        checkForm: function (e) {
            this.setError(false)
            this.errorOffsetTop = null
            
            this.checkCompany(e)
            this.checkCharge(e)
            this.checkCities(e)
            this.checkTel(e)
            this.checkEmail1(e)
            this.checkNum(e)

            if (this.isError) {
                e.preventDefault()

                if (this.errorOffsetTop !== null) {
                    $("html, body").animate({scrollTop:this.errorOffsetTop - 50}, 500, "swing");
                }
            } else {
                return
            }
        },
        checkCompany: function (e) {
            if (!this.COMPANY) {
                this.isCompanyError = true
                this.companyErrorMessage = this.getErrorMessage('会社名を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#COMPANY'))
                return
            }
            this.isCompanyError = false
            this.companyErrorMessage = null
        },
        checkCharge: function (e) {
            if (!this.CHARGE) {
                this.isChargeError = true
                this.chargeErrorMessage = this.getErrorMessage('担当者名を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#CHARGE'))
                return
            }
            this.isChargeError = false
            this.chargeErrorMessage = null
        },
        checkCities: function (e) {
            if (!this.CITIES) {
                this.isCitiesError = true
                this.citiesErrorMessage = this.getErrorMessage('市区町村を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#CITIES'))
                return
            }
            this.isCitiesError = false
            this.citiesErrorMessage = null
        },
        checkTel: function (e) {
            if (!this.TEL01 || !this.TEL02 || !this.TEL02) {
                this.isTelError = true
                this.telErrorMessage = this.getErrorMessage('電話番号を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#TEL01'))
                return
            } else if (!this.isHankakuNum(this.TEL01) || !this.isHankakuNum(this.TEL02) || !this.isHankakuNum(this.TEL03)) {
                this.isTelError = true
                this.telErrorMessage = this.getErrorMessage('入力は半角数字で行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#TEL01'))
                return
            }
            this.isTelError = false
            this.telErrorMessage = null
        },
        checkEmail1: function (e) {
            if (!this.EMAIL1) {
                this.isEmail1Error = true
                this.email1ErrorMessage = this.getErrorMessage('e-mailを必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#EMAIL1'))
                return
            } else if (!this.validEmail(this.EMAIL1)) {
                this.isEmail1Error = true
                this.email1ErrorMessage = this.getErrorMessage('入力はメールアドレス形式で行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#EMAIL1'))
                return
            }
            this.isEmail1Error = false
            this.email1ErrorMessage = null
        },
        checkNum: function (e) {
            if (!this.NUM) {
                this.isNumError = true
                this.numErrorMessage = this.getErrorMessage('会場参加希望人数を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#NUM'))
                return
            } else if (!this.isHankakuNum(this.NUM)) {
                this.isNumError = true
                this.numErrorMessage = this.getErrorMessage('入力は半角数字で行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#NUM'))
                return
            //} else if (parseInt(this.NUM) <= 0) {
            //    this.isNumError = true
            //   this.numErrorMessage = this.getErrorMessage('入力は1以上の数字で行ってください');
            //    this.setError(true)
            //    this.setErrorOffsetTop($('#NUM'))
            //    return
            }
            this.isNumError = false
            this.numErrorMessage = null
        },
        setError: function (isError) {
            this.isError = isError
        },
        getErrorMessage: function (errorMessage) {
            return this.errorMessagePrefix + errorMessage + this.errorMessageSuffix
        },
        isHankakuNum: function (str) {
            str = (str == null) ? "" : String(str)
            return str.match(/^[0-9]+$/)
        },
        validEmail: function (email) {
            var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        },
        setErrorOffsetTop: function (obj) {
            if (this.errorOffsetTop === null) {
                this.errorOffsetTop = obj.offset().top;
            }
        }
    },
    mounted: function () {
        this.isLoad = true
    }
});