import UserDialogInner from './UserDialog';

export default {
  name: 'user-dialog',
  components: {
    UserDialogInner,
  },
  props: {
    customerId: Number,

    visible: {
      type: Boolean,
      default: false,
    },

    title: {
      type: String,
      default: '',
    },

    width: String,

    fullscreen: Boolean,

    top: {
      type: String,
      default: '15vh',
    },

    modal: {
      type: Boolean,
      default: true,
    },

    modalAppendToBody: {
      type: Boolean,
      default: true,
    },

    appendToBody: {
      type: Boolean,
      default: false,
    },

    lockScroll: {
      type: Boolean,
      default: true,
    },

    customClass: {
      type: String,
      default: '',
    },

    closeOnClickModal: {
      type: Boolean,
      default: true,
    },

    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },

    showClose: {
      type: Boolean,
      default: true,
    },

    beforeClose: Function,

    center: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      wrapWidth: '50vw',
    };
  },
  mounted() {
    let dialogWidth = 0;
    let rightDom = document.querySelector(
      '.SigleUserWithContent-inner .right-part'
    );
    dialogWidth += rightDom.offsetWidth;
    dialogWidth += rightDom.offsetLeft;
    if (dialogWidth) {
      this.wrapWidth = dialogWidth + 'px';
    }
  },
  watch: {
    visible(newVal) {
      if (newVal && this.wrapWidth === '50vw') {
        this.$nextTick(() => {
          let dialogWidth = 0;
          let rightDom = this.$el.querySelector(
            '.SigleUserWithContent-inner .right-part'
          );
          dialogWidth += rightDom.offsetWidth;
          dialogWidth += rightDom.offsetLeft;
          this.wrapWidth = dialogWidth + 'px';
        });
      }
    },
  },
  methods: {
    updateVisible(val) {
      this.$emit('update:visible', val);
    },
  },

  render(h) {
    const { width, wrapWidth } = this;
    const updateVisible = {
      on: {
        'update:visible': this.updateVisible,
      },
    };
    return width ? (
      <UserDialogInner
        {...updateVisible}
        customerId={this.customerId}
        visible={this.visible}
        title={this.title}
        fullscreen={this.fullscreen}
        top={this.top}
        modal={this.modal}
        modalAppendToBody={this.modalAppendToBody}
        appendToBody={this.appendToBody}
        lockScroll={this.lockScroll}
        customClass={this.customClass}
        closeOnClickModal={this.closeOnClickModal}
        closeOnPressEscape={this.closeOnPressEscape}
        showClose={this.showClose}
        beforeClose={this.beforeClose}
        center={this.center}
        width={this.width}>
        <template slot="title">{this.$slots.title}</template>
        {this.$slots.default}
        <template slot="footer">{this.$slots.footer}</template>
      </UserDialogInner>
    ) : (
      <UserDialogInner
        {...updateVisible}
        customerId={this.customerId}
        visible={this.visible}
        title={this.title}
        fullscreen={this.fullscreen}
        top={this.top}
        modal={this.modal}
        modalAppendToBody={this.modalAppendToBody}
        appendToBody={this.appendToBody}
        lockScroll={this.lockScroll}
        customClass={this.customClass}
        closeOnClickModal={this.closeOnClickModal}
        closeOnPressEscape={this.closeOnPressEscape}
        showClose={this.showClose}
        beforeClose={this.beforeClose}
        center={this.center}
        width={wrapWidth}>
        <template slot="title">{this.$slots.title}</template>
        {this.$slots.default}
        <template slot="footer">{this.$slots.footer}</template>
      </UserDialogInner>
    );
  },
};
