<template>
  <w-dialog ref="dialogRef" :title="detailRef?.modelName + '(' + detailRef?.modelId + ')'" :can-maximize="false" :maximized="true">
    <div class="px-2">
      <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps @update:model-value="tabChanged">
        <q-tab name="discrimination" icon="bi-people" :label="$t('io.sc.engine.mv.result.grid.entity.discrimination')" />
        <q-tab name="stability" icon="bi-diagram-3" :label="$t('io.sc.engine.mv.result.grid.entity.stability')" />
        <q-tab name="scaleValidate" icon="bi-diagram-3" :label="$t('io.sc.engine.mv.result.grid.entity.scaleValidate')" />
      </q-tabs>

      <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
        <q-tab-panel name="discrimination" class="px-0">
          <div style="height: 50px"></div>
          <div class="row">
            <div class="col-4">
              <div id="rocEchart" style="width: 100%; height: 300px"></div>
              <div class="row justify-center">
                <q-btn color="primary" no-caps flat :label="$t('io.sc.engine.mv.result.curve.viewData', { type: 'ROC' })" @click="showData('ROC')" />
              </div>
            </div>
            <div class="col-4">
              <div id="capEchart" style="width: 100%; height: 300px"></div>
              <div class="row justify-center">
                <q-btn color="primary" no-caps flat :label="$t('io.sc.engine.mv.result.curve.viewData', { type: 'CAP' })" @click="showData('CAP')" />
              </div>
            </div>
            <div class="col-4">
              <div id="ksEchart" style="width: 100%; height: 300px"></div>
              <div class="row justify-center">
                <q-btn color="primary" no-caps flat :label="$t('io.sc.engine.mv.result.curve.viewData', { type: 'KS' })" @click="showData('KS')" />
              </div>
            </div>
          </div>
          <h3>{{ $t('io.sc.engine.mv.result.curve.references') }}:</h3>
          <table width="100%" style="border-collapse: collapse">
            <tr>
              <th class="referenceTh">{{ $t('io.sc.engine.mv.performance') }}</th>
              <th class="referenceTh">ROC (AUC = {{ detailRef.auc }})</th>
              <th class="referenceTh">CAP (AR = {{ detailRef.ar }})</th>
              <th class="referenceTh">KS (KS = {{ detailRef.ks }})</th>
            </tr>
            <tr v-for="(level, index) in referenceLevels" :key="index">
              <td class="referenceTd">{{ level }}</td>
              <td :class="valueInRange(detailRef.auc, referenceValues.auc[index]) ? 'referenceTd highlight' : 'referenceTd'">
                {{ referenceValues.auc[index].label }}
              </td>
              <td :class="valueInRange(detailRef.ar, referenceValues.ar[index]) ? 'referenceTd highlight' : 'referenceTd'">
                {{ referenceValues.ar[index].label }}
              </td>
              <td :class="valueInRange(detailRef.ks, referenceValues.ks[index]) ? 'referenceTd highlight' : 'referenceTd'">
                {{ referenceValues.ks[index].label }}
              </td>
            </tr>
          </table>
        </q-tab-panel>
        <q-tab-panel name="stability" class="px-0">
          <div style="height: 50px"></div>
          <div class="row">
            <div class="col-4">
              <div id="psiEchart" style="width: 100%; height: 300px"></div>
              <div class="row justify-center">
                <q-btn color="primary" no-caps flat :label="$t('io.sc.engine.mv.result.curve.viewData', { type: 'ROC' })" @click="showData('ROC')" />
              </div>
            </div>
          </div>
        </q-tab-panel>
        <q-tab-panel name="scaleValidate" class="px-0">
          <div class="row">
            <div class="col-5 pr-2">
              <w-grid
                :checkbox-selection="false"
                :fetch-data-url="Environment.apiContextPath('/api/mv/sc/roc?modelId=' + detailRef.modelId + '&validateDate=' + detailRef.validateDate)"
                :pageable="true"
                :toolbar-actions="['refresh', 'separator', 'export']"
                :columns="[
                  { width: 100, name: 'level', label: $t('io.sc.engine.mv.result.chiSquare.level'), align: 'right' },
                  { width: 100, name: 'pd', label: $t('io.sc.engine.mv.result.chiSquare.pd'), align: 'right' },
                  { width: 100, name: 'count', label: $t('io.sc.engine.mv.result.chiSquare.count'), align: 'right' },
                  { width: 100, name: 'defaultCount', label: $t('io.sc.engine.mv.result.chiSquare.defaultCount'), align: 'right' },
                  { width: 100, name: 'chiSquare', label: $t('io.sc.engine.mv.result.chiSquare.chiSquare'), align: 'right' },
                ]"
              ></w-grid>
            </div>
            <div class="col-7 pl-2">
              <w-grid
                :checkbox-selection="false"
                :fetch-data-url="Environment.apiContextPath('/api/mv/sc/roc?modelId=' + detailRef.modelId + '&validateDate=' + detailRef.validateDate)"
                :pageable="true"
                :toolbar-actions="['refresh', 'separator', 'export']"
                :columns="[
                  { width: 100, name: 'level', label: $t('io.sc.engine.mv.result.binomial.level'), align: 'right' },
                  { width: 100, name: 'pd', label: $t('io.sc.engine.mv.result.binomial.pd'), align: 'right' },
                  { width: 100, name: 'count', label: $t('io.sc.engine.mv.result.binomial.count'), align: 'right' },
                  { width: 100, name: 'defaultCount', label: $t('io.sc.engine.mv.result.binomial.defaultCount'), align: 'right' },
                  { width: 100, name: 'ndAvg', label: $t('io.sc.engine.mv.result.binomial.ndAvg'), align: 'right' },
                  { width: 100, name: 'ndSd', label: $t('io.sc.engine.mv.result.binomial.ndSd'), align: 'right' },
                  { width: 100, name: 'sl', label: $t('io.sc.engine.mv.result.binomial.sl'), align: 'right' },
                  { width: 100, name: 'cl', label: $t('io.sc.engine.mv.result.binomial.cl'), align: 'right' },
                  { width: 100, name: 'zUpper', label: $t('io.sc.engine.mv.result.binomial.zUpper'), align: 'right' },
                  { width: 100, name: 'zLower', label: $t('io.sc.engine.mv.result.binomial.zLower'), align: 'right' },
                  { width: 100, name: 'dUpper', label: $t('io.sc.engine.mv.result.binomial.dUpper'), align: 'right' },
                  { width: 100, name: 'dLower', label: $t('io.sc.engine.mv.result.binomial.dLower'), align: 'right' },
                  { width: 100, name: 'leUpper', label: $t('io.sc.engine.mv.result.binomial.leUpper'), align: 'right' },
                  { width: 100, name: 'geLower', label: $t('io.sc.engine.mv.result.binomial.geLower'), align: 'right' },
                ]"
              ></w-grid>
            </div>
          </div>
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <CurveDataDialog ref="curveDataDialogRef"></CurveDataDialog>
  </w-dialog>
