<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 LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';

export default {
  setup() {
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { conformanceLogId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo } = storeToRefs(conformanceStore);

    return { isLoading, conformanceLogId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, }
  },
  components: {
    StatusBar,
    ConformanceResults,
    ConformanceSidebar,
  },
  async created() {
    // let logId;
    if(this.$route.params.type === 'log') this.conformanceLogId = this.$route.params.fileId;

    await this.conformanceStore.getLogConformanceParams();

    // this.isLoading = true;
    this.isLoading = false;
  },
  mounted() {
    this.selectedRuleType = 'Have activity';
    this.selectedActivitySequence = 'Start & End';
    this.selectedMode = 'Directly follows';
    this.selectedProcessScope = 'End to end';
    this.selectedActSeqMore = 'All';
    this.selectedActSeqFromTo = 'From';
  },
}
</script>
