<template>
  <div class="px-4 text-sm">
    <!-- Have activity -->
    <ResultCheck v-if="selectedRuleType === 'Have activity'" :data="containstTasksData" :select="isSubmitTask"></ResultCheck>
    <!-- Activity sequence  -->
    <ResultDot v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Start & End'" :timeResultData="selectCfmSeqSE" :select="isSubmitStartAndEnd"></ResultDot>
    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Directly follows'" :data="selectCfmSeqDirectly" :select="isSubmitCfmSeqDirectly"></ResultArrow>
    <ResultArrow v-if="selectedRuleType === 'Activity sequence' && selectedActivitySequence === 'Sequence' && selectedMode === 'Eventually follows'" :data="selectCfmSeqEventually" :select="isSubmitCfmSeqEventually"></ResultArrow>
    <!-- Activity duration -->
    <ResultCheck v-if="selectedRuleType === 'Activity duration'" :title="'Activities include'" :data="durationData" :select="isSubmitDurationData"></ResultCheck>
    <!-- Processing time -->
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmPtEteStart" :select="isSubmitCfmPtEteStart"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmPtEteEnd" :select="isSubmitCfmPtEteEnd"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmPtEteSE" :select="isSubmitCfmPtEteSE"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmPtPStart" :select="isSubmitCfmPtPStart"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmPtPEnd" :select="isSubmitCfmPtPEnd"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Processing time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmPtPSE" :select="isSubmitCfmPtPSE"></ResultDot>
    <!-- Waiting time -->
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmWtEteStart" :select="isSubmitCfmWtEteStart"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmWtEteEnd" :select="isSubmitCfmWtEteEnd"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmWtEteSE" :select="isSubmitCfmWtEteSE"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From'" :timeResultData="selectCfmWtPStart" :select="isSubmitCfmWtPStart"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'To'" :timeResultData="selectCfmWtPEnd" :select="isSubmitCfmWtPEnd"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Waiting time' && selectedProcessScope === 'Partial' && selectedActSeqFromTo === 'From & To'" :timeResultData="selectCfmWtPSE" :select="isSubmitCfmWtPSE"></ResultDot>
    <!-- Cycle time -->
    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start'" :timeResultData="selectCfmCtEteStart" :select="isSubmitCfmCtEteStart"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'End'" :timeResultData="selectCfmCtEteEnd" :select="isSubmitCfmCtEteEnd"></ResultDot>
    <ResultDot v-if="selectedRuleType === 'Cycle time' && selectedProcessScope === 'End to end' && selectedActSeqMore === 'Start & End'" :timeResultData="selectCfmCtEteSE" :select="isSubmitCfmCtEteSE"></ResultDot>
  </div>
</template>
<script>
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
import ResultCheck from '@/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue';
import ResultArrow from '@/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue';
import ResultDot from '@/components/Discover/Conformance/ConformanceSidebar/ResultDot.vue';

