<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 :style="{'text-align':titleStyle}"><b >{{title}}</b></div>
          <i class="el-icon-close" @click="onCancel" ></i>
          <div class="ls-mask-content">
            <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:'',
          width:"75%",
          height:"500px",
          formData:"",//父组件传递的参数 负责传给子组件
        }
      },
      props:{
        loading: { type: Boolean, default: false },
      },
      watch:{
          isShow(a,b){
              this.editItem = this.loadViewFn(this.editItem)
          },
      },
      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{
      padding-top: 20px;
      background: white;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
    .ls-mask-window b{
      padding-left: 12px;
    }
    .ls-mask-content{
      padding: 20px;
      text-align: center;
    }
    .ls-mask-footer{
      height: 45px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: end;
      padding: 2px;
      position: absolute;
        width: 98%;
        bottom: 10px;
        right: 12px;
    }
  /deep/.el-icon-close{
    position: absolute;
    top: 20px;
    right: 12px;
    font-size: 20px;
    cursor: pointer;
  }
  /deep/.el-loading-mask{
      background: none;
  }
  </style>