<template>
  <transition name="msgbox-fade">
    <div class="ls-mask" v-if="myShow">
      <div class="ls-mask-window" :style="{ 'width': width }">
        <div class="ls-head">
          <div class="ls-title" :style="{ 'text-align': titleStyle }">
            <svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
            <b>{{ title }}</b>
          </div>
          <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
        </div>
        <div class="mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
          <component :is="editItem" ref='childRef' :key="key" :formData='formData' />
        </div>
        <div class="ls-mask-footer" v-if='btnShow'>
          <el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button>
          <el-button @click="onCancel">{{ cancelText }}</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import Popup1 from './index'
export default {
  name: 'index',
  data () {
    return {
      title: '标题',
      editItem: "",
      formData: undefined,//父组件传递的参数 负责传给子组件
      btnShow: false,
      cancel: function () { },
      confirm: function () { },
      cancelText: '取消',
      confirmText: '确认',
      isSync: false,
      isShow: false,
      myShow: false,
      titleStyle: 'center',
      width: "75%",
      height: "auto",
      contentHeight: "",
      iconClass: "",
      key: 0
    }
  },
  watch: {
    isShow (newValue) {
      this.$nextTick(() => {
        this.editItem = this.loadViewFn(this.editItem)
        document.body.appendChild(this.$el);
        this.myShow = newValue
      })
    }
  },
  mounted () {
    //  计算滚动条高度
    setTimeout(() => {
      if (this.btnShow) {
        if (this.height == 'auto') {
          this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
        } else {
          this.contentHeight = this.height
        }
      } else {
        if (this.height == 'auto') {
          this.contentHeight = (this.$refs.contentRef.offsetHeight) + 'px'
        } else {
          this.contentHeight = this.height
        }
      }
    }, 300)
  },
  methods: {
    onCancel () {
      Popup1().close()
    },
    onConfirm () {
      let res = new Promise((resolve, reject) => {
        this.confirm()
        resolve(true)
      })
      if (res) {
        this.isShow = false
      }
    },
    loadViewFn (view) {
      return (r) =>
        require.ensure([], () =>
          r(require(`@/views/${view}.vue`))
        )
    }
  },
  destroyed () {
    if (this.appendToBody && this.$el && this.$el.parentNode) {
      this.$el.parentNode.removeChild(this.$el);
    }
  }
}
</script>
<style scoped lang="scss" >
.ls-mask {
  width: 100%;
  height: 100%;
  z-index: 500;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);

}

.ls-mask-window {
  background: white;
  position: relative;
  left: 50%;
  top: 50%;
  min-height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  overflow: hidden;
}

.ls-mask-window b {
  padding-left: 5px;
}

.ls-title {
  padding: 16px;
  color: #ffffff;
  background: linear-gradient(3deg, #409EFF, #a7cbee);
  font-size: 16px;
}

.ls-title .svg-icon {
  font-size: 18px;
}

.mask-content {
  padding: 20px;
  width: 100%;
  min-height: 30%;
  max-height: 90vh;
  overflow-y: scroll;
}

.ls-mask-footer {
  height: 50px;
  display: flex;
  justify-content: center;
  width: 100%;
  position: absolute;
  border-top: 1px solid $borderColor;
  bottom: 0;
  background: #ffffff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}


/deep/.closeStyle {
  position: absolute;
  top: 13px;
  right: 26px;
  font-size: 24px;
  cursor: pointer;
  color: #409EFF;
}

/deep/.el-loading-mask {
  background: none;
}

/deep/.el-button {
  margin: 8px 10px;
  width: 75px;
}

.dialog-fade-enter-active,
.dialog-fade-leave-active {
  transition: opacity 0.3s;
}

.dialog-fade-enter,
.dialog-fade-leave-to {
  opacity: 0;
}
</style>