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

        COMPANY: null,
        isCompanyError: false,
        companyErrorMessage: null,
        
        FURIGANA: null,
        isFuriganaError: false,
        furiganaErrorMessage: null,
        
        CHARGE: null,
        isChargeError: false,
        chargeErrorMessage: null,
        
        CHARGEKANA: null,
        isChargeKanaError: false,
        chargeKanaErrorMessage: null,
        
        ZIP01: null,
        ZIP02: null,
        isZipError: false,
        zipErrorMessage: null,
        
        PREF: '',
        isPrefError: false,
        prefErrorMessage: null,
        prefOption: {"1":"\u5317\u6d77\u9053","2":"\u9752\u68ee\u770c","3":"\u5ca9\u624b\u770c","4":"\u5bae\u57ce\u770c","5":"\u79cb\u7530\u770c","6":"\u5c71\u5f62\u770c","7":"\u798f\u5cf6\u770c","8":"\u8328\u57ce\u770c","9":"\u6803\u6728\u770c","10":"\u7fa4\u99ac\u770c","11":"\u57fc\u7389\u770c","12":"\u5343\u8449\u770c","13":"\u6771\u4eac\u90fd","14":"\u795e\u5948\u5ddd\u770c","15":"\u65b0\u6f5f\u770c","16":"\u5bcc\u5c71\u770c","17":"\u77f3\u5ddd\u770c","18":"\u798f\u4e95\u770c","19":"\u5c71\u68a8\u770c","20":"\u9577\u91ce\u770c","21":"\u5c90\u961c\u770c","22":"\u9759\u5ca1\u770c","23":"\u611b\u77e5\u770c","24":"\u4e09\u91cd\u770c","25":"\u6ecb\u8cc0\u770c","26":"\u4eac\u90fd\u5e9c","27":"\u5927\u962a\u5e9c","28":"\u5175\u5eab\u770c","29":"\u5948\u826f\u770c","30":"\u548c\u6b4c\u5c71\u770c","31":"\u9ce5\u53d6\u770c","32":"\u5cf6\u6839\u770c","33":"\u5ca1\u5c71\u770c","34":"\u5e83\u5cf6\u770c","35":"\u5c71\u53e3\u770c","36":"\u5fb3\u5cf6\u770c","37":"\u9999\u5ddd\u770c","38":"\u611b\u5a9b\u770c","39":"\u9ad8\u77e5\u770c","40":"\u798f\u5ca1\u770c","41":"\u4f50\u8cc0\u770c","42":"\u9577\u5d0e\u770c","43":"\u718a\u672c\u770c","44":"\u5927\u5206\u770c","45":"\u5bae\u5d0e\u770c","46":"\u9e7f\u5150\u5cf6\u770c","47":"\u6c96\u7e04\u770c"},
        
        CITIES: null,
        isCitiesError: false,
        citiesErrorMessage: null,
        
        ADDNUMBER: null,
        isAddNumberError: false,
        addNumberErrorMessage: null,
        
        BUILDING: null,
        isBuildingError: false,
        buildingErrorMessage: null,
        
        TEL01: null,
        TEL02: null,
        TEL03: null,
        isTelError: false,
        telErrorMessage: null,
        
        FAX01: null,
        FAX02: null,
        FAX03: null,
        isFaxError: false,
        faxErrorMessage: null,
        
        EMAIL1: null,
        isEmail1Error: false,
        email1ErrorMessage: null,
        
        ACTION: [],
        isActionError: false,
        actionErrorMessage: null,
        
        SERVICE: [],
        isServiceError: false,
        serviceErrorMessage: null,
        
        COMMENT: null,
        isCommentError: false,
        commentErrorMessage: null,

        errorMessagePrefix: '※ ',
        errorMessageSuffix: '。',
        isError: false,
        errorOffsetTop: null,
        debounceDelay: 500
    },
    watch: {
        COMPANY: function (newValue, oldValue) {
            this.debouncedCheckCompany()
        },
        FURIGANA: function (newValue, oldValue) {
            this.debouncedCheckFurigana()
        },
        CHARGE: function (newValue, oldValue) {
            this.debouncedCheckCharge()
        },
        CHARGEKANA: function (newValue, oldValue) {
            this.debouncedCheckChargeKana()
        },
        ZIP01: function (newValue, oldValue) {
            this.debouncedCheckZip()
            this.autoZipInput()
        },
        ZIP02: function (newValue, oldValue) {
            this.debouncedCheckZip()
            this.autoZipInput()
        },
        PREF: function (newValue, oldValue) {
            this.checkPref()
        },
        CITIES: function (newValue, oldValue) {
            this.debouncedCheckCities()
        },
        ADDNUMBER: function (newValue, oldValue) {
            this.debouncedCheckAddNumber()
        },
        BUILDING: function (newValue, oldValue) {
            this.debouncedCheckBuilding()
        },
        TEL01: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        TEL02: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        TEL03: function (newValue, oldValue) {
            this.debouncedCheckTel()
        },
        FAX01: function (newValue, oldValue) {
            this.debouncedCheckFax()
        },
        FAX02: function (newValue, oldValue) {
            this.debouncedCheckFax()
        },
        FAX03: function (newValue, oldValue) {
            this.debouncedCheckFax()
        },
        EMAIL1: function (newValue, oldValue) {
            this.debouncedCheckEmail1()
        },
        ACTION: function (newValue, oldValue) {
            this.checkAction()
        },
        SERVICE: function (newValue, oldValue) {
            this.checkService()
        },
        COMMENT: function (newValue, oldValue) {
            this.debouncedCheckComment()
        }
    },
    created: function () {
        this.debouncedCheckCompany = _.debounce(this.checkCompany, this.debounceDelay)
        this.debouncedCheckFurigana = _.debounce(this.checkFurigana, this.debounceDelay)
        this.debouncedCheckCharge = _.debounce(this.checkCharge, this.debounceDelay)
        this.debouncedCheckChargeKana = _.debounce(this.checkChargeKana, this.debounceDelay)
        this.debouncedCheckZip = _.debounce(this.checkZip, this.debounceDelay)
        this.debouncedCheckCities = _.debounce(this.checkCities, this.debounceDelay)
        this.debouncedCheckAddNumber = _.debounce(this.checkAddNumber, this.debounceDelay)
        //this.debouncedCheckBuilding = _.debounce(this.checkBuilding, this.debounceDelay)
        this.debouncedCheckTel = _.debounce(this.checkTel, this.debounceDelay)
        this.debouncedCheckFax = _.debounce(this.checkFax, this.debounceDelay)
        this.debouncedCheckEmail1 = _.debounce(this.checkEmail1, this.debounceDelay)
        this.debouncedCheckComment = _.debounce(this.checkComment, this.debounceDelay)
    },
    methods:{
        checkForm: function (e) {
            this.setError(false)
            this.errorOffsetTop = null
            
            this.checkCompany(e)
            this.checkFurigana(e)
            this.checkCharge(e)
            this.checkChargeKana(e)
            this.checkZip(e)
            this.checkPref(e)
            this.checkCities(e)
            this.checkAddNumber(e)
            //this.checkBuilding(e)
            this.checkTel(e)
            this.checkFax(e)
            this.checkEmail1(e)
            this.checkAction(e)
            this.checkService(e)
            this.checkComment(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
        },
        checkFurigana: function (e) {
            if (!this.FURIGANA) {
                this.isFuriganaError = true
                this.furiganaErrorMessage = this.getErrorMessage('フリガナを必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#FURIGANA'))
                return
            } else if (!this.isZenKatakana(this.FURIGANA)) {
                this.isFuriganaError = true
                this.furiganaErrorMessage = this.getErrorMessage('入力は全角フリガナで行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#FURIGANA'))
                return
            }
            this.isFuriganaError = false
            this.furiganaErrorMessage = 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
        },
        checkChargeKana: function (e) {
            if (!this.CHARGEKANA) {
                this.isChargeKanaError = true
                this.chargeKanaErrorMessage = this.getErrorMessage('フリガナを必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#CHARGEKANA'))
                return
            } else if (!this.isZenKatakana(this.CHARGEKANA)) {
                this.isChargeKanaError = true
                this.chargeKanaErrorMessage = this.getErrorMessage('入力は全角フリガナで行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#CHARGEKANA'))
                return
            }
            this.isChargeKanaError = false
            this.chargeKanaErrorMessage = null
        },
        checkZip: function (e) {
            if (!this.ZIP01 || !this.ZIP02) {
                this.isZipError = true
                this.zipErrorMessage = this.getErrorMessage('郵便番号を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#ZIP01'))
                return
            } else if (!this.isHankakuNum(this.ZIP01) || !this.isHankakuNum(this.ZIP02)) {
                this.isZipError = true
                this.zipErrorMessage = this.getErrorMessage('入力は半角数字で行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#ZIP01'))
                return
            }
            this.isZipError = false
            this.zipErrorMessage = null
        },
        checkPref: function (e) {
            if (!this.PREF) {
                this.isPrefError = true
                this.prefErrorMessage = this.getErrorMessage('都道府県を必ず選択してください');
                this.setError(true)
                this.setErrorOffsetTop($('#PREF'))
                return
            }
            this.isPrefError = false
            this.prefErrorMessage = 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
        },
        checkAddNumber: function (e) {
            if (!this.ADDNUMBER) {
                this.isAddNumberError = true
                this.addNumberErrorMessage = this.getErrorMessage('丁目番地を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#ADDNUMBER'))
                return
            }
            this.isAddNumberError = false
            this.addNumberErrorMessage = null
        },
        checkBuilding: function (e) {
            if (!this.BUILDING) {
                this.isBuildingError = true
                this.buildingErrorMessage = this.getErrorMessage('建物名を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($('#BUILDING'))
                return
            }
            this.isBuildingError = false
            this.buildingErrorMessage = 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)
                return
            }
            this.isTelError = false
            this.telErrorMessage = null
        },
        checkFax: function (e) {
            if (this.FAX01 && !this.isHankakuNum(this.FAX01) || 
                this.FAX02 && !this.isHankakuNum(this.FAX02) || 
                this.FAX03 && !this.isHankakuNum(this.FAX03)) {
                this.isFaxError = true
                this.faxErrorMessage = this.getErrorMessage('入力は半角数字で行ってください');
                this.setError(true)
                this.setErrorOffsetTop($('#FAX01'))
                return
            }
            this.isFaxError = false
            this.faxErrorMessage = 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
        },
        checkAction: function (e) {
            if (this.ACTION.length === 0) {
                this.isActionError = true
                this.ActionErrorMessage = this.getErrorMessage('必ず1つ以上を選択してください');
                this.setError(true)
                this.setErrorOffsetTop($("[name='ACTION[]']"))
                return
            }
            this.isActionError = false
            this.ActionErrorMessage = null
        },
        checkService: function (e) {
            if (this.SERVICE.length === 0) {
                this.isServiceError = true
                this.serviceErrorMessage = this.getErrorMessage('必ず1つ以上を選択してください');
                this.setError(true)
                this.setErrorOffsetTop($("[name='SERVICE[]']"))
                return
            }
            this.isServiceError = false
            this.serviceErrorMessage = null
        },
        checkComment: function (e) {
            if (!this.isServiceOtherChecked() && !this.COMMENT) {
                this.isCommentError = true
                this.commentErrorMessage = this.getErrorMessage('その他を必ず入力してください');
                this.setError(true)
                this.setErrorOffsetTop($("[name='COMMENT']"))
                return
            }
            this.isCommentError = false
            this.commentErrorMessage = null
        },
        setError: function (isError) {
            this.isError = isError
        },
        getErrorMessage: function (errorMessage) {
            return this.errorMessagePrefix + errorMessage + this.errorMessageSuffix
        },
        isZenKatakana: function (str) {
            str = (str == null) ? "" : str
            return str.match(/^[ァ-ヶー　]+$/)
        },
        isHankakuNum: function (str) {
            str = (str == null) ? "" : 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);
        },
        isServiceOtherChecked: function () {
            return this.SERVICE.indexOf('その他') === -1;
        },
        autoZipInput: function () {
            var _this = this
            new YubinBango.Core(this.ZIP01+this.ZIP02, function(addr) {
                _this.PREF  = addr.region_id // 都道府県ID
                _this.CITIES = addr.locality + ' ' + addr.street  // 市区町村 町域
            })
        },
        setErrorOffsetTop: function (obj) {
            if (this.errorOffsetTop === null) {
                this.errorOffsetTop = obj.offset().top;
            }
        }
    },
    mounted: function () {
        this.isLoad = true
    },
    computed: {
        isOtherChecked: {
            get: function () {
                return this.isServiceOtherChecked();
            },
            set: function () {
                return true;
            }
        }
    }
});