export default {
  setup() {
    const conformanceStore = ConformanceStore();
    const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected } = storeToRefs(conformanceStore);

    return { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, isStartSelected, isEndSelected }
  },
  props: ['isSubmit', 'isSubmitTask', 'isSubmitStartAndEnd', 'isSubmitCfmSeqDirectly', 'isSubmitCfmSeqEventually', 'isSubmitDurationData', 'isSubmitCfmPtEteStart', 'isSubmitCfmPtEteEnd', 'isSubmitCfmPtEteSE', 'isSubmitCfmPtPStart', 'isSubmitCfmPtPEnd', 'isSubmitCfmPtPSE', 'isSubmitCfmWtEteStart', 'isSubmitCfmWtEteEnd', 'isSubmitCfmWtEteSE', 'isSubmitCfmWtPStart', 'isSubmitCfmWtPEnd', 'isSubmitCfmWtPSE', 'isSubmitCfmCtEteStart', 'isSubmitCfmCtEteEnd', 'isSubmitCfmCtEteSE'],
  components: {
    ResultCheck,
    ResultArrow,
    ResultDot,
  },
  data() {
    return {
      containstTasksData: null,
      startEndData: null,
      selectCfmSeqStart: null,
      selectCfmSeqEnd: null,
      selectCfmSeqDirectly: [],
      selectCfmSeqEventually: [],
      durationData: null,
      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,
      startAndEndIsReset: false,
    }
  },
  computed: {
    selectCfmSeqSE: function() {
      let data = [];
      if(this.selectCfmSeqStart) data.push(this.selectCfmSeqStart);
      if(this.selectCfmSeqEnd) data.push(this.selectCfmSeqEnd);
      data.sort((a, b) => {
        const order = { 'Start': 1, 'End': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
    selectCfmPtEteSE: function() {
      let data = [];
      if(this.selectCfmPtEteSEStart) data.push(this.selectCfmPtEteSEStart);
      if(this.selectCfmPtEteSEEnd) data.push(this.selectCfmPtEteSEEnd);
      data.sort((a, b) => {
        const order = { 'Start': 1, 'End': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
    selectCfmPtPSE: function() {
      let data = [];
      if(this.selectCfmPtPSEStart) data.push(this.selectCfmPtPSEStart);
      if(this.selectCfmPtPSEEnd) data.push(this.selectCfmPtPSEEnd);
      data.sort((a, b) => {
        const order = { 'From': 1, 'To': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
    selectCfmWtEteSE: function() {
      let data = [];
      if(this.selectCfmWtEteSEStart) data.push(this.selectCfmWtEteSEStart);
      if(this.selectCfmWtEteSEEnd) data.push(this.selectCfmWtEteSEEnd);
      data.sort((a, b) => {
        const order = { 'Start': 1, 'End': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
    selectCfmWtPSE: function() {
      let data = [];
      if(this.selectCfmWtPSEStart) data.push(this.selectCfmWtPSEStart);
      if(this.selectCfmWtPSEEnd) data.push(this.selectCfmWtPSEEnd);
      data.sort((a, b) => {
        const order = { 'From': 1, 'To': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
    selectCfmCtEteSE: function() {
      let data = [];
      if(this.selectCfmCtEteSEStart) data.push(this.selectCfmCtEteSEStart);
      if(this.selectCfmCtEteSEEnd) data.push(this.selectCfmCtEteSEEnd);
      data.sort((a, b) => {
        const order = { 'Start': 1, 'End': 2};
        return order[a.category] - order[b.category];
      });
      return data;
    },
  },
  methods: {
    /**
     * set Time Result Data
     * @param   {array} data
     * @returns {array}
     * timeResultData: [
     *  {
     *    id: 1,
     *    category: 'start', start|end|from|to
     *    task: '到院'
     *  },
     * ]
     */
    setTimeResultData(data) {
      let result = data.map((item, index) => {
        return {
          id: index + 1,
          category: item.category.replace(/^./, item.category[0].toUpperCase()),
          task: item.task
        }
      });
      return result;
    },
    /**
     * All reset
     */
    reset() {
      this.containstTasksData = null;
      this.startEndData = null;
      this.selectCfmSeqStart = null;
      this.selectCfmSeqEnd = null;
      this.selectCfmSeqDirectly = [];
      this.selectCfmSeqEventually = [];
      this.durationData = null;
      this.selectCfmPtEteStart = null;
      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;
      this.startAndEndIsReset = true;
    },
  },
  created() {
    this.$emitter.on('actListData', (data) => {
      this.containstTasksData = data;
    });
    this.$emitter.on('actRadioData', (newData) => {
      let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容
      switch (data.category) {
        // Activity sequence
        case 'cfmSeqStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmSeqStart) this.selectCfmSeqEnd = null;
          data.category = 'Start';
          this.selectCfmSeqStart = data;
          break;
        case 'cfmSeqEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmSeqEnd)this.selectCfmSeqStart = null;
          data.category = 'End';
          this.selectCfmSeqEnd = data;
          break;
        // Processing time
        case 'cfmPtEteStart':
          data.category = 'Start';
          this.selectCfmPtEteStart = [data];
          break;
        case 'cfmPtEteEnd':
          data.category = 'End';
          this.selectCfmPtEteEnd = [data];
          break;
        case 'cfmPtEteSEStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmPtEteSEStart) this.selectCfmPtEteSEEnd = null;
          data.category = 'Start';
          this.selectCfmPtEteSEStart = data;
          break;
        case 'cfmPtEteSEEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmPtEteSEEnd)this.selectCfmPtEteSEStart = null;
          data.category = 'End';
          this.selectCfmPtEteSEEnd = data;
          break;
        case 'cfmPtPStart':
          data.category = 'From';
          this.selectCfmPtPStart = [data];
          break;
        case 'cfmPtPEnd':
          data.category = 'To';
          this.selectCfmPtPEnd = [data];
          break;
        case 'cfmPtPSEStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) this.selectCfmPtPSEEnd = null;
          data.category = 'From';
          this.selectCfmPtPSEStart = data;
          break;
        case 'cfmPtPSEEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd)this.selectCfmPtPSEStart = null;
          data.category = 'To';
          this.selectCfmPtPSEEnd = data;
          break;
        // Waiting time
        case 'cfmWtEteStart':
          data.category = 'Start';
          this.selectCfmWtEteStart = [data];
          break;
        case 'cfmWtEteEnd':
          data.category = 'End';
          this.selectCfmWtEteEnd = [data];
          break;
        case 'cfmWtEteSEStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) this.selectCfmWtEteSEEnd = null;
          data.category = 'Start';
          this.selectCfmWtEteSEStart = data;
          break;
        case 'cfmWtEteSEEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd)this.selectCfmWtEteSEStart = null;
          data.category = 'End';
          this.selectCfmWtEteSEEnd = data;
          break;
        case 'cfmWtPStart':
          data.category = 'From';
          this.selectCfmWtPStart = [data];
          break;
        case 'cfmWtPEnd':
          data.category = 'To';
          this.selectCfmWtPEnd = [data];
          break;
        case 'cfmWtPSEStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmWtPSEStart) this.selectCfmWtPSEEnd = null;
          data.category = 'From';
          this.selectCfmWtPSEStart = data;
          break;
        case 'cfmWtPSEEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmWtPSEEnd)this.selectCfmWtPSEStart = null;
          data.category = 'To';
          this.selectCfmWtPSEEnd = data;
          break;
        // Cycle time
        case 'cfmCtEteStart':
          data.category = 'Start';
          this.selectCfmCtEteStart = [data];
          break;
        case 'cfmCtEteEnd':
          data.category = 'End';
          this.selectCfmCtEteEnd = [data];
          break;
        case 'cfmCtEteSEStart':
          if(this.isStartSelected === true && data.task !== this.selectCfmCtEteSEStart) this.selectCfmCtEteSEEnd = null;
          data.category = 'Start';
          this.selectCfmCtEteSEStart = data;
          break;
        case 'cfmCtEteSEEnd':
          if(this.isEndSelected === true && data.task !== this.selectCfmCtEteSEEnd)this.selectCfmCtEteSEStart = null;
          data.category = 'End';
          this.selectCfmCtEteSEEnd = data;
          break;
        default:
          if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task];
          break;
      };
    });
    this.$emitter.on('getListSequence', (data) => {
      switch (data.category) {
        case 'cfmSeqDirectly':
          this.selectCfmSeqDirectly = data.task;
          break;
        case 'cfmSeqEventually':
          this.selectCfmSeqEventually = data.task;
          break;
        default:
          break;
      }
    });
    this.$emitter.on('reset', (data) => {
      this.reset();
    });
    // Radio 切換時，資料要清空
    this.$emitter.on('isRadioChange', (data) => {
      if(data) this.reset();
    });
    this.$emitter.on('isRadioProcessScopeChange', (data) => {
      if(data) this.reset();
    });
    this.$emitter.on('isRadioActSeqMoreChange', (data) => {
      if(data) this.reset();
    });
    this.$emitter.on('isRadioActSeqFromToChange', (data) => {
      if(data) this.reset();
    });
  },
}
</script>
<style scoped>
:deep(.disc) {
  font-variation-settings:
  'FILL' 1,
  'wght' 100,
  'GRAD' 0,
  'opsz' 20
}
</style>
