$apiurl = utils.getquerystring('apiurl') || $formconfigapiurl;
$rooturl = "/";
$token = localstorage.getitem(access_token_name);

var $api = axios.create({
  baseurl: $apiurl,
  headers: {
    authorization: "bearer " + $token,
  },
});

var $url = '/form';

var data = utils.init({
  siteid: utils.getqueryint('siteid') || $formconfigsiteid,
  formid: utils.getqueryint('formid') || $formconfigformid,
  pagetype: '',
  styles: [],
  title: '',
  description: '',
  iscaptcha: false,
  captcha: '',
  captchavalue: '',
  captchaurl: null,
  uploadurl: null,
  files: [],
  form: null,
});

var methods = {
  getuploadurl: function(style) {
    return this.uploadurl + '&fieldid=' + style.id;
  },

  imageuploaded: function(error, file) {
    if (!error) {
      var res = json.parse(file.serverid);
      var style = _.find(this.styles, function(o) { return o.id === res.fieldid; });
      style.value = res.value;
    }
  },

  imageremoved: function(style) {
    style.value = [];
  },

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

    utils.loading(this, true);
    $api.post('/v1/captcha').then(function (response) {
      var res = response.data;

      $this.captchavalue = res.value;
      $this.captchaurl = $apiurl + '/v1/captcha/' + res.value;
    }).catch(function (error) {
      utils.error(error);
    }).then(function () {
      utils.loading($this, false);
    });
  },

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

    $api.post('/v1/captcha/actions/check', {
      captcha: this.form.captcha,
      value: this.captchavalue
    }).then(function (res) {
      $this.apisubmit();
    })
    .catch(function (error) {
      utils.error(error);
    });
  },

  getform: function(styles, value) {
    var form =  _.assign({}, value);
    for (var i = 0; i < styles.length; i++) {
      var style = styles[i];
      var name = utils.tocamelcase(style.attributename);
      if (style.inputtype === 'texteditor') {
        settimeout(function () {
          var editor = utils.geteditor(style.attributename);
          editor.attributename = style.attributename;
          editor.ready(function () {
            this.addlistener("contentchange", function () {
              $this.form[this.attributename] = this.getcontent();
            });
          });
        }, 100);
      } else if (style.inputtype === 'checkbox' || style.inputtype === 'selectmultiple') {
        if (!form[name] || !array.isarray(form[name])) {
          form[name] = [];
        }
      }
    }
    return form;
  },

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

    utils.loading(this, true);
    $api.post($url + '/' + this.siteid + '/' + this.formid + '/actions/getform').then(function (response) {
      var res = response.data;

      $this.title = res.title;
      $this.description = res.description;
      $this.iscaptcha = res.iscaptcha;
      if ($this.iscaptcha) {
        $this.apicaptchaload();
      }
      $this.styles = res.styles;
      $this.form = $this.getform(res.styles, _.assign({
        captcha: ''
      }, res.datainfo));
      $this.pagetype = 'form';
    }).catch(function (error) {
      utils.error(error);
    }).then(function () {
      utils.loading($this, false);
    });
  },

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

    utils.loading(true);
    $api.post($url + '/' + this.siteid + '/' + this.formid, _.assign({}, this.form)).then(function (response) {
      var res = response.data;

      $this.pagetype = 'success';
      
    }).catch(function (error) {
      utils.error(error);
    }).then(function () {
      utils.loading($this, false);
    });
  },

  getvalue: function (attributename) {
    for (var i = 0; i < this.styles.length; i++) {
      var style = this.styles[i];
      if (style.attributename === attributename) {
        return style.value;
      }
    }
    return '';
  },

  setvalue: function (attributename, value) {
    for (var i = 0; i < this.styles.length; i++) {
      var style = this.styles[i];
      if (style.attributename === attributename) {
        style.value = value;
      }
    }
  },

  btnimageclick: function (imageurl) {
    top.utils.openimageslayer([imageurl]);
  },

  btnsubmitclick: function () {
    var $this = this;
    this.$refs.form.validate(function(valid) {
      if (valid) {
        if ($this.iscaptcha) {
          $this.apicaptchacheck();
        } else {
          $this.apisubmit();
        }
      }
    });
  },

  btnlayerclick: function(options) {
    var query = {
      siteid: this.siteid,
      attributename: options.attributename
    };
    if (options.no) {
      query.no = options.no;
    }

    var args = {
      title: options.title,
      url: utils.getcommonurl(options.name, query)
    };
    if (!options.full) {
      args.width = options.width ? options.width : 700;
      args.height = options.height ? options.height : 500;
    }
    utils.openlayer(args);
  },
};

var $vue = new vue({
  el: "#main",
  data: data,
  methods: methods,
  created: function () {
    this.apiget();
  }
});