<template>
<section class="h-full shadow-[1px_0px_4px_rgba(0,0,0,0.25)] bg-neutral-100 absolute inset-y-0 left-0 z-10"
  :class="!notShowActList ? (isShowBarOpen ? 'w-full' : 'w-[312px]') : 'w-[312px]'">
  <!-- header -->
  <div class="bg-neutral-200 px-4">
    <p class="h2">{{ i18next.t("Conformance.RuleSettings") }}</p>
  </div>
  <!-- contanier -->
  <div class="p-4 h-[calc(100%_-_40px)] flex">
    <div class="h-full flex flex-col justify-between w-[280px]">
      <!-- select -->
      <div class="h-full overflow-y-auto scrollbar w-[280px]">
        <!-- radio group -->
        <ConformanceRadioGroup></ConformanceRadioGroup>
        <!-- show and hidden button -->
        <div v-if="!notShowActList" class="flex items-center justify-between mr-1"
          :class="isShowBarOpen ? 'text-primary' : ''">
          <p class="h2">{{ i18next.t("Conformance.ActivitySelector") }}</p>
          <span id="cyp-showbaricon" class="material-symbols-outlined cursor-pointer duration-300
            hover:bg-primary/50 hover:rounded"
            @click="isShowBarOpen = !isShowBarOpen">
            {{ isShowBarOpen ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}
          </span>
        </div>
        <!-- select result -->
        <ConformanceSelectResult
          :isSubmit="isAlreadySubmit"
          :isSubmitTask="isSubmitTask"
          :isSubmitStartAndEnd="isSubmitStartAndEnd"
          :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
          :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
          :isSubmitDurationData="isSubmitDurationData"
          :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
          :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
          :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
          :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
          :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
          :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
          :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
          :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
          :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
          :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
          :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
          :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
          :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
          :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
          :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
        ></ConformanceSelectResult>
        <!-- Time Range -->
        <ConformanceTimeRange
          @min-total-seconds="minTotalSeconds"
          @max-total-seconds="maxTotalSeconds"

          :isSubmitDurationTime="isSubmitDurationTime"

          :isSubmitTimeCfmPtEteAll="isSubmitTimeCfmPtEteAll"
          :isSubmitTimeCfmPtEteStart="isSubmitTimeCfmPtEteStart"
          :isSubmitTimeCfmPtEteEnd="isSubmitTimeCfmPtEteEnd"
          :isSubmitTimeCfmPtEteSE="isSubmitTimeCfmPtEteSE"
          :isSubmitTimeCfmPtPStart="isSubmitTimeCfmPtPStart"
          :isSubmitTimeCfmPtPEnd="isSubmitTimeCfmPtPEnd"
          :isSubmitTimeCfmPtPSE="isSubmitTimeCfmPtPSE"
          :isSubmitTimeCfmWtEteAll="isSubmitTimeCfmWtEteAll"
          :isSubmitTimeCfmWtEteStart="isSubmitTimeCfmWtEteStart"
          :isSubmitTimeCfmWtEteEnd="isSubmitTimeCfmWtEteEnd"
          :isSubmitTimeCfmWtEteSE="isSubmitTimeCfmWtEteSE"
          :isSubmitTimeCfmWtPStart="isSubmitTimeCfmWtPStart"
          :isSubmitTimeCfmWtPEnd="isSubmitTimeCfmWtPEnd"
          :isSubmitTimeCfmWtPSE="isSubmitTimeCfmWtPSE"
          :isSubmitTimeCfmCtEteAll="isSubmitTimeCfmCtEteAll"
          :isSubmitTimeCfmCtEteStart="isSubmitTimeCfmCtEteStart"
          :isSubmitTimeCfmCtEteEnd="isSubmitTimeCfmCtEteEnd"
          :isSubmitTimeCfmCtEteSE="isSubmitTimeCfmCtEteSE"
         ></ConformanceTimeRange>
      </div>
      <!-- buttons -->
      <div class="space-x-4 p-4 flex justify-center items-content border-t border-neutral-300">
        <button type="button"  class="btn btn-sm btn-neutral" @click="reset">
          {{ i18next.t("Global.Clear")}}
        </button>
        <button id="btn_apply_conformance" type="button" class="btn btn-sm "
          @click="submitConformance"
          :class="this.isMainBtnDisabled ? 'btn-disable' : 'btn-neutral'"
          :disabled="isApplyBtnDisabled"
        >
          {{ i18next.t("Global.Apply") }}
        </button>
      </div>
    </div>
    <!-- show bar -->
    <ConformanceShowBar v-if="!notShowActList" :class="isShowBarOpen?'':'hidden'"
      :isSubmit="isAlreadySubmit"
      :isSubmitTask="isSubmitTask"
      :isSubmitStartAndEnd="isSubmitStartAndEnd"
      :isSubmitCfmSeqDirectly="isSubmitCfmSeqDirectly"
      :isSubmitCfmSeqEventually="isSubmitCfmSeqEventually"
      :isSubmitDurationData="isSubmitDurationData"
      :isSubmitCfmPtEteStart="isSubmitCfmPtEteStart"
      :isSubmitCfmPtEteEnd="isSubmitCfmPtEteEnd"
      :isSubmitCfmPtEteSE="isSubmitCfmPtEteSE"
      :isSubmitCfmPtPStart="isSubmitCfmPtPStart"
      :isSubmitCfmPtPEnd="isSubmitCfmPtPEnd"
      :isSubmitCfmPtPSE="isSubmitCfmPtPSE"
      :isSubmitCfmWtEteStart="isSubmitCfmWtEteStart"
      :isSubmitCfmWtEteEnd="isSubmitCfmWtEteEnd"
      :isSubmitCfmWtEteSE="isSubmitCfmWtEteSE"
      :isSubmitCfmWtPStart="isSubmitCfmWtPStart"
      :isSubmitCfmWtPEnd="isSubmitCfmWtPEnd"
      :isSubmitCfmWtPSE="isSubmitCfmWtPSE"
      :isSubmitCfmCtEteStart="isSubmitCfmCtEteStart"
      :isSubmitCfmCtEteEnd="isSubmitCfmCtEteEnd"
      :isSubmitCfmCtEteSE="isSubmitCfmCtEteSE"
      :isSubmitShowDataSeq="isSubmitShowDataSeq"
      :isSubmitShowDataPtEte="isSubmitShowDataPtEte"
      :isSubmitShowDataPtP="isSubmitShowDataPtP"
      :isSubmitShowDataWtEte="isSubmitShowDataWtEte"
      :isSubmitShowDataWtP="isSubmitShowDataWtP"
      :isSubmitShowDataCt="isSubmitShowDataCt"
    ></ConformanceShowBar>
  </div>
</section>
</template>

<script>
import { storeToRefs } from 'pinia';
import i18next from '@/i18n/i18n';
import { mapState, mapActions, } from 'pinia';
import ConformanceInputStore from '@/stores/conformanceInput';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import ConformanceRadioGroup from './ConformanceSidebar/ConformanceRadioGroup.vue';
import ConformanceShowBar from './ConformanceSidebar/ConformanceShowBar.vue';
import ConformanceTimeRange from './ConformanceSidebar/ConformanceTimeRange.vue';
import ConformanceSelectResult from './ConformanceSidebar/ConformanceSelectResult.vue';

export default {
  setup() {
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope,
      selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole,
      cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole,
      cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole,
      cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected,
      conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
      conformanceTempReportData
    } = storeToRefs(conformanceStore);

    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode,
      selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo,
      conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart,
      cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole,
      cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE,
      cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected,
      conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId,
      conformanceTempReportData
    };
  },
  data() {
    return {
      i18next: i18next,
      isMainBtnDisabled: true,
      isShowBarOpen: false,
      selectConformanceTask: null,
      selectConformanceStartAndEnd: null, // Activity sequence
      selectCfmSeqStart: null,
      selectCfmSeqEnd: null,
      selectCfmSeqDirectly: [],
      selectCfmSeqEventually: [],
      selectDurationData: null, // Activity duration
      selectDurationTime: { min: 0, max: 0},
      selectTimeRangeMin: 0, // Time Range min
      selectTimeRangeMax: 0, // Time Range max
      selectCfmPtEteStart: null, // Processing time
      selectCfmPtEteEnd: null,
      selectCfmPtEteSEStart: null,
      selectCfmPtEteSEEnd: null,
      selectCfmPtPStart: null,
      selectCfmPtPEnd: null,
      selectCfmPtPSEStart: null,
      selectCfmPtPSEEnd: null,
      selectCfmWtEteStart: null, // Waiting time
      selectCfmWtEteEnd: null,
      selectCfmWtEteSEStart: null,
      selectCfmWtEteSEEnd: null,
      selectCfmWtPStart: null,
      selectCfmWtPEnd: null,
      selectCfmWtPSEStart: null,
      selectCfmWtPSEEnd: null,
      selectCfmCtEteStart: null, // Cycle time
      selectCfmCtEteEnd: null,
      selectCfmCtEteSEStart: null,
      selectCfmCtEteSEEnd: null,
      isAlreadySubmit: false,
      isSubmittedData: null, // 已 Apply 後，沒有重新改變規則的 Data
      isSubmitTask: null,
      isSubmitStartAndEnd: null, // Activity sequence
      isSubmitCfmSeqDirectly: [],
      isSubmitCfmSeqEventually: [],
      isSubmitDurationData: null, // Activity duration
      isSubmitCfmPtEteStart: null, // Processing time
      isSubmitCfmPtEteEnd: null,
      isSubmitCfmPtEteSE: null,
      isSubmitCfmPtPStart: null,
      isSubmitCfmPtPEnd: null,
      isSubmitCfmPtPSE: null,
      isSubmitCfmWtEteStart: null, // Waiting time
      isSubmitCfmWtEteEnd: null,
      isSubmitCfmWtEteSE: null,
      isSubmitCfmWtPStart: null,
      isSubmitCfmWtPEnd: null,
      isSubmitCfmWtPSE: null,
      isSubmitCfmCtEteStart: null, // Cycle time
      isSubmitCfmCtEteEnd: null,
      isSubmitCfmCtEteSE: null,
      isSubmitDurationTime: { base: {}, rule: {}}, // Activity duration Time Range
      isSubmitTimeCfmPtEteAll: { base: {}, rule: {}}, // Processing time Time Range
      isSubmitTimeCfmPtEteStart: { base: {}, rule: {}},
      isSubmitTimeCfmPtEteEnd: { base: {}, rule: {}},
      isSubmitTimeCfmPtEteSE: { base: {}, rule: {}},
      isSubmitTimeCfmPtPStart: { base: {}, rule: {}},
      isSubmitTimeCfmPtPEnd: { base: {}, rule: {}},
      isSubmitTimeCfmPtPSE: { base: {}, rule: {}},
      isSubmitTimeCfmWtEteAll: { base: {}, rule: {}}, // Waiting time Time Range
      isSubmitTimeCfmWtEteStart: { base: {}, rule: {}},
      isSubmitTimeCfmWtEteEnd: { base: {}, rule: {}},
      isSubmitTimeCfmWtEteSE: { base: {}, rule: {}},
      isSubmitTimeCfmWtPStart: { base: {}, rule: {}},
      isSubmitTimeCfmWtPEnd: { base: {}, rule: {}},
      isSubmitTimeCfmWtPSE: { base: {}, rule: {}},
      isSubmitTimeCfmCtEteAll: { base: {}, rule: {}}, // Cycle time Time Range
      isSubmitTimeCfmCtEteStart: { base: {}, rule: {}},
      isSubmitTimeCfmCtEteEnd: { base: {}, rule: {}},
      isSubmitTimeCfmCtEteSE: { base: {}, rule: {}},
      isSubmitShowDataSeq: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      }, // To Start & End 連動資料
      isSubmitShowDataPtEte: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      },
      isSubmitShowDataPtP: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      },
      isSubmitShowDataWtEte: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      },
      isSubmitShowDataWtP: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      },
      isSubmitShowDataCt: {
        task: null,
        taskStart: null,
        taskEnd: null,
        isStartSelected: null,
        isEndSelected: null
      },
    }
  },
  components: {
    ConformanceRadioGroup,
    ConformanceShowBar,
    ConformanceTimeRange,
    ConformanceSelectResult,
  },
  computed: {
    notShowActList: function() {
      return (this.selectedRuleType === 'Activity sequence' && this.selectedActivitySequence === 'Sequence' 
      && (this.selectedMode === 'Short loop(s)' || this.selectedMode === 'Self loop(s)')) 
      || (this.selectedRuleType === 'Processing time' && this.selectedProcessScope === 'End to end' 
        && this.selectedActSeqMore === 'All') 
      || (this.selectedRuleType === 'Waiting time' && this.selectedProcessScope === 'End to end' 
        && this.selectedActSeqMore === 'All') 
      || (this.selectedRuleType === 'Cycle time' && this.selectedProcessScope === 'End to end' 
        && this.selectedActSeqMore === 'All')
    },
    /**
     * Apply button is disabled or not
     */
    isApplyBtnDisabled() {
      let disabledBool = true;
      switch (this.selectedRuleType) {
        case 'Have activity': // Rule Type 選 Have activity 的行為
          if(this.selectConformanceTask?.length) {
            disabledBool = false;
          }
          break
        case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
          switch (this.selectedActivitySequence) {
            case 'Start & End': // Activity Sequence 選 Start & End 的行為
              if(this.selectCfmSeqStart && this.selectCfmSeqEnd) {
                disabledBool = false;
              }
              break;
            case 'Sequence': // Activity Sequence 選 Sequence 的行為
              switch (this.selectedMode) {
                case 'Directly follows':
                  if(this.selectCfmSeqDirectly.length >= 2) {
                    disabledBool = false;
                  }
                  break;
                case 'Eventually follows':
                  if(this.selectCfmSeqEventually.length >= 2) {
                    disabledBool = false;
                  }
                  break;
                case 'Short loop(s)':
                  disabled = false;
                  break;
                case 'Self loop(s)':
                  disabledBool = false;
                  break;
              };
          }
          break;
        case 'Activity duration': // Rule Type 選 Activity duration 的行為
          if(this.selectDurationData?.length) {
            disabledBool = false;
          }
          break;
        case 'Processing time': // Rule Type 選 Processing time 的行為
          switch (this.selectedProcessScope) {
            case 'End to end':
              switch (this.selectedActSeqMore) {
                case 'All':
                  disabledBool = false;
                  break;
                case 'Start':
                  if(this.selectCfmPtEteStart) {
                    disabledBool = false;
                  }
                  break;
                case 'End':
                  if(this.selectCfmPtEteEnd) {
                    disabledBool = false;
                  }
                  break;
                case 'Start & End':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd){
                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmPtEteSEStart && this.selectCfmPtEteSEEnd) 
                    || (this.selectCfmPtEteSEStart && !this.selectCfmPtEteSEEnd)) {
                      disabledBool = true;
                    }
                    else {
                      disabledBool = false;
                    }
                  }
                break;
              };
              break;
            case 'Partial':
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  if(this.selectCfmPtPStart) {
                    disabledBool = false;
                  }
                  break;
                case 'To':
                  if(this.selectCfmPtPEnd) {
                    disabledBool = false;
                  }
                  break;
                case 'From & To':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) {
                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmPtPSEStart && this.selectCfmPtPSEEnd) 
                    || (this.selectCfmPtPSEStart && !this.selectCfmPtPSEEnd)) {
                      disabledBool = true;
                    }
                    else {
                      disabledBool = false;
                    }
                  }
                break;
              };
              break;
          };
          break;
        case 'Waiting time': // Rule Type 選 Waiting time 的行為
          switch (this.selectedProcessScope) {
            case 'End to end':
              switch (this.selectedActSeqMore) {
                case 'Start':
                  if(this.selectCfmWtEteStart) {
                    disabledBool = false;
                  }
                  break;
                case 'End':
                  if(this.selectCfmWtEteEnd) {
                    disabledBool = false;
                  }
                  break;
                case 'Start & End':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) {
                      disabledBool = false;                      
                    } else {
                      if((!this.selectCfmWtEteSEStart && this.selectCfmWtEteSEEnd) 
                      || (this.selectCfmWtEteSEStart && !this.selectCfmWtEteSEEnd)) {
                        disabledBool = true;
                      }
                      else {
                        disabledBool = false;
                      }
                    }
                    break;
                };
                break;
              }
            case 'Partial':
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  if(this.selectCfmWtPStart) {
                    disabledBool = false;
                  }
                  break;
                case 'To':
                  if(this.selectCfmWtPEnd) {
                    disabledBool = false;
                  }
                  break;
                case 'From & To':
                  if(!this.isAlreadySubmit) {
                    if(this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) {
                      disabledBool = false;
                    }
                  } else {
                    if((!this.selectCfmWtPSEStart && this.selectCfmWtPSEEnd) 
                    || (this.selectCfmWtPSEStart && !this.selectCfmWtPSEEnd)) {
                      disabledBool = true;
                    }
                    else {
                      disabledBool = false;
                    }
                  }
                  break;
              };
              break;
          };
          break;
        case 'Cycle time': // Rule Type 選 Cycle time 的行為
          switch (this.selectedActSeqMore) {
            case 'All':
              disabledBool = false;
              break;
            case 'Start':
              if(this.selectCfmCtEteStart) {
                disabledBool = false;
              }
              break;
            case 'End':
              if(this.selectCfmCtEteEnd) {
                disabledBool = false;
              }
              break;
            case 'Start & End':
              if(!this.isAlreadySubmit) {
                if(this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) {
                  disabledBool = false;
                }
              } else {
                if((!this.selectCfmCtEteSEStart && this.selectCfmCtEteSEEnd) 
                || (this.selectCfmCtEteSEStart && !this.selectCfmCtEteSEEnd)) {
                  disabledBool = true;
                }
                else {
                  disabledBool = false;
                }
              }
              break;
          };
          break;
      };
      
      return this.isMainBtnDisabled = disabledBool;
      
    },
    ...mapState(ConformanceInputStore, ['activityRadioData']),
  },
  watch: {
    isSubmittedData: function(newValue) {
      this.isSubmittedData = newValue;
    },
    // 打開 rule 檔要顯示儲存的選項、規則、時間
    conformanceTempReportData: {
      handler: function(newValue) {
        setTimeout(() => {
          if(newValue !== null) {
            const rule = newValue.rule;

            this.isSubmittedData = newValue.rule;
            this.isAlreadySubmit = true;
            switch (rule.type) {
              case 'contains-tasks': // Rule Type 選 Have activity 的行為
                this.selectedRuleType = 'Have activity';
                this.isSubmitTask = rule.tasks;
                break;
              case 'start-end': // Rule Type 選 Activity sequence 的行為
                this.selectedRuleType = 'Activity sequence';
                this.selectedActivitySequence = 'Start & End';
                this.isSubmitStartAndEnd = [
                  {category: 'Start', task: rule.starts_with},
                  {category: 'End', task: rule.ends_with},
                ];
                break;
              case 'directly-follows': // Activity Sequence 選 Sequence 的行為
                this.selectedRuleType = 'Activity sequence';
                this.selectedActivitySequence = 'Sequence';
                this.selectedMode = 'Directly follows';
                this.isSubmitCfmSeqDirectly = rule.task_seq;
                break;
              case 'eventually-follows':
                this.selectedRuleType = 'Activity sequence';
                this.selectedActivitySequence = 'Sequence';
                this.selectedMode = 'Eventually follows';
                this.isSubmitCfmSeqEventually = rule.task_seq;
                break;
              case 'short-loops':
                this.selectedRuleType = 'Activity sequence';
                this.selectedActivitySequence = 'Sequence';
                this.selectedMode = 'Short loop(s)';
                break;
              case 'self-loops':
                this.selectedRuleType = 'Activity sequence';
                this.selectedActivitySequence = 'Sequence';
                this.selectedMode = 'Self loop(s)';
                break;
              case 'task-duration': // Rule Type 選 Activity duration 的行為
                this.selectedRuleType = 'Activity duration';
                this.selectDurationData = [rule.task];
                this.isSubmitDurationData = [rule.task];
                this.isSubmitDurationTime = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'All';
                this.isSubmitTimeCfmPtEteAll = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-end-to-end-starts-with':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start';
                this.selectCfmPtEteStart = rule.task;
                this.isSubmitCfmPtEteStart = [
                  {category: 'Start', task: rule.task}
                ];
                this.isSubmitTimeCfmPtEteStart = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-end-to-end-ends-with':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'End';
                this.selectCfmPtEteEnd = rule.task;
                this.isSubmitCfmPtEteEnd = [
                  {category: 'End', task: rule.task}
                ];
                this.isSubmitTimeCfmPtEteEnd = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-end-to-end-start-end':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start & End';
                this.isSubmitCfmPtEteSE = [
                  {category: 'Start', task: rule.start},
                  {category: 'End', task: rule.end}
                ];
                this.isSubmitTimeCfmPtEteSE = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                this.isSubmitShowDataPtEte = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
                break;
              case 'processing-time-partial-starts-with':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'From';
                this.selectCfmPtPStart = rule.task;
                this.isSubmitCfmPtPStart = [
                  {category: 'From', task: rule.task}
                ];
                this.isSubmitTimeCfmPtPStart = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-partial-ends-with':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'To';
                this.selectCfmPtPEnd = rule.task;
                this.isSubmitCfmPtPEnd = [
                  {category: 'To', task: rule.task}
                ];
                this.isSubmitTimeCfmPtPEnd = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'processing-time-partial-start-end':
                this.selectedRuleType = 'Processing time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'From & To';
                this.isSubmitCfmPtPSE = [
                  {category: 'From', task: rule.start},
                  {category: 'To', task: rule.end}
                ];
                this.isSubmitTimeCfmPtPSE = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                this.isSubmitShowDataPtP = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
                break;
              case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'All';
                this.isSubmitTimeCfmWtEteAll = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'waiting-time-end-to-end-starts-with':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start';
                this.selectCfmWtEteStart = rule.task;
                this.isSubmitCfmWtEteStart = [
                  {category: 'Start', task: rule.task}
                ];
                this.isSubmitTimeCfmWtEteStart = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'waiting-time-end-to-end-ends-with':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'End';
                this.selectCfmWtEteEnd = rule.task;
                this.isSubmitCfmWtEteEnd = [
                  {category: 'End', task: rule.task}
                ];
                this.isSubmitTimeCfmWtEteEnd = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'waiting-time-end-to-end-start-end':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start & End';
                this.isSubmitCfmWtEteSE = [
                  {category: 'Start', task: rule.start},
                  {category: 'End', task: rule.end}
                ];
                this.isSubmitTimeCfmWtEteSE = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                this.isSubmitShowDataWtEte = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
                break;
              case 'waiting-time-partial-starts-with':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'From';
                this.selectCfmWtPStart = rule.task;
                this.isSubmitCfmWtPStart = [
                  {category: 'From', task: rule.task}
                ];
                this.isSubmitTimeCfmWtPStart = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'waiting-time-partial-ends-with':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'To';
                this.selectCfmWtPEnd = rule.task;
                this.isSubmitCfmWtPEnd = [
                  {category: 'To', task: rule.task}
                ];
                this.isSubmitTimeCfmWtPEnd = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'waiting-time-partial-start-end':
                this.selectedRuleType = 'Waiting time';
                this.selectedProcessScope = 'Partial';
                this.selectedActSeqFromTo = 'From & To';
                this.isSubmitCfmWtPSE = [
                  {category: 'From', task: rule.start},
                  {category: 'To', task: rule.end}
                ];
                this.isSubmitTimeCfmWtPSE = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                this.isSubmitShowDataWtP = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
                break;
              case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為
                this.selectedRuleType = 'Cycle time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'All';
                this.isSubmitTimeCfmCtEteAll = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'cycle-time-end-to-end-starts-with':
                this.selectedRuleType = 'Cycle time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start';
                this.selectCfmCtEteStart = rule.task;
                this.isSubmitCfmCtEteStart = [
                  {category: 'Start', task: rule.task}
                ];
                this.isSubmitTimeCfmCtEteStart = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'cycle-time-end-to-end-ends-with':
                this.selectedRuleType = 'Cycle time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'End';
                this.selectCfmCtEteEnd = rule.task;
                this.isSubmitCfmCtEteEnd = [
                  {category: 'End', task: rule.task}
                ];
                this.isSubmitTimeCfmCtEteEnd = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                break;
              case 'cycle-time-end-to-end-start-end':
                this.selectedRuleType = 'Cycle time';
                this.selectedProcessScope = 'End to end';
                this.selectedActSeqMore = 'Start & End';
                this.isSubmitCfmCtEteSE = [
                  {category: 'Start', task: rule.start},
                  {category: 'End', task: rule.end}
                ];
                this.isSubmitTimeCfmCtEteSE = {
                  base: newValue.charts.time.x_axis,
                  rule: { min: rule.min, max: rule.max},
                };
                this.isSubmitShowDataCt = this.setSubmitShowDataByStartEnd(rule.start, rule.end);
                break;
            }
          }
        }, 300);
      },
    }
  },
  methods: {
    /**
     * get min total seconds
     * @param {Number} e 最小值總秒數
     */
     minTotalSeconds(e) {
      this.selectTimeRangeMin = e;
    },
    /**
     * get min total seconds
     * @param {Number} e 最大值總秒數
     */
    maxTotalSeconds(e) {
      this.selectTimeRangeMax = e;
    },
    /**
     * select Time Reset
     */
    selectTimeReset() {
      // 不包含 this.selectDurationTime
      this.selectConformanceTask = null; // Have activity
      this.selectConformanceStartAndEnd = null; // Activity Sequence
      this.selectCfmSeqStart = null;
      this.selectCfmSeqEnd = null;
      this.selectCfmSeqDirectly = [];
      this.selectCfmSeqEventually = [];
      this.selectDurationData = null; // Activity durations
      this.selectTimeRangeMin = 0; // Time Range min
      this.selectTimeRangeMax = 0; // Time Range max
      this.selectCfmPtEteStart = null; // Processing time
      this.selectCfmPtEteEnd = null;
      this.selectCfmPtEteSEStart = null;
      this.selectCfmPtEteSEEnd = null;
      this.selectCfmPtPStart = null;
      this.selectCfmPtPEnd = null;
      this.selectCfmPtPSEStart = null;
      this.selectCfmPtPSEEnd = null;
      this.selectCfmWtEteStart = null; // Waiting time
      this.selectCfmWtEteEnd = null;
      this.selectCfmWtEteSEStart = null;
      this.selectCfmWtEteSEEnd = null;
      this.selectCfmWtPStart = null;
      this.selectCfmWtPEnd = null;
      this.selectCfmWtPSEStart = null;
      this.selectCfmWtPSEEnd = null;
      this.selectCfmCtEteStart = null; // Cycle time
      this.selectCfmCtEteEnd = null;
      this.selectCfmCtEteSEStart = null;
      this.selectCfmCtEteSEEnd = null;
    },
    /**
     * is submit select Reset
     */
    isSubmitReset() {
      // 不包含 isSubmittedData
      this.isSubmitTask = null;
      this.isSubmitStartAndEnd = null;
      this.isSubmitCfmSeqDirectly = [];
      this.isSubmitCfmSeqEventually = [];
      this.isSubmitDurationData = null;
      this.isSubmitDurationTime = { base: {}, rule: {}};
      this.isSubmitCfmPtEteStart = null; // Processing time
      this.isSubmitCfmPtEteEnd = null;
      this.isSubmitCfmPtEteSE = null;
      this.isSubmitCfmPtPStart = null;
      this.isSubmitCfmPtPEnd = null;
      this.isSubmitCfmPtPSE = null;
      this.isSubmitCfmWtEteStart = null; // Waiting time
      this.isSubmitCfmWtEteEnd = null;
      this.isSubmitCfmWtEteSE = null;
      this.isSubmitCfmWtPStart = null;
      this.isSubmitCfmWtPEnd = null;
      this.isSubmitCfmWtPSE = null;
      this.isSubmitCfmCtEteStart = null; // Cycle time
      this.isSubmitCfmCtEteEnd = null;
      this.isSubmitCfmCtEteSE = null;
      this.isSubmitTimeCfmPtEteAll = { base: {}, rule: {}}; // Processing time Time Range
      this.isSubmitTimeCfmPtEteStart = { base: {}, rule: {}};
      this.isSubmitTimeCfmPtEteEnd = { base: {}, rule: {}};
      this.isSubmitTimeCfmPtEteSE = { base: {}, rule: {}};
      this.isSubmitTimeCfmPtPStart = { base: {}, rule: {}};
      this.isSubmitTimeCfmPtPEnd = { base: {}, rule: {}};
      this.isSubmitTimeCfmPtPSE = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtEteAll = { base: {}, rule: {}}; // Waiting time Time Range
      this.isSubmitTimeCfmWtEteStart = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtEteEnd = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtEteSE = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtPStart = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtPEnd = { base: {}, rule: {}};
      this.isSubmitTimeCfmWtPSE = { base: {}, rule: {}};
      this.isSubmitTimeCfmCtEteAll = { base: {}, rule: {}}; // Cycle time Time Range
      this.isSubmitTimeCfmCtEteStart = { base: {}, rule: {}};
      this.isSubmitTimeCfmCtEteEnd = { base: {}, rule: {}};
      this.isSubmitTimeCfmCtEteSE = { base: {}, rule: {}};
    },
    /**
     * 清空選單的行為
     */
     reset() {
      // Results page Cover Plate(遮罩為 ture)
      this.$emitter.emit('coverPlate', true);
      // is submit select Reset
      this.isSubmitReset();
      this.isSubmittedData = null; // 已 Apply 後，沒有重新改變規則的 Data
      this.isAlreadySubmit = false;

      // 其他子元件 reset
      this.selectTimeReset();
      this.$emitter.emit('reset', null);
      // reset 成功訊息
      this.$toast.success(i18next.t("Conformance.RuleCleared"));
      this.isShowBarOpen = true;
    },
    /**
     * 設定 Start & End Data 連動資料
     * @param {string} start task
     * @param {string} end task
     * @returns {object}
     */
    setSubmitShowDataByStartEnd(start, end) {
      if(this.isStartSelected) {
        return {
          task: start,
          taskStart: start,
          taskEnd: end,
          isStartSelected:true,
          isEndSelected: false
        };
      }else {
        return {
          task: end,
          taskStart: start,
          taskEnd: end,
          isStartSelected:false,
          isEndSelected: true
        };
      }
    },
    /**
     * Apply button 發送選項，取得 Check Id.
     */
    async submitConformance() {
      let dataToSave ;

      this.selectDurationTime = await {
        min: this.selectTimeRangeMin,
        max: this.selectTimeRangeMax
      };
      this.$emitter.emit('timeRangeMaxMin', this.selectDurationTime);

      switch (this.selectedRuleType) {
        case 'Have activity': // Rule Type 選 Have activity 的行為
          dataToSave = {
            type: 'contains-tasks',
            tasks: this.selectConformanceTask,
          };
          // 其他 isSubmittedData 為 null
          this.isSubmitReset();
          this.isSubmitTask = this.selectConformanceTask;
          break;
        case 'Activity sequence': // Rule Type 選 Activity sequence 的行為
          switch (this.selectedActivitySequence) {
            case 'Start & End': // Activity Sequence 選 Start & End 的行為
              dataToSave = {
                type: 'start-end',
                starts_with: this.selectCfmSeqStart,
                ends_with: this.selectCfmSeqEnd,
              };
              this.isSubmitReset();
              this.isSubmitStartAndEnd = [
                {category: 'Start', task: this.selectCfmSeqStart},
                {category: 'End', task: this.selectCfmSeqEnd},
              ];
              this.isSubmitShowDataSeq = this.setSubmitShowDataByStartEnd(this.selectCfmSeqStart, this.selectCfmSeqEnd);
              break;
            case 'Sequence': // Activity Sequence 選 Sequence 的行為
              switch (this.selectedMode) {
                case 'Directly follows':
                  dataToSave = {
                    type: 'directly-follows',
                    task_seq: this.selectCfmSeqDirectly,
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmSeqDirectly = JSON.parse(JSON.stringify(this.selectCfmSeqDirectly));
                  break;
                case 'Eventually follows':
                  dataToSave = {
                    type: 'eventually-follows',
                    task_seq: this.selectCfmSeqEventually,
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmSeqEventually = JSON.parse(JSON.stringify(this.selectCfmSeqEventually));
                  break;
                case 'Short loop(s)':
                  dataToSave = {
                    type: 'short-loops',
                  };
                  break;
                case 'Self loop(s)':
                  dataToSave = {
                    type: 'self-loops',
                  };
                  break;
                default:
                  break;
              };
            default:
              break;
          }
          break;
        case 'Activity duration': // Rule Type 選 Activity duration 的行為
          dataToSave = {
            type: 'task-duration',
            task: this.selectDurationData[0],
            min: this.selectDurationTime.min,
            max: this.selectDurationTime.max,
          };
          this.isSubmitReset();
          this.isSubmitDurationData = this.selectDurationData;
          this.isSubmitDurationTime.rule = this.selectDurationTime;
          break;
        case 'Processing time': // Rule Type 選 Processing time 的行為
          switch (this.selectedProcessScope) {
            case 'End to end':
              switch (this.selectedActSeqMore) {
                case 'All':
                  dataToSave = {
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-end-to-end-whole',
                  };
                  this.isSubmitReset();
                  this.isSubmitTimeCfmPtEteAll.rule = this.selectDurationTime;
                  break;
                case 'Start':
                  dataToSave = {
                    task: this.selectCfmPtEteStart,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-end-to-end-starts-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtEteStart =  [
                    {category: 'Start', task: this.selectCfmPtEteStart},
                  ];
                  this.isSubmitTimeCfmPtEteStart.rule = this.selectDurationTime;
                  break;
                case 'End':
                  dataToSave = {
                    task: this.selectCfmPtEteEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-end-to-end-ends-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtEteEnd =  [
                    {category: 'End', task: this.selectCfmPtEteEnd},
                  ];
                  this.isSubmitTimeCfmPtEteEnd.rule = this.selectDurationTime;
                  break;
                case 'Start & End':
                  dataToSave = {
                    start: this.selectCfmPtEteSEStart,
                    end: this.selectCfmPtEteSEEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-end-to-end-start-end',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtEteSE =  [
                    {category: 'Start', task: this.selectCfmPtEteSEStart},
                    {category: 'End', task: this.selectCfmPtEteSEEnd},
                  ];
                  this.isSubmitTimeCfmPtEteSE.rule = this.selectDurationTime;
                  this.isSubmitShowDataPtEte = this.setSubmitShowDataByStartEnd(this.selectCfmPtEteSEStart, this.selectCfmPtEteSEEnd);
                break;
              };
              break;
            case 'Partial':
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  dataToSave = {
                    task: this.selectCfmPtPStart,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-partial-starts-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtPStart =  [
                    {category: 'From', task: this.selectCfmPtPStart},
                  ];
                  this.isSubmitTimeCfmPtPStart.rule = this.selectDurationTime;
                  break;
                case 'To':
                  dataToSave = {
                    task: this.selectCfmPtPEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-partial-ends-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtPEnd =  [
                    {category: 'To', task: this.selectCfmPtPEnd},
                  ];
                  this.isSubmitTimeCfmPtPEnd.rule = this.selectDurationTime;
                  break;
                case 'From & To':
                  // If user didn't click any start-end radio button this time,
                  // the start, end value might be null as their initial values are.
                  // So we need to use the earliest value stored in pinia.
                  dataToSave = {
                    start: this.selectCfmPtPSEStart ? this.selectCfmPtPSEStart : this.activityRadioData.task[0],
                    end: this.selectCfmPtPSEEnd ? this.selectCfmPtPSEEnd : this.activityRadioData.task[this.activityRadioData.task.length - 1],
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'processing-time-partial-start-end',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmPtPSE =  [
                    {category: 'From', task: this.selectCfmPtPSEStart},
                    {category: 'To', task: this.selectCfmPtPSEEnd},
                  ];
                  this.isSubmitTimeCfmPtPSE.rule = this.selectDurationTime;
                  this.isSubmitShowDataPtP = this.setSubmitShowDataByStartEnd(this.selectCfmPtPSEStart, this.selectCfmPtPSEEnd);
                break;
                default:
                  break;
              };
              break;
            default:
              break;
          };
          break;
        case 'Waiting time': // Rule Type 選 Waiting time 的行為
          switch (this.selectedProcessScope) {
            case 'End to end':
              switch (this.selectedActSeqMore) {
                case 'All':
                  dataToSave = {
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-end-to-end-whole',
                  };
                  this.isSubmitReset();
                  this.isSubmitTimeCfmWtEteAll.rule = this.selectDurationTime;
                  break;
                case 'Start':
                  dataToSave = {
                    task: this.selectCfmWtEteStart,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-end-to-end-starts-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtEteStart =  [
                    {category: 'Start', task: this.selectCfmWtEteStart},
                  ];
                  this.isSubmitTimeCfmWtEteStart.rule = this.selectDurationTime;
                  break;
                case 'End':
                  dataToSave = {
                    task: this.selectCfmWtEteEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-end-to-end-ends-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtEteEnd =  [
                    {category: 'End', task: this.selectCfmWtEteEnd},
                  ];
                  this.isSubmitTimeCfmWtEteEnd.rule = this.selectDurationTime;
                  break;
                case 'Start & End':
                  dataToSave = {
                    start: this.selectCfmWtEteSEStart,
                    end: this.selectCfmWtEteSEEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-end-to-end-start-end',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtEteSE =  [
                    {category: 'Start', task: this.selectCfmWtEteSEStart},
                    {category: 'End', task: this.selectCfmWtEteSEEnd},
                  ];
                  this.isSubmitTimeCfmWtEteSE.rule = this.selectDurationTime;
                  this.isSubmitShowDataWtEte = this.setSubmitShowDataByStartEnd(this.selectCfmWtEteSEStart, this.selectCfmWtEteSEEnd);
                  break;
                default:
                  break;
              };
              break;
            case 'Partial':
              switch (this.selectedActSeqFromTo) {
                case 'From':
                  dataToSave = {
                    task: this.selectCfmWtPStart,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-partial-starts-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtPStart =  [
                    {category: 'From', task: this.selectCfmWtPStart},
                  ];
                  this.isSubmitTimeCfmWtPStart.rule = this.selectDurationTime;
                  break;
                case 'To':
                  dataToSave = {
                    task: this.selectCfmWtPEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-partial-ends-with',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtPEnd =  [
                    {category: 'To', task: this.selectCfmWtPEnd},
                  ];
                  this.isSubmitTimeCfmWtPEnd.rule = this.selectDurationTime;
                  break;
                case 'From & To':
                  dataToSave = {
                    start: this.selectCfmWtPSEStart,
                    end: this.selectCfmWtPSEEnd,
                    min: this.selectDurationTime.min,
                    max: this.selectDurationTime.max,
                    type: 'waiting-time-partial-start-end',
                  };
                  this.isSubmitReset();
                  this.isSubmitCfmWtPSE =  [
                    {category: 'From', task: this.selectCfmWtPSEStart},
                    {category: 'To', task: this.selectCfmWtPSEEnd},
                  ];
                  this.isSubmitTimeCfmWtPSE.rule = this.selectDurationTime;
                  this.isSubmitShowDataWtP = this.setSubmitShowDataByStartEnd(this.selectCfmWtPSEStart, this.selectCfmWtPSEEnd);
                  break;
                default:
                  break;
              };
              break;
            default:
              break;
          };
          break;
        case 'Cycle time': // Rule Type 選 Cycle time 的行為
          switch (this.selectedActSeqMore) {
            case 'All':
              dataToSave = {
                min: this.selectDurationTime.min,
                max: this.selectDurationTime.max,
                type: 'cycle-time-end-to-end-whole',
              };
              this.isSubmitReset();
              this.isSubmitTimeCfmCtEteAll.rule = this.selectDurationTime;
              break;
            case 'Start':
              dataToSave = {
                task: this.selectCfmCtEteStart,
                min: this.selectDurationTime.min,
                max: this.selectDurationTime.max,
                type: 'cycle-time-end-to-end-starts-with',
              };
              this.isSubmitReset();
              this.isSubmitCfmCtEteStart =  [
                {category: 'Start', task: this.selectCfmCtEteStart},
              ];
              this.isSubmitTimeCfmCtEteStart.rule = this.selectDurationTime;
              break;
            case 'End':
              dataToSave = {
                task: this.selectCfmCtEteEnd,
                min: this.selectDurationTime.min,
                max: this.selectDurationTime.max,
                type: 'cycle-time-end-to-end-ends-with',
              };
              this.isSubmitReset();
              this.isSubmitCfmCtEteEnd =  [
                {category: 'End', task: this.selectCfmCtEteEnd},
              ];
              this.isSubmitTimeCfmCtEteEnd.rule = this.selectDurationTime;
              break;
            case 'Start & End':
              dataToSave = {
                start: this.selectCfmCtEteSEStart,
                end: this.selectCfmCtEteSEEnd,
                min: this.selectDurationTime.min,
                max: this.selectDurationTime.max,
                type: 'cycle-time-end-to-end-start-end',
              };
              this.isSubmitReset();
              this.isSubmitCfmCtEteSE =  [
                {category: 'Start', task: this.selectCfmCtEteSEStart},
                {category: 'End', task: this.selectCfmCtEteSEEnd},
              ];
              this.isSubmitTimeCfmCtEteSE.rule = this.selectDurationTime;
              this.isSubmitShowDataCt = this.setSubmitShowDataByStartEnd(this.selectCfmCtEteSEStart, this.selectCfmCtEteSEEnd);
              break;
            default:
              break;
          };
          break;
      };
      if(dataToSave.min > dataToSave.max) {
        return this.$toast.error(i18next.t("Conformance.PleaseCheckTimeRange"));
      }
      if(JSON.stringify(dataToSave) === JSON.stringify(this.isSubmittedData)) {
        return this.$toast.error(i18next.t("Conformance.PleaseSetNewRule"));
      }

      this.isLoading = true;
      this.isAlreadySubmit = true;
      this.isSubmittedData = dataToSave; // 已 Apply 後，沒有重新改變規則的 Data
      this.conformanceRuleData = dataToSave; // 給存檔的 Data
      await this.conformanceStore.addConformanceCheckId(dataToSave);
      await this.conformanceStore.getConformanceReport();
      this.isShowBarOpen = false;
      this.isLoading = false;
      // Results page Cover Plate
      this.$emitter.emit('coverPlate', false);
      this.$toast.success(i18next.t("Conformance.RuleApplied"));
    },
    setTaskByCategoryOnRadioEmitting () {
      this.$emitter.on('actRadioData', (data) => {
        switch (data.category) {
          // Activity sequence
          case 'cfmSeqStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmSeqStart) this.selectCfmSeqEnd = null;
            this.selectCfmSeqStart = data.task;
            break;
          case 'cfmSeqEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmSeqEnd) this.selectCfmSeqStart = null;
            this.selectCfmSeqEnd = data.task;
            break;
          // Processing time
          case 'cfmPtEteStart':
            this.selectCfmPtEteStart = data.task;
            break;
          case 'cfmPtEteEnd':
            this.selectCfmPtEteEnd = data.task;
            break;
          case 'cfmPtEteSEStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmPtEteSEStart) this.selectCfmPtEteSEEnd = null;
            this.selectCfmPtEteSEStart = data.task;
            break;
          case 'cfmPtEteSEEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmPtEteSEEnd) this.selectCfmPtEteSEStart = null;
            this.selectCfmPtEteSEEnd = data.task;
            break;
          case 'cfmPtPStart':
            this.selectCfmPtPStart = data.task;
            break;
          case 'cfmPtPEnd':
            this.selectCfmPtPEnd = data.task;
            break;
          case 'cfmPtPSEStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) {
              this.selectCfmPtPSEEnd = null;
            }
            this.selectCfmPtPSEStart = data.task;
            break;
          case 'cfmPtPSEEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd) {
              this.selectCfmPtPSEStart = null;
            }
            this.selectCfmPtPSEEnd = data.task;
            break;
          // Waiting time
          case 'cfmWtEteStart':
            this.selectCfmWtEteStart = data.task;
            break;
          case 'cfmWtEteEnd':
            this.selectCfmWtEteEnd = data.task;
            break;
          case 'cfmWtEteSEStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) {
              this.selectCfmWtEteSEEnd = null;
            }
            this.selectCfmWtEteSEStart = data.task;
            break;
          case 'cfmWtEteSEEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd) {
              this.selectCfmWtEteSEStart = null;
            }
            this.selectCfmWtEteSEEnd = data.task;
            break;
          case 'cfmWtPStart':
            this.selectCfmWtPStart = data.task;
            break;
          case 'cfmWtPEnd':
            this.selectCfmWtPEnd = data.task;
            break;
          case 'cfmWtPSEStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmWtPSEStart) this.selectCfmWtPSEEnd = null;
            this.selectCfmWtPSEStart = data.task;
            break;
          case 'cfmWtPSEEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmWtPSEEnd) this.selectCfmWtPSEStart = null;
            this.selectCfmWtPSEEnd = data.task;
            break;
          // Cycle time
          case 'cfmCtEteStart':
            this.selectCfmCtEteStart = data.task;
            break;
          case 'cfmCtEteEnd':
            this.selectCfmCtEteEnd = data.task;
            break;
          case 'cfmCtEteSEStart':
            if(this.isStartSelected === true && data.task !== this.selectCfmCtEteSEStart) this.selectCfmCtEteSEEnd = null;
            this.selectCfmCtEteSEStart = data.task;
            break;
          case 'cfmCtEteSEEnd':
            if(this.isEndSelected === true && data.task !== this.selectCfmCtEteSEEnd) this.selectCfmCtEteSEStart = null;
            this.selectCfmCtEteSEEnd = data.task;
            break;
          default:
            if(this.selectedRuleType === 'Activity duration') {
              this.selectDurationData = [data.task];
            };
            break;
        };
      });
    },
    setTaskByCategoryOnListSeqEmitting(){
      this.$emitter.on('getListSequence', (data) => {
        switch (data.category) {
          case 'cfmSeqDirectly':
            this.selectCfmSeqDirectly = data.task;
            break;
          case 'cfmSeqEventually':
            this.selectCfmSeqEventually = data.task;
            break;
          default:
            break;
        }
      });
    },
   ...mapActions(ConformanceInputStore, [''])
  },
  created() {
    this.isShowBarOpen = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true;
    // 選取 list 的結果
    this.$emitter.on('actListData', (data) => {
      this.selectConformanceTask = data;
    });

    this.setTaskByCategoryOnRadioEmitting();
    this.setTaskByCategoryOnListSeqEmitting();
    
    // Radio 切換時，資料要清空
    this.$emitter.on('isRadioChange', (data) => {
      if(data) {
        this.selectTimeReset();
        this.selectDurationTime = { min: 0, max: 0};
      };
    });
    this.$emitter.on('isRadioSeqChange', (data) => {
      if(data) {
        this.selectTimeReset();
      };
    });
    this.$emitter.on('isRadioProcessScopeChange', (data) => {
      if(data) {
        this.selectTimeReset();
        this.selectDurationTime = { min: 0, max: 0};
      };
    });
    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
      if(data) {
        this.selectTimeReset();
        if(this.selectedActSeqMore !== 'All') this.selectDurationTime = { min: 0, max: 0};
      };
    });
    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
      if(data) {
        this.selectTimeReset();
        this.selectDurationTime = { min: 0, max: 0};
      };
    });
  },
  beforeUnmount() {
    this.isSubmitReset();
    this.selectTimeReset();
  },
}
</script>
<style>
.text-shadow{
  text-shadow: 1.5px 1px 8px black;
}
</style>
