<template>
  <transition name="fade" mode="out-in" v-if="isShow">
    <div class="ls-mask" v-loading="loading">
      <div class="ls-mask-window" :style="{'width':width,'height':height}">
        <div class="ls-head">
          <div class="ls-title" :style="{'text-align':titleStyle}"><b>{{title}}</b></div>
          <i class="el-icon-close" @click="onCancel"></i>
        </div>
       
        <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight + 'px'}">
          <component :is="editItem" ref='childRef' @loading='loadingFn' :formData='formData' />
        </div>
        <div class="ls-mask-footer">
          <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button>
          <el-button @click="onCancel">{{cancelText}}</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'index',
  data () {
    return {
      title: '提示',
      cancelText: '取消',
      confirmText: '确认',
      isSync: false,
      isShow: false,
      cancel: function () { },
      confirm: function () { },
      editItem: "",
      titleStyle: 'center',
      width: "75%",
      height: "auto",
      formData: "",//父组件传递的参数 负责传给子组件
      contentHeight:"",
    }
  },
  
  props: {
    loading: { type: Boolean, default: false },
  },
  watch: {
    isShow (a, b) {
      this.editItem = this.loadViewFn(this.editItem)
    },
  },
  mounted(){
  //  计算滚动条高度
   setTimeout(() => {
    this.contentHeight = this.$refs.contentRef.offsetHeight
   }, 1000);
  },
  methods: {
    onCancel () {
      this.isShow = false
      this.cancel()
    },
    onConfirm () {
      this.loading = true
      let isOk = this.$refs.childRef.childFn()  //子组件方法 必须命名一致
      if (isOk || isOk == undefined) { //如果子组件没有 return false 就代表子组件方法一切正常
        this.isShow = false
        this.confirm()
      } else { //否则
        console.log('弹窗不关闭')
      }
    },
    loadingFn (e) { //加载状态
      this.loading = e
    },
    loadViewFn (view) {
      return (r) =>
        require.ensure([], () =>
          r(require(`@/views/${view}.vue`))
        );
    },
  }
}
</script>
<style scoped>
#app {
  overflow: hidden;
}

.ls-mask {
  width: 100%;
  height: 100%;
  z-index: 2001;
  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%);
}
.ls-head{
  position: relative;
}
.ls-mask-window b {
  padding-left: 12px;
}
.ls-title{
  padding: 20px;
  background: #1E9FFF;
  color: #ffffff;
}
.ls-mask-content {
  padding: 20px;
  text-align: center;
  position: absolute;
  width: 100%;
  overflow: scroll;
}

.ls-mask-footer {
  height: 65px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  bottom: 0px;
  right: 0px;
  background: #202B3D;
}

/deep/.el-icon-close {
  position: absolute;
  top: 20px;
  right: 12px;
  font-size: 20px;
  cursor: pointer;
  color: #ffffff;
}

/deep/.el-loading-mask {
  background: none;
}
/deep/.el-button{
  margin: 15px 10px;
}
</style>