<template>
  <section class="animate-fadein w-full h-full" >
    <!-- Have activity -->
    <ActList v-if="selectedRuleType === 'Have activity'" :data="conformanceTask" :select="isSubmitTask"></ActList>
    <!-- Activity sequence  -->
    <div v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start activity'" :select="isSubmitStartAndEnd?.[0].task" :data="cfmSeqStartData" :category="'cfmSeqStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
      <ActRadio :title="'End activity'" :select="isSubmitStartAndEnd?.[1].task" :data="cfmSeqEndData" :category="'cfmSeqEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
    </div>
    <!-- actSeqDrag -->
    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqDirectly" :isSubmit="isSubmit" :category="'cfmSeqDirectly'"></ActSeqDrag>
    <ActSeqDrag v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="conformanceTask" :listSeq="isSubmitCfmSeqEventually" :isSubmit="isSubmit" :category="'cfmSeqEventually'"></ActSeqDrag>
    <!-- Activity duration -->
    <ActRadio v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :select="isSubmitDurationData?.[0]" :data="conformanceTask" :category="'cfmDur'" :isSubmit="isSubmit"/>
    <!-- Processing time -->
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmPtEteStart?.[0].task" :data="cfmPtEteStartData" :category="'cfmPtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmPtEteEnd?.[0].task" :data="cfmPtEteEndData" :category="'cfmPtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmPtEteSE?.[0].task" :data="cfmPtEteSEStartData" :category="'cfmPtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" class="w-1/2" />
      <ActRadio :title="'End'" :select="isSubmitCfmPtEteSE?.[1].task" :data="cfmPtEteSEEndData" :category="'cfmPtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" class="w-1/2" />
    </div>
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmPtPStart?.[0].task" :data="cfmPtPStartData" :category="'cfmPtPStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmPtPEnd?.[0].task" :data="cfmPtPEndData" :category="'cfmPtPEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'From'" :select="isSubmitCfmPtPSE?.[0].task" :data="cfmPtPSEStartData" class="w-1/2" :category="'cfmPtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'To'" :select="isSubmitCfmPtPSE?.[1].task" :data="cfmPtPSEEndData" class="w-1/2" :category="'cfmPtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
    <!-- Waiting time -->
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmWtEteStart?.[0].task" :data="cfmWtEteStartData" :category="'cfmWtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmWtEteEnd?.[0].task" :data="cfmWtEteEndData" :category="'cfmWtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmWtEteSE?.[0].task" :data="cfmWtEteSEStartData" class="w-1/2" :category="'cfmWtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'End'" :select="isSubmitCfmWtEteSE?.[1].task" :data="cfmWtEteSEEndData" class="w-1/2" :category="'cfmWtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :title="'From'" :select="isSubmitCfmWtPStart?.[0].task" :data="cfmWtPStartData" :category="'cfmWtPStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :title="'To'" :select="isSubmitCfmWtPEnd?.[0].task" :data="cfmWtPEndData" :category="'cfmWtPEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'From'" :select="isSubmitCfmWtPSE?.[0].task" :data="cfmWtPSEStartData" class="w-1/2" :category="'cfmWtPSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'To'" :select="isSubmitCfmWtPSE?.[1].task" :data="cfmWtPSEEndData" class="w-1/2" :category="'cfmWtPSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
    <!-- Cycle time -->
    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :title="'Start'" :select="isSubmitCfmCtEteStart?.[0].task" :data="cfmCtEteStartData" :category="'cfmCtEteStart'" :isSubmit="isSubmit" />
    <ActRadio v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :title="'End'" :select="isSubmitCfmCtEteEnd?.[0].task" :data="cfmCtEteEndData" :category="'cfmCtEteEnd'" :isSubmit="isSubmit" />
    <div v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" class="flex justify-between items-center w-full h-full">
      <ActRadio :title="'Start'" :select="isSubmitCfmCtEteSE?.[0].task" :data="cfmCtEteSEStartData" class="w-1/2" :category="'cfmCtEteSEStart'" :task="taskStart" :isSubmit="isSubmit" @selected-task="selectStart" />
      <ActRadio :title="'End'" :select="isSubmitCfmCtEteSE?.[1].task" :data="cfmCtEteSEEndData" class="w-1/2" :category="'cfmCtEteSEEnd'" :task="taskEnd" :isSubmit="isSubmit" @selected-task="selectEnd" />
    </div>
  </section>