</template>
<script setup lang="ts">
import { ref, nextTick, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import * as echarts from 'echarts';
import { axios, Environment } from 'platform-core';
import CurveDataDialog from './CurveDataDialog.vue';

const { t } = useI18n();

const referenceValues = {
  auc: [
    { label: '[0.00 - 0.65)', from: 0, to: 0.65 },
    { label: '[0.65 - 0.75)', from: 0.65, to: 0.75 },
    { label: '[0.75 - 0.80)', from: 0.75, to: 0.8 },
    { label: '[0.80 - 0.85)', from: 0.8, to: 0.85 },
    { label: '[0.85 - 0.90)', from: 0.85, to: 0.9 },
    { label: '[0.90 - 1.00)', from: 0.9, to: 1 },
  ],
  ar: [
    { label: '[0.0 - 0.3)', from: 0, to: 0.3 },
    { label: '[0.3 - 0.5)', from: 0.3, to: 0.5 },
    { label: '[0.5 - 0.6)', from: 0.5, to: 0.6 },
    { label: '[0.6 - 0.7)', from: 0.6, to: 0.7 },
    { label: '[0.7 - 0.8)', from: 0.7, to: 0.8 },
    { label: '[0.8 - 1.0)', from: 0.8, to: 1 },
  ],
  ks: [
    { label: '[0.00 - 0.20)', from: 0, to: 0.2 },
    { label: '[0.20 - 0.40)', from: 0.2, to: 0.4 },
    { label: '[0.40 - 0.50)', from: 0.4, to: 0.5 },
    { label: '[0.50 - 0.60)', from: 0.5, to: 0.6 },
    { label: '[0.60 - 0.75)', from: 0.6, to: 0.75 },
    { label: '[0.75 - 1.00)', from: 0.75, to: 1 },
  ],
};
const referenceLevels = computed(() => {
  return [
    t('io.sc.platform.core.enums.GoodLevel.POOR'),
    t('io.sc.platform.core.enums.GoodLevel.MEDIUM'),
    t('io.sc.platform.core.enums.GoodLevel.GOOD'),
    t('io.sc.platform.core.enums.GoodLevel.VERY_GOOD'),
    t('io.sc.platform.core.enums.GoodLevel.EXCELLENT'),
    t('io.sc.platform.core.enums.GoodLevel.PERFECT'),
  ];
});

const dialogRef = ref();
const detailRef = ref();
const selectedTabRef = ref('discrimination');
const curveDataDialogRef = ref();

let rocEchart;
let capEchart;
let ksEchart;
let psiEchart;
const open = (detail: any) => {
  detailRef.value = detail;
  dialogRef.value.show();
  tabChanged();
};

const tabChanged = () => {
  nextTick(() => {
    if ('discrimination' === selectedTabRef.value) {
      if (!rocEchart) {
        rocEchart = echarts.init(document.getElementById('rocEchart'));
      }
      axios
        .get(Environment.apiContextPath('/api/mv/sc/cap/option?modelId=' + detailRef.value.modelId + '&validateDate=' + detailRef.value.validateDate))
        .then((response) => {
          rocEchart?.setOption(response.data);
          rocEchart?.resize();
        });

      if (!capEchart) {
        capEchart = echarts.init(document.getElementById('capEchart'));
      }
      axios
        .get(Environment.apiContextPath('/api/mv/sc/cap/option?modelId=' + detailRef.value.modelId + '&validateDate=' + detailRef.value.validateDate))
        .then((response) => {
          capEchart?.setOption(response.data);
          capEchart?.resize();
        });

      if (!ksEchart) {
        ksEchart = echarts.init(document.getElementById('ksEchart'));
      }
      axios
        .get(Environment.apiContextPath('/api/mv/sc/ks/option?modelId=' + detailRef.value.modelId + '&validateDate=' + detailRef.value.validateDate))
        .then((response) => {
          ksEchart?.setOption(response.data);
          ksEchart?.resize();
        });
    } else if ('stability' === selectedTabRef.value) {
      if (!psiEchart) {
        psiEchart = echarts.init(document.getElementById('psiEchart'));
      }
      axios
        .get(Environment.apiContextPath('/api/mv/st/psi/option?modelId=' + detailRef.value.modelId + '&validateDate=' + detailRef.value.validateDate))
        .then((response) => {
          psiEchart?.setOption(response.data);
          psiEchart?.resize();
        });
    }
  });
};

const close = () => {
  dialogRef.value.hide();
  if (rocEchart) {
    rocEchart.dispose();
  }
  if (capEchart) {
    capEchart.dispose();
  }
  if (ksEchart) {
    ksEchart.dispose();
  }
};

const valueInRange = (value, config) => {
  if (value >= config.from && value < config.to) {
    return true;
  }
  return false;
};

const showData = (type: string) => {
  curveDataDialogRef.value.open(type, detailRef.value);
};

defineExpose({
  open,
  close,
});
</script>

<style>
.referenceTh {
  border: 1px solid gray;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

.referenceTd {
  border: 1px solid gray;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

.highlight {
  background-color: bisque;
}
</style>
