<template>
  <main class="h-screen-main relative">
    <div class="h-full relative bg-neutral-50">
      <ConformanceSidebar></ConformanceSidebar>
      <ConformanceResults></ConformanceResults>
    </div>
    <StatusBar></StatusBar>
  </main>
</template>
<script>
import { storeToRefs } from 'pinia';
import FilesStore from '@/stores/files.js';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import StatusBar from '@/components/Discover/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';

export default {
  setup() {
    const filesStore = FilesStore();
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { allFiles } = storeToRefs(filesStore);
    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName } = storeToRefs(conformanceStore);

    return { filesStore, allFiles, isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName }
  },
  components: {
    StatusBar,
    ConformanceResults,
    ConformanceSidebar,
  },
  async created() {
    let params = this.$route.params;

    this.isLoading = true;
    switch (params.type) {
      case 'log':
        this.conformanceLogId = params.fileId;
        break;
      case 'filter':
        this.conformanceFilterId = params.fileId;
        break;
      case 'rule':
        // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
        switch (params.checkType) {
          case 'log':
            this.conformanceLogId = params.checkFileId;
            this.conformanceLogCreateCheckId = params.checkId;
            // 為複寫 Modal 取得 fileName
            await this.filesStore.fetchAllFiles();
            await this.allFiles.forEach(file => {
              if(file.id == this.conformanceLogCreateCheckId) return this.conformanceFileName = file.name;
            });
            break;
          case 'filter':
            this.conformanceFilterId = params.checkFileId;
            this.conformanceFilterCreateCheckId = params.checkId;
            // 為複寫 Modal 取得 fileName
            await this.filesStore.fetchAllFiles();
            await this.allFiles.forEach(file => {
              if(file.id == this.conformanceFilterCreateCheckId) return this.conformanceFileName = file.name;
            });
        }
        await this.conformanceStore.getConformanceReport();
        break;
    }
    await this.conformanceStore.getConformanceParams();
    // 給 rule 檔取得 ShowBar 一些時間
    setTimeout(() => this.isLoading = false, 500);
  },
  mounted() {
    this.selectedRuleType = 'Have activity';
    this.selectedActivitySequence = 'Start & End';
    this.selectedMode = 'Directly follows';
    this.selectedProcessScope = 'End to end';
    this.selectedActSeqMore = 'All';
    this.selectedActSeqFromTo = 'From';
  },
  beforeUnmount() {
    // 離開 conformance 時將 id 為 null，避免污染其他檔案
    this.conformanceLogId = null;
    this.conformanceFilterId = null;
    this.conformanceLogCreateCheckId = null;
    this.conformanceFilterCreateCheckId = null;
    this.conformanceRuleData = null;
    this.conformanceFileName = null;
  },
}
</script>
