<template>
  <div>
    <!-- 主弹窗和蒙板 -->
    <div v-show="visible && !isMinimized" class="custom-dialog-mask">
      <div class="custom-dialog" :style="{ width: width }">
        <div class="custom-dialog-header">
          <span>{{ title }}</span>
          <div class="header-buttons">
            <el-button type="primary" @click.stop="toggleMinimize" class="min-btn">最小化</el-button>
            <el-button type="danger" class="close-btn"  @click.stop="close" plain>关闭</el-button>
          </div>
        </div>
        <div class="custom-dialog-body">
          <slot></slot>
          <div class="custom-dialog-body-bottom">
            温馨提示：当您开启医学白板并最小化界面时，离会前先关闭白板（观看者无需操作）。
          </div>
        </div>
      </div>
    </div>

    <!-- 最小化后的弹窗 -->
    <div v-show="isMinimized" class="minimized-dialog" @click="restoreDialog">
      <span>{{ title }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessageBox } from 'element-plus'
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  name: 'CustomDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '医学白板'
    },
    width: {
      type: String,
      default: '50%'
    },
    confirmTxt: {
      type: String,
      default: '是否关闭'
    }
  },
  emits: ['update:visible', 'open', 'close'],
  setup(props, { emit }) {
    watch(
        () => props.visible,
        () => {
          if (props.visible) {
            emit('open')
          } else {
            emit('close')
          }
        }
    )

    const isMinimized = ref(false)

    const close = () => {
      ElMessageBox.confirm(props.confirmTxt, '温馨提示', {
        type: 'warning'
      }).then(() => {
        emit('update:visible', false)
        isMinimized.value = false
      })
    }

    const toggleMinimize = () => {
      isMinimized.value = true
    }

    const restoreDialog = () => {
      isMinimized.value = false
      emit('update:visible', true)
    }

    return {
      isMinimized,
      close,
      toggleMinimize,
      restoreDialog
    }
  }
})
</script>

<style scoped lang="scss">
.custom-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

.custom-dialog {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.custom-dialog-header {
  padding: 15px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-dialog-body {
  padding: 20px;
  .custom-dialog-body-bottom {
    padding-top: 10px;
    color: #ff9500;
  }
}

.header-buttons {
  display: flex;
  gap: 10px;
  .min-btn{
    background: #fff;
    color: #379583;
    border-color:#379583;
  }
  .min-btn:hover {
    color: #fff;
    border-color: #c6e2ff;
    background-color:#379583;
  }

  .close-btn:hover {
    color: #fff;
    border-color: #c6e2ff;
    background-color:#F56C6C;
  }
}

.minimized-dialog {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 2001;
  background: #ade2d4;
}

.minimized-dialog:hover {
  background: #379583;
  color: white;
}
</style>