import "./Questionnaire.css";
/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import Modal from '../Modal';
import Rate from '../Rate';
import Button from '../Button';
import Nps from './Nps';
import GdInput from '../Input';
import confim from '../confim';
import { createComponentName, componentMixin } from '../_utils/component';
import ViewModel from './vm';
const Textarea = GdInput.Textarea;
const __vue_script__ = {
  name: createComponentName('questionnaire'),
  components: {
    Modal,
    Nps,
    Rate,
    Button,
    Textarea,
    GdInput
  },
  mixins: [componentMixin],
  props: {
    onCancel: {
      type: Function
    },
    afterClose: {
      type: Function
    },
    // 居中
    centered: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    onOk: {
      type: Function
    }
  },

  data() {
    return {
      vm: new ViewModel(),
      loading: false,
      error: false
    };
  },

  methods: {
    getInfo(postion) {
      return this.vm.getInfo(postion, '123489');
    },

    onError(e) {
      const promise = confim.error({
        title: '提交失败',
        subTitle: e.message,
        okText: '重新提交',
        onOk: async () => {
          promise.vm.update({
            okText: '提交中...'
          });
          const res = await this.vm.submit(e).then(() => {
            this.onSuccess();
            return true;
          }).catch(e => {
            promise.vm.update({
              subTitle: e.message
            });
            return false;
          });
          promise.vm.update({
            okText: '重新提交'
          });
          return res;
        }
      });
      return promise;
    },

    onSuccess() {
      return confim.success({
        title: '提交成功',
        subTitle: '感谢你的评价',
        time: 1000
      });
    },

    async onSubmit(e) {
      e.preventDefault();

      if (this.vm.feedback.length > 500 || this.vm.contact.length > 30) {
        this.error = true;
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.error = false;
        }, 2000);
        return;
      }

      this.loading = true;
      await this.vm.submit().then(async () => {
        this.loading = false;
        this.visible = false;
        await this.onSuccess();
        this.onOk();
      }).catch(async e => {
        this.visible = false;
        this.loading = false;
        await this.onError(e);
        this.onCancel();
      });
    }

  }
};
/* template */

var __vue_render__ = function () {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("Modal", {
    class: _vm.bem("modal"),
    attrs: {
      visible: _vm.visible,
      onCancel: _vm.onCancel,
      afterClose: _vm.afterClose,
      maskClosable: false,
      keyborad: false,
      width: "872px"
    }
  }, [_c("form", {
    class: _vm.bem(),
    on: {
      submit: _vm.onSubmit
    }
  }, [_c("img", {
    attrs: {
      src: require("./assets/slidebar.png"),
      alt: "slidebar"
    }
  }), _vm._v(" "), _c("div", {
    class: _vm.bem("content")
  }, [_c("div", {
    class: _vm.bem("label")
  }, [_c("span", {
    class: _vm.bem("tag")
  }, [_c("div", [_vm._v("必填")])]), _vm._v("\n                请评价本次编辑体验：\n            ")]), _vm._v(" "), _c("Rate", {
    class: _vm.bem("rate"),
    model: {
      value: _vm.vm.rate,
      callback: function ($$v) {
        _vm.$set(_vm.vm, "rate", $$v);
      },
      expression: "vm.rate"
    }
  }), _vm._v(" "), _c("div", {
    class: _vm.bem("label")
  }, [_c("span", {
    class: _vm.bem("tag")
  }, [_c("div", [_vm._v("必填")])]), _vm._v("\n                你愿意把“稿定设计”推荐给你的朋友吗？\n            ")]), _vm._v(" "), _c("nps", {
    class: _vm.bem("nps"),
    model: {
      value: _vm.vm.nps,
      callback: function ($$v) {
        _vm.$set(_vm.vm, "nps", $$v);
      },
      expression: "vm.nps"
    }
  }), _vm._v(" "), _c("div", {
    class: _vm.bem("feedback")
  }, [_c("Textarea", {
    attrs: {
      placeholder: "你给出这个分数的原因？说说你的建议"
    },
    model: {
      value: _vm.vm.feedback,
      callback: function ($$v) {
        _vm.$set(_vm.vm, "feedback", $$v);
      },
      expression: "vm.feedback"
    }
  }), _vm._v(" "), _c("transition", {
    attrs: {
      name: "gd-fade"
    }
  }, [_vm.error && _vm.vm.feedback.length > 500 ? _c("div", {
    class: _vm.bem("error")
  }, [_vm._v("输入字数已超出限制  " + _vm._s(_vm.vm.feedback.length) + "/500")]) : _vm._e()])], 1), _vm._v(" "), _c("div", {
    class: _vm.bem("contact")
  }, [_c("GdInput", {
    attrs: {
      placeholder: "你的联系方式？"
    },
    model: {
      value: _vm.vm.contact,
      callback: function ($$v) {
        _vm.$set(_vm.vm, "contact", $$v);
      },
      expression: "vm.contact"
    }
  }), _vm._v(" "), _c("transition", {
    attrs: {
      slot: "append",
      name: "gd-fade"
    },
    slot: "append"
  }, [_vm.error && _vm.vm.contact.length > 30 ? _c("div", {
    class: _vm.bem("error")
  }, [_vm._v("输入字数已超出限制  " + _vm._s(_vm.vm.contact.length) + "/30")]) : _vm._e()])], 1), _vm._v(" "), _c("div", {
    class: _vm.bem("footer")
  }, [_c("Button", {
    attrs: {
      type: "primary",
      disabled: !_vm.vm.canSubmit,
      loading: _vm.loading
    }
  }, [_vm._v(_vm._s(_vm.loading ? "提交评价中..." : "提交评价"))])], 1)], 1)])]);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);