<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  pdR15 fs18 " style="word-wrap: break-word"> {{message}}</div>
            <div class="mgT20" v-if="isInput">
              <input class="text-input m-fs30 fs14 w100" v-model="content" type="text" placeholder="请输入内容">
            </div>
            <div class="textC m-fs30 mgT10 clearfix">
              <button class=" center-block  pd15 middle l common-color" @click="hide">
                <span class="middle">取消</span>
              </button>
              <button class=" center-block pd15 middle common-color r" @click="handleSure">
                <span class="middle">确定</span>
              </button>
            </div>
          </slot>
      </div>
    </transition>
      <div class="mask" :class="{active:visible}" @click="maskHandle"></div>
  </div>

</template>

<script>
  export default {
    name: 'ZghConfirm',
    data() {
      return {
        message: '消息',
        isMaskClick: false,
        visible: false,
        styles: {},
        onHide:function(){},
        onShow:function(){},
        content:'',
        isInput:false

      }
    },
    computed: {},
    mounted() {

    },
    methods: {
      _show(){
        this.visible=true;
      },
      _close(){
        this.visible=false;
      },
      maskHandle() {
        if (!this.isMaskClick) return;
        this._close()
      },
      handleSure() {
        this._close();
        this.onShow(this);
      },
      hide() {
        this._close();
        this.onHide(this);
      }
    }
  }
</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%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    z-index: 1000;
    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;
    }
   .text-input{
     border-bottom: 2px solid green;
     line-height:2em;

   }
  }
</style>