</template>
<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import ConformanceStore from '@/stores/conformance.js';
import ActList from './ActList.vue';
import ActRadio from './ActRadio.vue';
import ActSeqDrag from './ActSeqDrag.vue';

export default {
  setup() {
    const loadingStore = LoadingStore();
    const conformanceStore = ConformanceStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);

    return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceTask, cfmSeqStart, cfmSeqEnd, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE,  cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected}
  },
  props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE', 'isSubmitShowDataSeq', 'isSubmitShowDataPtEte', 'isSubmitShowDataPtP', 'isSubmitShowDataWtEte', 'isSubmitShowDataWtP', 'isSubmitShowDataCt'],
  components: {
    ActList,
    ActRadio,
    ActSeqDrag
  },
  data() {
    return {
      task: null,
      taskStart: null,
      taskEnd: null,
    }
  },
  computed: {
    // Activity sequence
    cfmSeqStartData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
      return this.isEndSelected ? this.setSeqStartAndEndData(this.cfmSeqEnd, 'sources', this.task) : this.cfmSeqStart.map(i => i.label);
    },
    cfmSeqEndData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataSeq.task;
      return this.isStartSelected ? this.setSeqStartAndEndData(this.cfmSeqStart, 'sinks', this.task) : this.cfmSeqEnd.map(i => i.label);
    },
    // Processing time
    cfmPtEteStartData: function() {
      return this.cfmPtEteStart.map(i => i.task);
    },
    cfmPtEteEndData: function() {
      return this.cfmPtEteEnd.map(i => i.task);
    },
    cfmPtEteSEStartData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'end', this.task) : this.setTaskData(this.cfmPtEteSE, 'start');
    },
    cfmPtEteSEEndData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataPtEte.task;
      return this.isStartSelected ? this.setStartAndEndData(this.cfmPtEteSE, 'start', this.task) : this.setTaskData(this.cfmPtEteSE, 'end');
    },
    cfmPtPStartData: function() {
      return this.cfmPtPStart.map(i => i.task);
    },
    cfmPtPEndData: function() {
      return this.cfmPtPEnd.map(i => i.task);
    },
    cfmPtPSEStartData: function() {
      if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
      return this.isEndSelected ? this.setStartAndEndData(this.cfmPtPSE, 'end', this.task) : this.setTaskData(this.cfmPtPSE, 'start');
    },
    cfmPtPSEEndData: function() {
      if(this.isSubmit && this.task === null) this.task = this.isSubmitShowDataPtP.task;
      return this.isStartSelected ? this.setStartAndEndData(this.cfmPtPSE, 'start', this.task) : this.setTaskData(this.cfmPtPSE, 'end');
    },
    // Waiting time
    cfmWtEteStartData: function() {
      return this.cfmWtEteStart.map(i => i.task);
    },
    cfmWtEteEndData: function() {
      return this.cfmWtEteEnd.map(i => i.task);
    },
    cfmWtEteSEStartData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'end', this.task) : this.setTaskData(this.cfmWtEteSE, 'start');
    },
    cfmWtEteSEEndData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtEte.task;
      return this.isStartSelected ? this.setStartAndEndData(this.cfmWtEteSE, 'start', this.task) : this.setTaskData(this.cfmWtEteSE, 'end');
    },
    cfmWtPStartData: function() {
      return this.cfmWtPStart.map(i => i.task);
    },
    cfmWtPEndData: function() {
      return this.cfmWtPEnd.map(i => i.task);
    },
    cfmWtPSEStartData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
      return this.isEndSelected ? this.setStartAndEndData(this.cfmWtPSE, 'end', this.task) : this.setTaskData(this.cfmWtPSE, 'start');
    },
    cfmWtPSEEndData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataWtP.task;
      return this.isStartSelected ? this.setStartAndEndData(this.cfmWtPSE, 'start', this.task) : this.setTaskData(this.cfmWtPSE, 'end');
    },
    // Cycle time
    cfmCtEteStartData: function() {
      return this.cfmCtEteStart.map(i => i.task);
    },
    cfmCtEteEndData: function() {
      return this.cfmCtEteEnd.map(i => i.task);
    },
    cfmCtEteSEStartData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
      return this.isEndSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'end', this.task) : this.setTaskData(this.cfmCtEteSE, 'start');
    },
    cfmCtEteSEEndData: function() {
      if(this.isSubmit && this.task === null)this.task = this.isSubmitShowDataCt.task;
      return this.isStartSelected ? this.setStartAndEndData(this.cfmCtEteSE, 'start', this.task) : this.setTaskData(this.cfmCtEteSE, 'end');
    },
  },
  watch: { // 解決儲存後的 Rule 檔，無法重新更改規則之問題
    isSubmitShowDataSeq: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
    isSubmitShowDataPtEte: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
    isSubmitShowDataPtP: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
    isSubmitShowDataWtEte: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
    isSubmitShowDataWtP: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
    isSubmitShowDataCt: {
      handler: function(newValue) {
        this.taskStart = newValue.taskStart;
        this.taskEnd = newValue.taskEnd;
      }
    },
  },
  methods: {
    /**
     * 設定 start and end 的 Radio Data
     * @param {object} data cfmSeqStart | cfmSeqEnd | cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，傳入以上任一後端接到的 Activities 列表 Data。
     * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
     * @returns {array}
     */
    setTaskData(data, category) {
      let newData = data.map(i => i[category]);
      newData = [...new Set(newData)]; // Set 是一種集合型別，只會儲存獨特的值。
      return newData;
    },
    /**
     * 重新設定連動的 start and end 的 Radio Data
     * @param {object} data cfmPtEteSE | cfmPtPSE | cfmWtEteSE | cfmWtPSE | cfmCtEteSE，傳入以上任一後端接到的 Activities 列表 Data。
     * @param {string} category 'start' | 'end'，傳入 'start' 或 'end'。
     * @param {string} task 已選擇的 Activity task
     * @returns {array}
     */
    setStartAndEndData(data, category, task) {
      let oppositeCategory = '';
      category === 'start' ? oppositeCategory = 'end' : oppositeCategory = 'start';
      let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]);
      newData = [...new Set(newData)];
      return newData;
    },
    /**
     * 重新設定 Activity sequence 連動的 start and end 的 Radio Data
     * @param {object} data cfmSeqStart | cfmSeqEnd，傳入以上任一後端接到的 Activities 列表 Data。
     * @param {string} category 'sources' | 'sinks'，傳入 'sources' 或 'sinks'。
     * @param {string} task 已選擇的 Activity task
     * @returns {array}
     */
    setSeqStartAndEndData(data, category, task) {
      let newData = data.filter(i => i.label === task).map(i => i[category]);
      newData = [...new Set(...newData)];
      return newData;
    },
    /**
     * select start list's task
     * @param {event} e 觸發 input 的詳細事件
     */
    selectStart(e) {
      this.taskStart = e;
      if(this.isStartSelected === null || this.isStartSelected === true){
        this.isStartSelected = true;
        this.isEndSelected = false;
        this.task = e;
        this.taskEnd = null;
        this.$emitter.emit('sratrAndEndToStart', {
          start: true,
          end: false,
        });
      };
    },
    /**
     * select End list's task
     * @param {event} e 觸發 input 的詳細事件
     */
    selectEnd(e) {
      this.taskEnd = e;
      if(this.isEndSelected === null || this.isEndSelected === true){
        this.isEndSelected = true;
        this.isStartSelected = false;
        this.task = e;
        this.taskStart = null;
        this.$emitter.emit('sratrAndEndToStart', {
          start: false,
          end: true,
        });
      }
    },
    /**
     * reset all data.
     */
    reset() {
      this.task = null;
      this.isStartSelected = null;
      this.isEndSelected = null;
      this.taskStart = null;
      this.taskEnd = null;
    },
    /**
     * Radio 切換時，Start & End Data 連動改變
     * @param {boolean} data true | false，傳入 true 或 false
     */
    setResetData(data) {
      if(data) {
        if(this.isSubmit) {
          switch (this.selectedRuleType) {
            case 'Activity sequence':
              this.task = this.isSubmitShowDataSeq.task;
              this.isStartSelected = this.isSubmitShowDataSeq.isStartSelected;
              this.isEndSelected = this.isSubmitShowDataSeq.isEndSelected;
              // this.taskStart = this.isSubmitShowDataSeq.taskStart;
              // this.taskEnd = this.isSubmitShowDataSeq.taskEnd;
              break;
            case 'Processing time':
              switch (this.selectedProcessScope) {
                case 'End to end':
                  this.task = this.isSubmitShowDataPtEte.task;
                  this.isStartSelected = this.isSubmitShowDataPtEte.isStartSelected;
                  this.isEndSelected = this.isSubmitShowDataPtEte.isEndSelected;
                  // this.taskStart = this.isSubmitShowDataPtEte.taskStart;
                  // this.taskEnd = this.isSubmitShowDataPtEte.taskEnd;
                  break;
                case 'Partial':
                  this.task = this.isSubmitShowDataPtP.task;
                  this.isStartSelected = this.isSubmitShowDataPtP.isStartSelected;
                  this.isEndSelected = this.isSubmitShowDataPtP.isEndSelected;
                  // this.taskStart = this.isSubmitShowDataPtP.taskStart;
                  // this.taskEnd = this.isSubmitShowDataPtP.taskEnd;
                  break;
                default:
                  break;
              }
              break;
            case 'Waiting time':
            switch (this.selectedProcessScope) {
                case 'End to end':
                  this.task = this.isSubmitShowDataWtEte.task;
                  this.isStartSelected = this.isSubmitShowDataWtEte.isStartSelected;
                  this.isEndSelected = this.isSubmitShowDataWtEte.isEndSelected;
                  // this.taskStart = this.isSubmitShowDataWtEte.taskStart;
                  // this.taskEnd = this.isSubmitShowDataWtEte.taskEnd;
                  break;
                case 'Partial':
                  this.task = this.isSubmitShowDataWtP.task;
                  this.isStartSelected = this.isSubmitShowDataWtP.isStartSelected;
                  this.isEndSelected = this.isSubmitShowDataWtP.isEndSelected;
                  // this.taskStart = this.isSubmitShowDataWtP.taskStart;
                  // this.taskEnd = this.isSubmitShowDataWtP.taskEnd;
                  break;
                default:
                  break;
              }
            case 'Cycle time':
              this.task = this.isSubmitShowDataCt.task;
              this.isStartSelected = this.isSubmitShowDataCt.isStartSelected;
              this.isEndSelected = this.isSubmitShowDataCt.isEndSelected;
              // this.taskStart = this.isSubmitShowDataCt.taskStart;
              // this.taskEnd = this.isSubmitShowDataCt.taskEnd;
              break;
            default:
              break;
          }
        } else {
          this.reset();
        }
      }
    }
  },
  created() {
    this.$emitter.on('isRadioChange', (data) => {
      this.setResetData(data);
    });
    this.$emitter.on('isRadioSeqChange', (data) => {
      this.setResetData(data);
    });
    this.$emitter.on('isRadioProcessScopeChange', (data) => {
      if(data) {
        this.setResetData(data);
      };
    });
    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
      if(data) {
        this.setResetData(data);
      };
    });
    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
      if(data) {
        this.setResetData(data);
      };
    });
    this.$emitter.on('reset', data => {
      this.reset();
    });
  }
}
</script>
