<template>
  <section class="fdDialog">
    <div class="dialog" v-if="visible">
      <div class="header mar-b8" v-text="title"/>
      <div class="closeIcon" @click="$emit('visible',false)"/>
      <div class="content">
        <slot/>
      </div>
    </div>
    <div class="dialog mar-l16" v-if="$slots.extra&&extraDialog">
      <div class="header mar-b8" v-text="extraTitle"/>
      <div class="closeIcon" @click="$emit('update:extraDialog',false)"/>
      <div class="content">
        <slot name="extra"/>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  name: "fdDialog",
  model: {
    event: "visible",
    prop: "visible"
  },
  props: {
    visible: Boolean,
    title: {default: "弹窗标题"},
    extraTitle:{default:"额外内容标题"},
    extraDialog: Boolean
  },
  methods: {},
}
</script>
<style scoped lang="scss">
.fdDialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 202310231147;
  display: flex;

  .dialog {
    position: relative;
    background: url("../assets/dialogBg.png") no-repeat;
    background-size: 100% 100%;
    width: 577px;
    padding: 0 24px 24px;

    .closeIcon {
      background: url("../assets/closeIcon.png") no-repeat;
      width: 24px;
      height: 24px;
      position: absolute;
      right: 13px;
      top: 30px;
      cursor: pointer;
    }

    .header {
      height: 54px;
      display: flex;
      line-height: 54px;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
    }

    .content {
      height: calc(100% - 54px);
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
