<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { traduction } from '@/utils/language';

const emits = defineEmits(['redirect', 'callback']);

const props = defineProps({
  needSave: {
    type: Boolean,
    required: true,
    default: () => true,
  },
  message:{
    type: String,
    required: false,
    default: () => '',
  },
});
const dialogRef = ref();
const dialogConfig = reactive({
  title: traduction('ALARM_OK'),
  content: traduction('IBMC_CERT_MANAGEMENT_REDIRECT_TIP'),
  id: 'backDialog',
  okButton: {
    label: traduction('IBMC_CERT_MANAGEMENT_REDIRECT_OK_BTN'),
    type: 'primary',
  },
  cancelButton: {
    type: 'default',
    label: traduction('COMMON_CANCEL'),
  },
});
function closeDialog(value: boolean) {
  dialogRef.value.hide();
  if (value) {
    emits('callback');
  }
}

function redirectCert(): void {
  if (props.needSave) {
    dialogRef.value.show();
    return;
  }
  emits('redirect');
}

defineExpose({
  show() {
    dialogRef.value.show();
  },
  hide() {
    dialogRef.value.hide();
  },
});
</script>

<template>
  <div class="cert-manage-redirect">
    <div id="redirectHref" @click="redirectCert()">{{ $t('IBMC_CERT_MANAGEMENT_REDIRECT') }}</div>
    <div v-if="message" id="redirectMsg">{{ $t(message) }}</div>
    <div v-else id="redirectMsg">{{ $t('IBMC_CERT_MANAGEMENT_REDIRECT_MSG') }}</div>
    <Dialog ref="dialogRef" :config="dialogConfig" @close="closeDialog"></Dialog>
  </div>
</template>

<style lang="scss" scoped>
.cert-manage-redirect {
  line-height: 16px;
  display: block;
  #redirectHref {
    display: inline-block;
    color: #0077ff;
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
  }

  #redirectMsg {
    display: inline-block;
    color: #8d98aa;
    letter-spacing: 0;
    line-height: 16px;
    margin-left: 8px;
  }
}
</style>
