<template>
  <div class="sv-modal" v-if="value" @click="visible = false">
    <div class="sv-modal-content" @click.stop="visible = true">
      <div class="sv-modal-header">
        {{title}}
        <slot name="title"></slot>
      </div>
      <div class="sv-modal-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svModal',
    description: '相当于自定义内容的dialog',
    data () {
      return {
        visible: false
      }
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      title: String
    },
    watch: {
      value (val) {
        this.visible = val
      },
      visible (val) {
        this.$emit('input', val)
      }
    },
    created () {
      if (this.value) {
        this.visible = true
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";

  .sv-modal{
    position: fixed;
    top:0;
    bottom: 0;
    left:0;
    right:0;
    z-index:9999;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    .sv-modal-content{
      width:80%;
      border-radius: pxToRem(12px);
      overflow: hidden;
      .sv-modal-header{
        height: pxToRem(100px);
        line-height: pxToRem(100px);
        text-align: center;

        background: $color-danger;

        color:#fff;
        font-size:pxToRem(38px);
      }
      .sv-modal-body{
        padding: pxToRem(30px 20px 40px);
        background: $color-light;
      }
      .sv-footer{

      }
    }
  }
</style>
