<template>
  <div>
    <a-modal
      v-bind="getBindValue"
      :fullscreen="isFullscreen"
      :title-align="'start'"
      :unmount-on-close="true"
      :draggable="true"
      :width="finalyWidth"
      :ok-text="okText"
      :footer="showFooter"
      :simple="simple"
      :cancel-text="cancelText"
      :esc-to-close="true"
      :render-to-body="renderToBody"
      :on-before-ok="handleBeforeOk"
      @before-close="handleCancel"
    >
      <template #title>
        <div class="modal-header">
          <span class="modal-title">{{ title }}</span>
          <span class="nav-btn" @click="toggleFullScreen">
            <icon-fullscreen-exit v-if="isFullscreen" />
            <icon-fullscreen v-else />
          </span>
        </div>
      </template>
      <!-- <a-scrollbar style="max-height: 800px; overflow: auto"> -->
      <slot></slot>
      <!-- </a-scrollbar> -->
      <template v-if="slots.footer" #footer>
        <slot name="footer"></slot>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, useSlots, unref, computed, useAttrs } from 'vue'

const slots = useSlots()
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  },
  width: {
    type: [Number, String]
  },
  okText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  simple: {
    type: Boolean,
    default: false
  },
  renderToBody: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits<{
  (e: 'modalHandleOk', val: any): void
  (e: 'modalHandleCancel'): void
}>()
const isFullscreen = ref(false)
const finalyWidth = computed(() => {
  if (isFullscreen.value) {
    return undefined
  }
  return props.width
})
const toggleFullScreen = () => {
  isFullscreen.value = !unref(isFullscreen)
}

const getBindValue = computed(() => {
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  return obj
})

// 监听确认事件
const handleBeforeOk = (done: (closed: boolean) => void) => {
  emits('modalHandleOk', done)
}

// 取消
const handleCancel = () => {
  isFullscreen.value = false
  emits('modalHandleCancel')
}
</script>

<style scoped lang="less">
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .modal-title {
    line-height: 24px;
    font-size: 18px;
    // color: #303133;
  }
  .nav-btn {
    cursor: pointer;
    border-color: rgb(var(--gray-2));
    color: rgb(var(--gray-8));
    font-size: 14px;
    margin-right: 20px;
  }
}
</style>
