<template>
  <div class="s-modal" v-if="show">
      <div class="wrap" :style="{width}">
        <div class="header">
            <h3>{{title}}</h3>
            <s-icon
                v-if="showClose"
                type="icon-close"
                class="mfont pointer"
                @click="handleClose"
            />
        </div>
        <div class="content">
            <slot></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
      </div>
  </div>
</template>

<script lang='ts' setup>
import { SIcon } from "@/components/Common"
interface Props{
   show:boolean,
   title?:string,
   width?:string,
   showClose?:boolean,
   beforeClose?:Function,
}
const props = withDefaults(defineProps<Props>(), {
   show: false,
   title: "弹框",
   width: "500px",
   showClose: true
})

const emits = defineEmits(["update:show"])
const handleClose = () => {
   if (props.beforeClose) {
      props.beforeClose()
   } else {
      emits("update:show")
   }
}

</script>

<style scoped lang="less">
.s-modal{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    right: 0;
    z-index: 999;
    bottom: 0;
    .wrap{
        background: white;
        margin-top: 100px;
        margin: 100px auto;
        border-radius: 2px;
        .header{
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3 {
               cursor: default;
               font-size: @middleSize;
            }
        }
        .footer{
            padding: 8px 20px;
            text-align: right;
        }
        .content{
            padding: 10px 20px 20px 20px;
        }
    }
}
</style>
