<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title?: string
    tips?: string
    html?: string
    showClose?: boolean
    showFooter?: boolean
    showCancel?: boolean
    alignCenter?: boolean
    loading?: boolean
    confirmText?: string
  }>(),
  {
    modelValue: false,
    title: '',
    tips: '',
    showClose: true,
    showFooter: true,
    showCancel: true,
    confirmText: '确认',
  },
)
const emits = defineEmits(['update:modelValue', 'cancel', 'ok', 'closed'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const headBg = `url(${OSS_URL}/urm/dia_head_bg.svg) 100%/100% no-repeat`

const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
  },
})

function onClick(type: number) {
  if (type === 0) {
    emits('cancel')
    show.value = false
  } else {
    if (props.loading) return
    emits('ok')
  }
}
</script>

<template>
  <el-dialog
    v-model="show"
    class="x-dia"
    :title="title"
    :show-close="false"
    destroy-on-close
    align-center
    v-bind="$attrs"
    @closed="emits('closed')"
  >
    <template #header>
      <div
        class="header"
        :style="{
          background: headBg,
        }"
      >
        <span v-if="title" class="title">{{ title }}</span>
        <Icon class="left-icon" name="dia_logo" size="104" />
        <Icon
          v-if="showClose"
          class="right-icon"
          name="close_dia"
          size="48"
          style="cursor: pointer"
          @click="onClick(0)"
        />
      </div>
    </template>
    <div class="body">
      <div
        :class="{
          content: true,
          full: !showFooter && !$slots.footer,
        }"
      >
        <div v-if="html" class="tips" v-html="html"></div>
        <div v-else-if="tips" class="tips">
          <span>{{ tips }}</span>
        </div>
        <slot v-else></slot>
      </div>
      <div class="footer">
        <slot v-if="$slots.footer" name="footer"></slot>
        <template v-if="!$slots.footer && showFooter">
          <Btn v-if="showCancel" type="success" tilt @click="onClick(0)">取消</Btn>
          <Btn :loading="loading" tilt @click="onClick(1)">{{
            loading ? '提交中' : confirmText
          }}</Btn>
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
.x-dia {
  width: 750px;
  min-height: 40vh;
  margin: 0;
  padding: 0;
  background: #373737;
  border-radius: 3.33vh !important;
  .el-dialog__header {
    height: 7.33vh;
    padding: 0 !important;
    position: relative;
    .header {
      width: 100%;
      height: 7.33vh;
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
        font-family: $font-special;
        font-size: 4vh;
        color: #fff;
        letter-spacing: $space-2;
      }

      .left-icon {
        position: absolute;
        top: -1.67vh;
        left: -20px;
      }
      .right-icon {
        position: absolute;
        top: -0.5vh;
        right: -6px;
      }
    }
  }

  .el-dialog__body {
    height: 100%;
    border-radius: 3.33vh;
    background: linear-gradient(162deg, #fdfdf9 12.23%, #dfebf7 90.14%);
    padding: 2.67vh !important;
    .body {
      .content {
        min-height: 23.33vh;

        .tips {
          width: 100%;
          min-height: 23.33vh;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: $font-special;
          font-size: $font-size-7;
          color: $font-tag-color;
        }
        &.full {
          min-height: 30vh;
        }
      }
      .footer {
        display: flex;
        justify-content: center;
        height: 6.67vh;
        .x-button {
          margin-right: $space-4;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
