<template>
  <h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
  <div class="flex min-w-full min-h-screen">
    <div class="cyto" id="cyto"></div>
  </div>
</template>

<script>
import { storeToRefs } from 'pinia';
import LoadingStore from '@/stores/loading.js';
import AllMapDataStore from '@/stores/allMapData.js';

export default {
  setup() {
    const loadingStore = LoadingStore();
    const allMapDataStore = AllMapDataStore();
    const { isLoading } = storeToRefs(loadingStore);
    const { processMap, bpmn } = storeToRefs(allMapDataStore);

    return {
      isLoading,
      processMap, bpmn, allMapDataStore,
    }
  },
  data() {
    return {
      processMapData: {
        startId: 0,
        endId: 1,
        nodes: [],
        edges: [],
      },
      curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
    }
  },
  methods: {
    /**
     * Switch curve-style is 'bezier' or 'unbundled-bezier'.
     * @param {string} style 貝茲曲線 bezier | 直角 unbundled-bezier
     */
    switchCurveStyle(style){
      this.curveStyle = style;
    },
    /**
     * 將 element nodes 資料彙整
     * @param {string} type ProcessMap | BPMN
     */
     setNodesData(type){
      const logFreq = {
        "total": "",
        "rel_freq": "",
        "average": "",
        "median": "",
        "max": "",
        "min": "",
        "cases": ""
      };
      const logDuration = {
        "total": "",
        "rel_duration": "",
        "average": "",
        "median": "",
        "max": "",
        "min": "",
      };
      // BPMN 才有 gateway 類別
      const gateway = {
        parallel: "+",
        exclusive: "x",
        inclusive: "o",
      };

      // 將 api call 回來的資料帶進 node
      this.processMap.vertices.forEach(node => {
        switch (node.type) {
          // add type of 'event' node
          case 'event':
            if(node.event_type === 'start') this.processMapData.startId = node.id;
            else if(node.event_type === 'end') this.processMapData.endId = node.id;

            this.processMapData.nodes.push({
              data:{
                id:node.id,
                type:node.type,
                label:node.event_type,
                height:60,
                width:60,
                backgroundColor:'#FFCCCC',
                bordercolor:'#003366',
                shape:"ellipse",
                freq:logFreq,
                duration:logDuration,
              }
            });
            break;
          // add type of 'activity' node
          default:
            this.processMapData.nodes.push({
              data:{
                id:node.id,
                type:node.type,
                label:node.label,
                height:80,
                width:100,
                backgroundColor:'#FFCCCC',
                bordercolor:'#003366',
                shape:"ellipse",
                freq:node.freq,
                duration:node.duration,
              }
            })
            break;
        }
      });
     },
    /**
     * 將 element edges 資料彙整
     * @param {string} type ProcessMap/BPMN
     */
    setEdgesData(type) {
      //add event duration is empty
      const logDuration = {
        "total": "",
        "rel_duration": "",
        "average": "",
        "median": "",
        "max": "",
        "min": "",
        "cases": ""
      };
      this.processMap.edges.forEach(edge => {
        this.processMapData.edges.push({
          data: {
            target:edge.head,
            source:edge.tail,
            freq:edge.freq,
            duration:edge.duration === null ? logDuration : edge.duration,
            style:'dotted',
            lineWidth:1,
          },
        });
      });
     },
    /**
     * create and setting cytoscape
     */
    createCytoscape() {
      let graphId = document.getElementById('cyto');
      // let nodes
      // let edges

      let cy = this.$cytoscape({
        container: graphId,
        // elements: {
        //   nodes: nodes, // 節點的資料
        //   edges: edges, // 關係線的資料
        // },
        layout: {
          name: 'klay',
          rankDir: 'LR' // 直向 TB | 橫向 LR
        },
        style: [
          {
            selector: 'node',
          }
        ],
      })

      // this.$cytoscape.warnings(false); // false
    },
    async executeApi() {
      await this.allMapDataStore.getAllMapData();
      this.setNodesData();
      this.setEdgesData();
    }

  },
  created() {
    this.allMapDataStore.logId = this.$route.params.logId;
  },
  mounted() {
    this.isLoading = false
    // this.createCytoscape();
    this.executeApi();
  },
}
</script>
