<template>
  <div class="xc-dialog-v2" ref="dialogRef">
    <el-dialog v-model="dialog"
               :title="props.title"
               :show-close="false"
               draggable
               :close-on-press-escape="!props.manualShutdown"
               :close-on-click-modal="!props.manualShutdown"
               :width="props.width"
               @closed="closed"
               :fullscreen="fullScreen">
      <template #header="{ close, titleId, titleClass }">
        <div class="xc-dialog-v2__header">
          <div class="xc-dialog-v2__img">
            <img :src="imgIcon()" :alt="title">
          </div>
          <div class="xc-dialog-v2__title">
            {{ title }}
          </div>
        </div>
        <div class="xc-dialog-v2__icon" v-if="!props.manualShutdown">
          <div style="background-color: rgb(253,201,45)">
            <i class="iconfont icon-suoxiao"/>
          </div>
          <div style="background-color: rgb(40,211,63)" @click="clickFullScreen"
               :class="props.allowMaximization ? '' : 'disable' ">
            <i class="iconfont"
               :class="fullScreen ? 'icon-quxiaoquanping' : 'icon-quanping' ">
            </i>
          </div>
          <div class="cy-dialog__close" @click="close" style="background-color: rgb(254,98,84)">
            <i class="iconfont icon-guanbi"></i>
          </div>
        </div>
      </template>
      <slot/>
      <template #footer>
        <slot name="footer"/>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name='XcDialogV2'>
import {genTextPortrait} from '@/utils/portrait'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '弹窗'
  },
  iconImg: {
    type: [Object, String],
    default: null
  },
  allowMaximization: {
    type: Boolean,
    default: true
  },
  width: {
    type: [String, Number],
    default: '50%'
  },
  maximize: {
    type: Boolean,
    default: false
  },
  manualShutdown: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['closed', 'update:modelValue'])


const imgIcon = () => {
  if (props.iconImg === null) {
    return genTextPortrait(props.title)
  }
}

let fullScreen = $ref(props.maximize)
const clickFullScreen = () => {
  if (props.allowMaximization) {
    fullScreen = !fullScreen
  }
}

const closed = () => {
  emit('closed')
  emit('update:modelValue', false)
}

const dialog = ref(false)

watch(() => props.modelValue, () => {
  dialog.value = props.modelValue
}, {immediate: true})

const dialogRef = ref(null)
onMounted(async () => {
  await nextTick()
  const body = document.querySelector("body");
  if (body.append) {
    body.append(dialogRef.value);
  } else {
    body.appendChild(dialogRef.value);
  }
})

</script>

<style scoped lang="scss">

.disable {
  opacity: 0.2;
}

.xc-dialog-v2 {

  :deep(.el-dialog__header) {
    //background-color: white;
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    border-bottom: 1px solid #000;

    .xc-dialog-v2__icon {
      right: 5px;
      top: 0;
      position: absolute;
      width: max-content;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      div {
        width: 12px;
        height: 12px;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin-left: 5px;
        cursor: default;

        &:hover {
          i {
            opacity: 1;
          }
        }

        i {
          opacity: 0;
          transition: opacity .4s;
        }
      }
    }

    .xc-dialog-v2__header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;


      .xc-dialog-v2__img {
        margin-right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 20px;
          height: 20px;
          border-radius: 5px;
        }

      }

    }

  }
}
</style>
