(function () {
    
        
        const calculator_tmpl = "<div id=\"calc-results\">\n    \n  <form id=\"calculator\">\n    <input type=\"hidden\" name=\"sivu_id\" :value=\"opts.sivu_id\">\n \n    <p>\n      <label for=\"kerrosala\">Kerrosala m&sup2;:</label><br>\n      <input type=\"text\" style=\"width: 100px;\" id=\"kerrosala\" name=\"kerrosala\">\n    </p>\n    \n    <p>Palveluiden käyttö:<br>\n      <input type=\"checkbox\"  name=\"palvelu_vesijohto\" id=\"palvelu_vesijohto\" value=\"1\"> <label for=\"palvelu_vesijohto\">Vesijohto</label><br>\n      <input type=\"checkbox\" name=\"palvelu_viemari\" id=\"palvelu_viemari\" value=\"1\"> <label for=\"palvelu_viemari\">Jätevesiviemäri</label><br>\n      <input type=\"checkbox\" name=\"palvelu_hulevesiviemari\" id=\"palvelu_hulevesiviemari\" value=\"1\"> <label for=\"palvelu_hulevesiviemari\">Hulevesiviemäri</label>\n    </p>\n    \n    <p><label for=\"tarkoitus\">Käyttötarkoitus:</label><br>\n      <select name=\"tarkoitus\" id=\"tarkoitus\">\n\t<option value=\"1\">Omakoti- ja paritalo</option>\n\t<option value=\"2\">Rivitalo</option>\n\t<option value=\"3\">Kerrostalo</option>\n\t<option value=\"4\">Maatila</option>\n\t<option value=\"6\">Pysäköintihalli</option>\n\t<option value=\"5\">Muu kiinteistö</option>\n      </select>\n    </p>\n    \n    <p>Alue:<br>\n      <input type=\"radio\" name=\"alue\" id=\"alue_1\" value=\"1\" checked> <label for=\"alue_1\">Asemakaava-alue</label><br>\n      <input type=\"radio\" name=\"alue\" id=\"alue_2\" value=\"2\"> <label for=\"alue_2\">Haja-asutusalue</label></p>\n    \n    <p><input type=\"button\" name=\"laske\" value=\"Laske\" class=\"button\" @click=\"$emit('recalculate')\"></p>\n  </form>\n  \n  \n  <div id=\"calc-results-loading\" v-if=\"opts.isLoading\">\n    <img src=\"/common_ui/embed_ui/img/loader/indicator.gif\" class=\"absmiddle\" />\n    Lasketaan summaa...\n  </div>\n  \n  <div class=\"error\" v-if=\"opts.isErrors\">\n    <div v-for=\"error in result.errors\" class=\"notification error no_arrow\">{{ error.text }}</div>\n  </div>\n  \n  <template v-for=\"item in result.data\">\n    <div v-if=\"item.summa !== undefined && !opts.isLoading\">\n      <hr>\n      <b>Arvio liittymismaksusta on {{ item.summa | money }} &euro;.</b><br>\n        Lisätietoja <a href=\"mailto:vesihuoltolaitos@tuusula.fi\">vesihuoltolaitos@tuusula.fi</a> tai <span class=\"nowrap\">040 314 3577</span>.\n    </div>\n    \n    <div class=\"infotext\" v-if=\"item.korotusinfo && !opts.isLoading\">\n      <p><small>Haja-asutusalueen liittymismaksut voivat poiketa laskurin esittämästä luvusta, siinä ei ole esim. huomioitu mahdollista korotusta (+50%) liityttäessä tukkuvesiyhtiön runkoputkeen.</small></p>\n    </div>\n    \n    <div class=\"infotext\" v-if=\"item.muukiinteisto_info && !opts.isLoading\">\n      <p><small>Huom. Teollisuuskiinteistöjen vedenkäyttö ja kiinteistön kerrosala > 20 000 m&sup2; vaikuttavat liittymismaksun suuruuteen. Lisätietoja <a href=\"mailto:vesihuoltolaitos@tuusula.fi\">vesihuoltolaitos@tuusula.fi</a> tai 040 314 3577.</small></p>\n    </div>\n  </template>\n    \n</div>\n"; 


    const calculator = Vue.component('calculator', {
        props: ['result', 'opts'],
        template: calculator_tmpl       
    });
  
    window.calculatorApp = new Vue({
        el: '#calc-result-div',
        template: '<calculator v-bind:result="result" v-bind:opts="opts" @recalculate="calculate"></calculator>',

        component: {
            'calculator': calculator
        },

        data: {
            result: {},
            opts: {}
         },

        methods: {
            
            calculate: function () {
                console.log("app caclulate!");
                var queryString = jQuery("form#calculator").serialize();
                const url = this.opts.calcUrl + '?' + queryString;
                this.opts.isLoading = true;
                this.opts.isErrors = false;
    
                $.getJSON(url).done(function (result) {
                    this.opts.isLoading = false;
                    this.opts.isErrors = (result.errors && result.errors.length > 0) ? true : false;
                    this.result = result;
                }.bind(this));
            },
            
            init: function (result, opts) {
                opts.isErrors = false;
                opts.isLoading = false;
                this.opts = opts;
                this.result = result;
            }

        }
    });

})();