<template>
  <el-dialog
      v-model="dialogVisible"
      class="msg-box"
      width="645"
      align-center :lock-scroll="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="msg-header">
        <div class="header-color1"></div>
        <div class="header-color2"></div>
        <div class="header-close">
          <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
        </div>
      </div>
    </template>
    <div class="msg-body" >
      <div class="msg-body-title" >
        <svg-icon  icon-class="error" class="msg-icon" />
        {{ t('capital.importantNote') }}
      </div>

      <div class="msg-body-content">
        <div style="padding-top: 40px;">{{ t('capital.dearCustomer') }}</div>
        <div style="padding-top: 20px;">{{ t('capital.serviceChargeTips',{num: props.num-1, num2: props.num,service_charge:props.service_charge} ) }}</div>

        <div style="padding-top: 20px;">
          {{ t('capital.importantNote2') }}
        </div>
      </div>
    </div>
    <slot></slot>
    <template #footer  >
      <div class="msg-footer">
        <el-button class="msg-btn dark-btn" size="large" @click="close">{{ t('capital.importantNoteBtn') }}</el-button>
        <el-button class="msg-btn" type="primary" size="large" @click="goDone">{{ t('capital.importantNoteBtn2') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { useLocale } from 'element-plus'
import { ref, defineModel, watch, computed } from 'vue';

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const dialogVisible = defineModel("show")
const emit = defineEmits(['done'])

const props = defineProps({
  num: [String, Number],
  service_charge: [String, Number]
})

function close() {
  dialogVisible.value = false
}

function goDone() {
  dialogVisible.value = false
  emit('done')
}
</script>

<style lang="scss">
.msg-box {
  border-radius: 20px;
  padding: 0 0 30px;

  .el-dialog__header {
    margin-right: 0;
    padding: 0;
    overflow: hidden;
  }

  .el-dialog__body {
    box-sizing: border-box;
    padding: 10px 30px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .msg-header {
    border-radius: 20px;
    width: 100%;
    height: 58px;
    position: relative;

    .header-color1 {
      height: 14px;
      width: 24.6%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      background-color: #0F3675;
    }

    .header-color2 {
      height: 14px;
      width: 75.4%;
      position: absolute;
      top: 0;
      right: 0;
      overflow: hidden;
      background-color: #29BBE4;
    }

    .header-close {
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 20px;
      font-size: 28px;
    }
  }

  .tip-header {
    border-radius: 20px;
    width: 100%;
    height: 38px;
    position: relative;
    overflow: hidden;

    .header-color1 {
      height: 9px;
      width: 24.6%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      background-color: #0F3675;
    }

    .header-color2 {
      height: 9px;
      width: 75.4%;
      position: absolute;
      top: 0;
      right: 0;
      overflow: hidden;
      background-color: #29BBE4;
    }

    .header-close {
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 10px;
      font-size: 22px;
    }
  }

  .msg-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    .msg-icon {
      width: 42px;
      height: 42px;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .msg-body-title {
      width: 100%;
      display: flex;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: #333333;
      line-height: 42px;
    }

    .msg-body-content {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
  }

  .msg-footer {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .msg-btn {
    height: 40px;
    width: 264px;
    font-size: 20px;
    font-weight: 400;
  }
}
</style>