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

const props = defineProps({
  data: {
    type: String,
    required: true,
    default: '',
  },
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  jvmVisible: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const emit = defineEmits(['dialogClose']);

const { visible, data } = toRefs(props);
let dialogVisible = ref(visible.value);
let downloadKVMLink = ref(data.value);

let errorMessageHelp = reactive([
  {
    id: 1,
    label: 'REMOTE_ERROR_ITEM1',
    helpURL: '/bmc_help_0048.html',
  },
  {
    id: 2,
    label: 'REMOTE_ERROR_ITEM2',
    helpURL: '/bmc_help_0052.html',
  },
  {
    id: 3,
    label: 'REMOTE_ERROR_ITEM3',
    helpURL: '/bmc_help_0063.html',
  },
  {
    id: 4,
    label: 'REMOTE_ERROR_ITEM4',
    helpURL: '/bmc_help_0064.html',
  },
]);

if (!props.jvmVisible) {
  errorMessageHelp.shift();
}

function handleDialogClose() {
  // 关闭弹窗
  dialogVisible.value = false;
  // 业务处理
  emit('dialogClose', dialogVisible.value);
}

function goHelpPage(helpUrl: String) {
  const language: string = getStoreData('loct', 'locale');
  let localeLanguage: string;
  switch (language) {
    case 'zh':
      localeLanguage = 'zh-cn';
      break;
    case 'en':
      localeLanguage = 'en-us';
      break;
    case 'ja':
      localeLanguage = 'jap-ja';
      break;
    case 'fr':
      localeLanguage = 'fre-fr';
      break;
    case 'ru':
      localeLanguage = 'ru-ru';
      break;
    default:
      localeLanguage = 'zh-cn';
      break;
  }
  const baseRouter = self.location.pathname || '/';
  const url = `${baseRouter}help/${localeLanguage}${helpUrl}`;
  window.open(url, '_blank');
  if (window) {
    window.opener = null;
  }
}
</script>

<template>
  <div v-if="dialogVisible" v-reqKeepAlive.dialog>
    <el-dialog
      id="homeVirtualModal"
      v-model="dialogVisible"
      :title="$t('HOME_MOREINFO')"
      :class="'virtual-dialog'"
      :close-on-click-modal="false"
      :width="544"
      :before-close="handleDialogClose"
    >
      <div v-if="props.jvmVisible">
        <span v-t="'REMOTE_INTEGRATED_KVM'" class="conten-title"></span>
        <div class="error-help">
          {{ $t('REMOTE_START_KVM_TIP1') }}
          <a
            id="downloadJVMLink"
            v-t="'REMOTE_START_KVM_TIP2'"
            :href="$t('REMOTE_START_KVM_URL')"
            target="_blank"
            rel="noopener noreferrer"
          ></a>
          {{ $t('REMOTE_START_KVM_TIP3') }}
        </div>
      </div>
      <div :class="props.jvmVisible ? 'error-help' : 'no-jvm-error-help'">
        <span v-t="'REMOTE_TROUBLE_SHOOTING'" class="conten-title"></span>
        <div class="error-help-container">
          <div
            v-for="item in errorMessageHelp"
            :id="'errorMsg' + item.id"
            :key="item.id"
            class="helpItem"
            @click="goHelpPage(item.helpURL)"
          >
            {{ $t(item.label).replace(`${item.id}`, `${item.id - 1}`) }}
          </div>
        </div>
      </div>
      <div v-if="false" class="remote-console">
        <span v-t="'REMOTE_INDEPENDENT_KVM'" class="conten-title"></span>
        <div v-if="downloadKVMLink">
          <div class="download-console">
            {{ $t('REMOTE_PRO_D_TIP') }}
            <a
              id="downloadKVMLink"
              :href="downloadKVMLink"
              target="_blank"
              rel="noopener noreferrer"
            >
              {{ $t('KVM_ENV_TIP_2_2') }}
            </a>
            {{ $t('REMOTE_PRO_D_TIP1') }}
          </div>
        </div>
        <div v-else class="integration-controller download-console">
          {{ $t('REMOTE_PRO_D_TIP2') }}
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            id="virtualModelOK"
            class="confirmBtn"
            type="primary"
            size="small"
            @click="handleDialogClose"
          >
            {{ $t('HEADER_UID_OFF') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.virtual-dialog {
  .download-console {
    margin: 16px 0 0;
  }

  .error-help {
    margin: 16px 0 0px;
    max-width: 464px;
  }

  .no-jvm-error-help {
    margin: 0 0 24px;
    max-width: 464px;
  }

  .conten-title {
    font-size: 14px;
    color: $APP-COLOR-TEXT;
    letter-spacing: 0;
    line-height: 20px;
  }
  .helpItem {
    font-size: 12px;
    color: var(--o-color-primary);
    letter-spacing: 0;
    line-height: 24px;
    cursor: pointer;
  }

  .error-help-container {
    margin: 16px 0 0px;
  }
  .confirmBtn {
    height: 24px;
    font-size: 12px;
  }
  a,
  a:link,
  a:hover,
  a:visited,
  a:active {
    text-decoration: none;
    color: var(--o-color-primary);
  }

  .dialog-footer {
    text-align: center;
  }
  .remote-console {
    max-width: 464px;
  }
}
</style>
