import { isServer, oneOf } from 'utils/help';
import { placements } from 'utils/style';

const Popper = isServer ? () => {} : require('popper.js');

export default {
  props: {
    // popper 出现的位置
    placement: {
      type: String,
      default: 'bottom',
      validator(value) {
        return oneOf(value, placements);
      },
    },
  },
  data() {
    return {
      visible: false,
      popperJS: null,
    };
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.updatePopper();
      } else {
        this.destroyPopper();
      }
    },
  },
  methods: {
    createPopper() {
      if (isServer) return;

      const reference = this.$refs.reference;
      const popper = this.$refs.popper;
    },
    updatePopper() {
      const { popperJS } = this;

      if (popperJS) {
        // popperJS.update();
      } else {
        this.createPopper();
      }
    },
  },
};

@@ -330,24 +330,376 @@
   %7D,%0A    %7D,%0A
+    // v-model%0A    value: %7B%0A      type: Boolean,%0A      default: false,%0A    %7D,%0A    // %E6%98%AF%E5%90%A6%E6%8F%92%E5%85%A5%E5%88%B0 body %E5%B0%BE%E9%83%A8%0A    appendToBody: %7B%0A      type: Boolean,%0A      default: true,%0A    %7D,%0A    options: %7B%0A      type: Object,%0A      default: () =%3E (%7B%0A        modifiers: %7B%0A          computedStyle: %7B%0A            gpuAcceleration: false,%0A          %7D,%0A        %7D,%0A      %7D),%0A    %7D,%0A
   %7D,%0A  data(
@@ -715,22 +715,22 @@
 eturn %7B%0A
-  
     
+  
 visible:
@@ -730,20 +730,25 @@
 isible: 
-fals
+this.valu
 e,%0A     
@@ -772,26 +772,131 @@
     
-%7D;%0A  %7D,%0A  watch: %7B
+  referenceElm: null,%0A      popperElm: null,%0A    %7D;%0A  %7D,%0A  watch: %7B%0A    value(newVal) %7B%0A      this.visible = newVal;%0A    %7D,
 %0A   
@@ -1007,32 +1007,68 @@
 opper();%0A      %7D
+%0A%0A      this.$emit('input', newVal);
 %0A    %7D,%0A  %7D,%0A  m
@@ -1139,16 +1139,117 @@
   const 
+options = Object.assign(%7B%7D, this.options, %7B%0A        placement: this.placement,%0A      %7D);%0A%0A      this.
 referenc
@@ -1249,16 +1249,19 @@
 eference
+Elm
  = this.
@@ -1287,40 +1287,270 @@
     
-const 
+this.popperElm = this.$refs.popper;%0A%0A      if (!this.referenceElm %7C%7C !this.popperElm) return;%0A%0A      if (this.appendToBody) %7B%0A        document.body.appendChild(this.popperElm);%0A      %7D%0A%0A      this.
 popper
+JS
  = 
+new Popper(
 this.
-$
 ref
-s.popper
+erenceElm, this.popperElm, options)
 ;%0A  

update popper