import {isArray} from 'lodash';

export default {
  install(Vue) {
    let promptVM = null;
    let promptEle = null;
    let timer = null;

    function createPromptVM(parent) {
      let tpl = Vue.extend({
        store: parent.$store,
        data: function() {
          return {
            type: '',
            img: '',
            title: '',
            desc: '',
            onClick: null,
            classNames: []
          };
        },
        render: function(h) {
          let classNames = ['yoho-grass-prompt-wrap', ...this.classNames];

          return h('div', {class: ['yoho-grass-prompt', `yoho-grass-prompt-${this.type}`]}, [
            h(this.url ? 'a' : 'div', {
              class: classNames,
              attrs: {
                href: this.url || '',
              },
              on: {
                click: () => {
                  this.onClick && this.onClick();
                }
              }
            }, [
              h('ImageFormat', {
                class: ['prompt-thumb'],
                props: {
                  src: this.img,
                  lazy: false,
                  mode: 1,
                  width: 100,
                  height: 100
                }
              }),
              h('div', { class: ['prompt-info'] }, [
                h('p', {
                  class: ['prompt-info-title'],
                  domProps: {
                    innerHTML: this.title
                  }
                }),
                h('p', {
                  class: ['prompt-info-desc'],
                  domProps: {
                    innerHTML: this.desc
                  }
                })
              ]),
              h('span', { class: ['iconfont', 'icon-right', 'prompt-icon'] })
            ])
          ]);
        }
      });

      promptVM = new tpl();
      promptEle = promptVM.$mount().$el;
      document.body.appendChild(promptEle);
    }

    Vue.prototype.$grassPrompt = function(data = {}, time) {
      let {img, title, desc, url, type, className, onClick} = data;

      if (!promptVM) {
        createPromptVM(this);
      }

      promptVM.img = img || '';
      promptVM.title = title || '';
      promptVM.desc = desc || '';
      promptVM.url = url;
      promptVM.type = type || 'bottom';

      if (className && !isArray(className)) {
        className = [className];
      }

      promptVM.classNames = className || [];

      if (typeof onClick === 'function') {
        promptVM.onClick = onClick;
      }

      let res = {
        show() {
          timer && clearTimeout(timer);
          timer = setTimeout(function() {
            promptVM.classNames.push('yoho-grass-prompt-enter-active');

            timer = setTimeout(function() {
              promptVM.classNames.push('yoho-grass-prompt-leave-active');
            }, time || 8000);
          }, 100);
        },
        hide() {
          timer && clearTimeout(timer);
          promptVM.classNames = [];
        }
      }

      res.show();

      return res;
    }
  }
}