<script setup lang="ts" name="ModalPop">
import { ref, toRefs } from "vue";
import { Modal } from "view-ui-plus";
const props = withDefaults(defineProps<{
  modelValue: boolean;
  title: string;
  width?: string;
}>(), {
  width: '1000'
})

const emit = defineEmits(["update:modelValue", "cancel", "change"]);

// 关闭
const cancel = () => {
  emit("cancel");
};

const change = (visible: boolean) => {
  emit("change", visible);
};
</script>

<template>
  <Modal class="ModalPop" v-model="props.modelValue" :width="width" draggable scrollable sticky @on-cancel="cancel" @on-visible-change="change">
    <template #header>
      <span style="font-size: 16px; font-weight: bold;color: #7A8495;">{{ props.title }}</span>
    </template>
    <div class="slot-warpper">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: center; padding-top: 20px;">
        <slot name="footer"></slot>
      </div>
    </template>
  </Modal>
</template>

<style lang="scss">
.ModalPop {
  .ivu-modal-header,
  .ivu-modal-footer {
    border: none;
  }
  .ivu-modal-content {
    background: #f3f5fa;
  }
  .ivu-modal-body {
    background: rgb(243, 245, 250);
    border-radius: 4px;
    padding: 0px 8px 8px !important;
  }
  .slot-warpper {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(220, 229, 235);
    border-image: initial;
    background: rgb(255, 255, 255);
    padding: 30px;
    border-radius: 4px;
    max-height: 500px;
  }
}
</style>