<template>
  <div class="propBox">
    <transition name="zgh-prop">
      <div class="pdT30   pdL15 pdR15 prop  bgf" ref="prop" v-show="visible"
           :style="styles">
          <slot>
            <div class="color3 pdL15 pdR15 fs16" style="word-wrap: break-word">{{message}}</div>
            <div class="textC m-fs34 mgT10 ">
              <button class=" center-block w100 pd15 middle common-color textR" @click="handleSure">
                <span class="middle">确定</span>
              </button>
            </div>
          </slot>
          <div v-if="isClose" class="close" @click="_close"></div>
      </div>
    </transition>
    <div class="mask" :class="{active:visible}" @click="maskHandle"></div>
  </div>

</template>

<script>
  export default {
    name: 'ZghAlert',
    data() {
      return {
        isClose:false,
        message: '',
        isMaskClick: false,
        visible: false,
        styles: {},
        onHide: function () {
        },
        onShow: function () {
        }
      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      _show() {
        this.visible = true;
      },
      _close() {
        this.visible = false;
      },
      maskHandle() {
        if (!this.isMaskClick) return;
        this._close()
      },
      handleSure() {
        this._close();
        this.onShow();
      },
      hide() {
        // this._close();
        this.onHide();
      }
    },
    beforeDestory(){
      this.onHide();
    }
  }
</script>

<style lang="less">
  @import url("../../assets/config.less");

  @common_color: 'red';
  .prop {
    position: absolute;
    top: 50%;
    left: 50%;
    max-height: 90%;
    height: auto;
    width: 90%;
    max-width: 80%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0 19px 60px rgba(0,0,0,.298039), 0 15px 20px rgba(0,0,0,.219608);
    overflow-x: hidden;

    .close {
      position: absolute;
      top: 0;
      right: 0px;
      width: 40px;
      height: 40px;
      background: url('../../assets/images/close.png') no-repeat center;
      background-size: .6rem;
      opacity: .3;
    }

  }
</style>
