var $getparameter = function (name) {
  var result = location.search.match(
    new regexp('[?&]' + name + '=([^&]+)', 'i')
  );
  if (!result || result.length < 1) {
    return window.$config ? $config[name] : '';
  }
  return decodeuricomponent(result[1]);
};

var $api = axios.create({
  withcredentials: true
});

veevalidate.validator.localize('zh_cn');
vue.use(veevalidate);
veevalidate.validator.localize({
  zh_cn: {
    messages: {
      required: function (name) {
        return name + '不能为空';
      }
    }
  }
});
veevalidate.validator.extend('mobile', {
  getmessage: function () {
    return ' 请输入正确的手机号码';
  },
  validate: function (value, args) {
    return (
      value.length == 11 &&
      /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/.test(value)
    );
  }
});

if (window.datepicker) {
  vue.component("date-picker", window.datepicker.default);
}

(function() {
  var $vue = new vue({
    el: "#form_submit",
    data: {
      apiurl: $getparameter('apiurl'),
      siteid: $getparameter('siteid'),
      formid: $getparameter('formid'),
      pagetype: 'loading',
      fieldinfolist: [],
      title: '',
      description: '',
      iscaptcha: false,
      captcha: '',
      captchaurl: null,
      captchainvalid: false,
      errormessage: '',
      uploadurl: null,
      files: []
    },
    components: {
      filepond: vuefilepond.default(filepondpluginfilevalidatetype, filepondpluginimagepreview)
    },
    methods: {
      getuploadurl: function(fieldinfo) {
        return this.uploadurl + '&fieldid=' + fieldinfo.id;
      },
    
      imageuploaded: function(error, file) {
        if (!error) {
          var res = json.parse(file.serverid);
          var fieldinfo = _.find(this.fieldinfolist, function(o) { return o.id === res.fieldid; });
          fieldinfo.value = res.value;
        }
      },
    
      imageremoved: function(fieldinfo) {
        fieldinfo.value = [];
      },

      loadcaptcha: function () {
        this.captchaurl = this.apiurl + '/v1/captcha/form-captcha' + '?r=' + new date().gettime();
      },

      submit: function () {
        var $this = this;

        var payload = {};
        for (var i = 0; i < this.fieldinfolist.length; i++) {
          var fieldinfo = this.fieldinfolist[i];
          payload[fieldinfo.title] = fieldinfo.value;
        }

        $this.pagetype = 'loading';
        $api.post(this.apiurl + '/ss.form/' + this.siteid + '/' + this.formid, payload)
          .then(function (res) {
            $this.pagetype = 'success';
          })
          .catch(function (error) {
            $this.pagetype = 'error';
            $this.errormessage = error.response.data.message;
          });
      },

      checkcaptcha: function () {
        var $this = this;

        $api.post(this.apiurl + '/v1/captcha/form-captcha/actions/check', {
            captcha: $this.captcha
          }).then(function (res) {
            $this.submit();
          })
          .catch(function (error) {
            $this.pagetype = 'form';
            $this.captchainvalid = true;
          });
      },

      btnsubmitclick: function () {
        var $this = this;

        $this.captchainvalid = false;
        this.$validator.validate().then(function (result) {
          if (result) {
            if ($this.iscaptcha) {
              $this.checkcaptcha();
            } else {
              $this.submit();
            }
          }
        });
      }
    },
    created: function () {
      var $this = this;

      $api.post(this.apiurl + '/ss.form/' + this.siteid + '/' + this.formid + '/actions/get')
        .then(function (res) {
          $this.fieldinfolist = res.data.value;
          for (var i = 0; i < $this.fieldinfolist.length; i++) {
            var fieldinfo = $this.fieldinfolist[i];
            if (fieldinfo.fieldtype === 'checkbox' || fieldinfo.fieldtype === 'selectmultiple') {
              fieldinfo.value = [];
            }
          }
          $this.title = res.data.title;
          $this.description = res.data.description;
          $this.iscaptcha = res.data.iscaptcha;
          $this.uploadurl = $this.apiurl + '/ss.form/' + $this.siteid + '/' + $this.formid + '/actions/upload?uploadtoken=' + res.data.uploadtoken;
          $this.loadcaptcha();
          $this.pagetype = 'form';
        })
        .catch(function (error) {
          $this.pagetype = 'error';
          $this.errormessage = error.response.data.message;
        });

      filepond.setoptions({
        server: {
          process: {
            withcredentials: true
          }
        }
      });
    }
  });
})();