<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div
      class="el-dialog__wrapper user-dialog"
      v-show="visible"
      @click.self="handleWrapperClick"
    >
      <div
        role="dialog"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        class="el-dialog"
        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
        ref="dialog"
        :style="style"
      >
        <user-with-content
          :customerId="customerId"
          :visible='visible'
          ref="userContent"
        >
          <button
            type="button"
            class="el-dialog__headerbtn"
            aria-label="Close"
            v-if="showClose"
            @click="handleClose"
            slot="closeBtn"
          >
            <img
              src="@/assets/images/dialog/close_icon.png"
              alt=""
            >
          </button>
          <slot
            name="title"
            slot="title"
          ></slot>
          <slot></slot>
          <slot
            name="footer"
            slot="footer"
          ></slot>
        </user-with-content>
      </div>
    </div>
  </transition>
</template>

<script>
import { Dialog } from 'element-ui';
import UserInfo from '../UserCard/UserInfo';

export default {
  name: 'user-dialog-inner',
  extends: Dialog,
  components: {
    UserInfo,
  },
  props: {
    customerId: Number,
  },
  // mounted() {
  //   let dialogWidth = 0;
  //   console.log(this.$refs.userContent.$el.offsetWidth);
  //   let rightDom = document.querySelector(
  //     '.SigleUserWithContent-inner .right-part'
  //   );
  //   dialogWidth += rightDom.offsetWidth;
  //   dialogWidth += rightDom.offsetLeft;
  //   console.log(dialogWidth);
  //   console.log(this.style);
  //   this.width = dialogWidth + 'px';
  // },
};
</script>

<style lang="scss">
.user-dialog {
  .el-dialog {
    background: transparent;
    box-shadow: none;
  }
}
</style>