<template>
  <div class="q-pa-md">
    <q-card class="rounded-borders bg-white q-pa-md no-shadow">
      <div class="flex items-center col q-pr-md row items-center q-mb-md">
        <q-btn
          padding="xs"
          class="text-grey-7 q-mr-md"
          color="grey-3"
          icon="arrow_back"
          @click="
            $router.push({
              path: '/services',
            })
          "
        />
        <span class="text-h6">{{ $t('services.serviceConstructor') }}</span>
      </div>
      <span class="text-h4">{{
        $t('services.emulation.processEmulation')
      }}</span>
    </q-card>
    <q-separator />
    <q-card
      class="rounded-borders bg-white items-center justify-center row q-pa-md no-shadow q-mb-md"
    >
      <q-tabs v-model="tab" class="text-blue-10">
        <q-tab
          name="customization"
          :label="$t('services.emulation.customizationTab')"
        />
        <template v-if="isFileUploaded">
          <q-tab
            name="processLog"
            :label="$t('services.emulation.processLogTab')"
          />
          <q-tab
            v-if="serviceCard && tableChecks"
            name="checks"
            :label="$t('services.emulation.checks')"
          />
        </template>
      </q-tabs>
    </q-card>

    <upload-and-customization-tab
      v-show="tab === 'customization'"
      class="content"
      :is-current-tab-open="tab === 'customization'"
      @get-service-card="(value) => (serviceCard = value)"
      @get-import-trace-id="(traceId) => (importTraceId = traceId)"
      @get-mz-trace-id="(traceId) => (mzTraceId = traceId)"
      @get-checks-trace-id="(traceId) => checksTraceId = traceId"
      @get-checks="onGetChecks"
      @remove="onRemove"
    />
    <process-log-tab
      v-show="tab === 'processLog'"
      v-if="isFileUploaded"
      class="content"
      :import-trace-id="importTraceId"
      :mz-trace-id="mzTraceId"
      :checks-trace-id="checksTraceId"
    />
    <checks-tab
      v-show="tab === 'checks'"
      v-if="serviceCard && tableChecks"
      :table-checks="tableChecks"
      :service-card="serviceCard"
    />
  </div>
</template>

<script lang="ts">
import UploadAndCustomizationTab from './tabs/upload-and-customization.vue';
import ProcessLogTab from './tabs/process-log.vue';
import ChecksTab from './tabs/checks.vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    UploadAndCustomizationTab,
    ProcessLogTab,
    ChecksTab,
  },
})
export default class EmulationPage extends Vue {
  tab = 'customization';
  tableChecks = null;
  serviceCard = null;
  importTraceId = '';
  mzTraceId = '';
  checksTraceId = '';
  processLogClicked = false;

  get isFileUploaded() {
    return !!this.importTraceId;
  }

  onGetChecks(data: any) {
    this.tableChecks = data.decisionData;
    if (data.processId) {
      if (data.processId.ProcessMzId) {
        this.mzTraceId = data.processId.ProcessMzId;
      }
      if (data.processId.DataPrepareId) {
        this.checksTraceId = data.processId.DataPrepareId;
      }
    }
    if (!data.error) {
      this.tab = 'checks';
    }
  }

  onRemove() {
    this.importTraceId = '';
    this.mzTraceId = '';
    this.checksTraceId = '';
    this.processLogClicked = false;
    this.serviceCard = null;
    this.tableChecks = null;
  }
}
</script>

<style lang="scss">
.content {
  height: calc(100vh - 51px - 169px - 80px);
  overflow: auto;
  flex-wrap: nowrap;
}
</style>