<template>
  <section class="p-4 mr-0.5 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto scrollbar float-right">
  <div v-show="isCoverPlate" class="w-[calc(100vw_-_300px)] h-screen-main fixed bottom-0 right-0 bg-gradient-to-tr from-neutral-500/50 to-neutral-900/50 z-[1]">
  </div>
  <!-- title -->
  <p class="text-base leading-10 font-bold">Conformance Checking Results ({{ data.total }})</p>
  <!-- total group -->
  <ul class=" text-neutral-10 text-sm flex gap-2 py-2">
    <li class=" bg-cfm-primary rounded-full px-4 py-1 space-x-2">
      <span class="material-symbols-outlined text-base align-middle mr-2">check_circle</span>Conforming<span>{{ data.counts.conforming }}</span>
    </li>
    <li class=" bg-cfm-secondary rounded-full px-4 py-1 space-x-2">
      <span class="material-symbols-outlined text-base align-middle mr-2">cancel</span>Not Conforming<span>{{ data.counts.not_conforming }}</span>
    </li>
    <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2" v-show="data.counts.not_applicable != 0">
      <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>{{ data.counts.not_applicable }}</span>
    </li>
  </ul>
  <!-- chart -->
  <div class="flex gap-4">
    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
      <p class="p-2 flex justify-between items-center">
        <div>
          <span class="block text-sm font-bold mb-2">Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
          <small class="text-neutral-700 font-normal block">{{ data.charts.rate.xMin }} ~ {{ data.charts.rate.xMax }}</small>
        </div>
        <span class="text-2xl font-bold">{{ data.charts.rate.rate }}%</span>
      </p>
      <Chart type="line" :data="rateChartData" :options="rateChartOptions" class="w-[99%]"/>
    </div>
    <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
      <p class="p-2 flex justify-between items-center">
        <div>
          <span class="block text-sm font-bold mb-2">Cases<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.case">info</span></span>
          <small class="text-neutral-700 font-normal block">{{ data.charts.cases.xMin }} ~ {{ data.charts.cases.xMax }}</small>
        </div>
        <span class="text-2xl font-bold"><span class="text-cfm-primary">{{ data.charts.cases.conforming }}</span>&nbsp/&nbsp{{ data.charts.cases.total }}</span>
      </p>
      <Chart type="bar" :data="casesChartData" :options="casesChartOptions" class="w-[99%]"/>
    </div>
    <!-- Fitness 暫時不做 basis-1/3 → basis-1/2  -->
    <!-- <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/3">
      <p class="h2 pl-2 flex justify-between items-center">
        <span>Fitness<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
        <span class="text-2xl">{{ data.charts.fitness }}</span>
      </p>
    </div> -->
  </div>
  <!-- effect -->
  <section>
    <p class="h2 text-base">Effect</p>
    <div class="flex gap-4 w-full">
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
        <p class="h2 pl-2 mb-2">Throughput Time</p>
        <div v-if="data.effect.time !== null">
          <p class="pl-2 space-x-2" v-if="data.effect.time.not_conforming === null">
            <span>All cases are conforming to set rules. Average throughput time is</span>
            <span class="text-cfm-primary text-2xl font-medium">{{ data.effect.time.conforming }}</span>
            <span>days.</span>
          </p>
          <p class="pl-2 space-x-2" v-else-if="data.effect.time.conforming === null">
            <span>None of the cases is conforming to set rules. Average throughput time is</span>
            <span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.time.not_conforming }}</span>
            <span>days.</span>
          </p>
          <p class="pl-2 space-x-2 max-w-full" v-else>
            <span class="text-cfm-primary text-2xl font-medium inline-block">{{ data.effect.time.conforming }}</span>
            <span>vs</span>
            <span class="text-cfm-secondary text-2xl font-medium inline-block">{{ data.effect.time.not_conforming }}</span>
            <span>days,</span>
            <span class="text-2xl font-medium inline-block">{{ data.effect.time.difference }}</span>
            <span>days of difference.</span>
          </p>
        </div>
      </div>
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
        <p class="h2 pl-2 mb-2">Activities per Case</p>
        <div v-if="data.effect.tasks !== null">
          <p class="pl-2 space-x-2" v-if="data.effect.tasks.not_conforming === null">
            <span>All cases are conforming to set rules. Average activities in per cases is</span>
            <span class="text-cfm-primary text-2xl font-medium">{{ data.effect.tasks.conforming }}</span> .
          </p>
          <p class="pl-2 space-x-2" v-else-if="data.effect.tasks.conforming === null">
            <span>None of the cases is conforming to set rules. Average activities in per cases is</span>
            <span class="text-cfm-secondary text-2xl font-medium">{{ data.effect.tasks.not_conforming }}</span> .
          </p>
          <p class="pl-2 space-x-2 max-w-full" v-else>
            <span class="text-cfm-primary text-2xl font-medium inline-block">{{ data.effect.tasks.conforming }}</span>
            <span>vs</span>
            <span class="text-cfm-secondary text-2xl font-medium inline-block">{{ data.effect.tasks.not_conforming }}</span>
            <span>activities,</span>
            <span class="text-2xl font-medium inline-block">{{ data.effect.tasks.difference }}</span>
            <span>activities of difference.</span>
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- Loop group -->
  <section>
    <div v-if="data.loops == null"></div>
    <div v-else>
      <p class="h2 text-base">Loop List</p>
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
        <p class="h2 pl-2 mb-2">Short Loop(s)</p>
          <table class="text-sm min-w-full table-fixed">
            <tbody>
              <tr v-for="(trace, key) in data.loops" :key="key">
                <td class="p-2 pl-6 truncate max-w-0 w-1/3">
                  <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
                </td>
                <td class="p-2 min-w-[96px] w-2/5">
                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                    <div class="h-full bg-primary" :style="trace.value"></div>
                  </div>
                </td>
                <td class="p-2 text-right truncate">{{ trace.count }}</td>
                <td class="p-2 text-center">{{ trace.ratio }}%</td>
                <td class="p-2 text-center">
                  <div class="btn btn-sm btn-c-primary cursor-pointer" @click="openLoopMore(trace.no)">More</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
    </div>
  </section>
  <!-- Issues group -->
  <section>
    <div v-if="data.issues == null || data.issues.length == 0"></div>
    <div v-else>
      <p class="h2 text-base">Non-conformance Issues</p>
      <div class="flex gap-4 w-full">
        <!-- Issues chart -->
        <div v-if="data.timeTrend.chart != null" class="border rounded border-neutral-300 p-2 bg-neutral-10 w-1/2">
          <p class="h2 p-2 flex justify-between items-center">
            <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
            <span class="text-2xl"><span class="text-cfm-secondary">{{ data.timeTrend.not_conforming }}</span>&nbsp/&nbsp{{ data.timeTrend.total }}</span>
          </p>
          <Chart type="line" :data="timeChartData" :options="timeChartOptions" class="w-[99%]"/>
        </div>
        <!-- Issues list -->
        <div v-if="data.issues.length === 0" class="w-1/2"></div>
        <div v-else class="border rounded border-neutral-300 p-2 bg-neutral-10 " :class="data.timeTrend.chart !== null ? 'w-1/2' : 'w-full'">
          <p class="h2 pl-2 mb-2">Issue List</p>
          <table class="text-sm min-w-full table-fixed" v-if="data.issues !== 'reset'">
            <tbody>
              <tr v-for="(trace, key) in data.issues" :key="key">
                <td class="p-2 pl-6 truncate max-w-0 w-1/3">
                  <span class="material-symbols-outlined disc text-sm align-middle mr-1">fiber_manual_record</span>{{ trace.label }}
                </td>
                <td class="p-2 min-w-[96px] w-2/5">
                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                    <div class="h-full bg-cfm-secondary" :style="trace.value"></div>
                  </div>
                </td>
                <td class="p-2 text-right truncate">{{ trace.count }}</td>
                <td class="p-2 text-center">{{ trace.ratio }}%</td>
                <td class="p-2 text-center">
                  <div class="btn btn-sm btn-cfm-secondary cursor-pointer" @click="openMore(trace.no)">More</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
  <MoreModal :listModal="issuesModal" @closeModal="issuesModal = $event" :listTraces="issueTraces" :taskSeq="taskSeq" :cases="cases" :listNo="issuesNo" :traceId="traceId" :firstCases="firstCases" :category="'issue'"></MoreModal>
  <MoreModal :listModal="loopModal" @closeModal="loopModal = $event" :listTraces="loopTraces" :taskSeq="loopTaskSeq" :cases="loopCases" :listNo="loopNo" :traceId="looptraceId" :firstCases="loopFirstCases" :category="'loop'"></MoreModal>
</section>
</template>
<script>
import { storeToRefs } from 'pinia';
import ConformanceStore from '@/stores/conformance.js';
import iconNA from '@/components/icons/IconNA.vue';
import MoreModal from './MoreModal.vue';
import getNumberLabel from '@/module/numberLabel.js';
import { setLineChartData, setBarChartData, timeRange, yTimeRange, getXIndex, formatTime } from '@/module/setChartData.js';
import abbreviateNumber from '@/module/abbreviateNumber.js';
import shortScaleNumber from '@/module/shortScaleNumber.js';
import getMoment from 'moment';

export default {
  setup() {
    const conformanceStore = ConformanceStore();
    const { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases } = storeToRefs(conformanceStore);

    return { conformanceTempReportData, issueTraces, taskSeq, cases, loopTraces, loopTaskSeq, loopCases, conformanceStore }
  },
  data() {
    return {
      data: {
        total: '--',
        counts: {
          conforming: '--',
          not_conforming: '--',
          not_applicable: 0,
        },
        charts: {
          rate: {
            rate: '--',
            chart: {},
          },
          cases: {
            conforming: '--',
            total: '--',
            chart: {},
          },
          fitness: '--',
        },
        effect: {
          time: null,
          tasks: null,
        },
        loops: null,
        issues: 'reset',
        timeTrend: {
          not_conforming: '--',
          total: '--',
          chart: {},
        },
      },
      isCoverPlate: false,
      issuesModal: false,
      loopModal: false,
      rateChartData: null,
      rateChartOptions: null,
      casesChartData: null,
      casesChartOptions: null,
      timeChartData: null,
      timeChartOptions: null,
      issuesNo: null,
      traceId: null,
      firstCases: null,
      loopNo: null,
      looptraceId: null,
      loopFirstCases: null,
      selectDurationTime: null,
      tooltip: {
        rate: {
          value: '= Conforming / (Conforming + Not Conforming) * 100%',
          class: '!max-w-[36rem] !text-[10px]',
        },
        case: {
          value: '= Conforming / (Conforming + Not Conforming)',
          class: '!max-w-[36rem] !text-[10px]',
        },
        timeTrend: {
          value: '=Not Conforming / (total Conforming+total Not Conforming)',
          class: '!max-w-[36rem] !text-[10px]',
        }
      }
    }
  },
  components: {
    iconNA,
    MoreModal,
  },
  watch: {
    conformanceTempReportData: {
      handler: function(newValue) {
        this.data = this.setConformanceTempReportData(newValue);
      },
    }
  },
  methods: {
    /**
     * set progress bar width
     * @param   {number} value
     * @returns {string}      樣式的寬度設定
     */
     progressWidth(value){
      return `width:${value}%;`
    },
    /**
     * Number to percentage
     * @param   {number} val
     * @returns {string} 轉換完成的百分比字串
     */
    getPercentLabel(val){
      return (val * 100 === 100) ? (val * 100) : (val * 100).toFixed(1);
    },
    /**
     * Convert seconds to days
     * @param {number} sec
     * @returns {number} day
     */
    convertSecToDay(sec) {
      return (sec / 86400)
    },
    /**
     * Open Issues Modal.
     * @param {number} no trace no
     */
    async openMore(no) {
      // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
      this.issuesNo = no;
      await this.conformanceStore.getLogConformanceIssue(no);
      this.traceId = await this.issueTraces[0].id;
      this.firstCases = await this.conformanceStore.getLogConformanceTraceDetail(no, this.issueTraces[0].id, 0);
      this.issuesModal = await true;
    },
    /**
     * Open Loop Modal.
     * @param {number} no trace no
     */
    async openLoopMore(no) {
      // async await 解決非同步資料延遲傳遞導致未讀取到而出錯的問題
      this.loopNo = no;
      await this.conformanceStore.getLogConformanceLoop(no);
      this.looptraceId = await this.loopTraces[0].id;
      this.loopFirstCases = await this.conformanceStore.getLogConformanceLoopsTraceDetail(no, this.loopTraces[0].id, 0);
      this.loopModal = await true;
    },
    /**
     * set conformance report data
     * @param   {object} data new watch's value
     */
    setConformanceTempReportData(data){
      let total = getNumberLabel(Object.values(data.counts).reduce((acc, val) => acc + val, 0));
      let sum = data.counts.conforming + data.counts.not_conforming;
      let rate = ((data.counts.conforming / sum) * 100).toFixed(1);
      let isNullTime = value => value === null ? null : getNumberLabel((value / 86400).toFixed(1));
      let isNullCase = value => value === null ? null : getNumberLabel(value.toFixed(1));
      let setLoopData = value => value.map(item => {
        return {
          no: item.no,
          label: item.description,
          value: `width:${this.getPercentLabel(item.count / data.counts.conforming)}%;`,
          count: getNumberLabel(item.count),
          ratio: this.getPercentLabel(item.count / data.counts.conforming),
        }
      });
      let setIssueData = value => value.map(item => {
        return {
          no: item.no,
          label: item.description,
          value: `width:${this.getPercentLabel(item.count / data.counts.not_conforming)}%;`,
          count: getNumberLabel(item.count),
          ratio: this.getPercentLabel(item.count / data.counts.not_conforming),
        }
      });
      let isNullLoops = value => value === null ? null : setLoopData(value);
      let isNullIsssue = value => value === null ? null : setIssueData(value);

      let result = {
        total: `Total ${total}`,
        counts: {
          conforming: getNumberLabel(data.counts.conforming),
          not_conforming: getNumberLabel(data.counts.not_conforming),
          not_applicable: getNumberLabel(data.counts.not_applicable),
        },
        charts: {
          rate: {
            rate: rate,
            data: setLineChartData(data.charts.rate.data, data.charts.rate.x_axis.max, data.charts.rate.x_axis.min, true),
            xMax: getMoment(data.charts.rate.x_axis.max).format('YYYY/M/D'),
            xMin: getMoment(data.charts.rate.x_axis.min).format('YYYY/M/D'),
          },
          cases: {
            conforming: getNumberLabel(data.counts.conforming),
            total: getNumberLabel(sum),
            data: {
              conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'conforming').map(item => item.data)[0]),
              not_conforming: setBarChartData(data.charts.cases.data.filter(item => item.label === 'not-conforming').map(item => item.data)[0]),
            },
            xMax: getMoment(data.charts.cases.x_axis.max).format('YYYY/M/D'),
            xMin: getMoment(data.charts.cases.x_axis.min).format('YYYY/M/D'),
          },
          fitness: getNumberLabel(data.charts.fitness),
        },
        effect: {
          time: {
            conforming: isNullTime(data.effect.time.conforming),
            not_conforming: isNullTime(data.effect.time.not_conforming),
            difference: (isNullTime(data.effect.time.conforming) - isNullTime(data.effect.time.not_conforming)).toFixed(1),
          },
          tasks: {
            conforming: isNullCase(data.effect.tasks.conforming),
            not_conforming: isNullCase(data.effect.tasks.not_conforming),
            difference: (isNullCase(data.effect.tasks.conforming) - isNullCase(data.effect.tasks.not_conforming)).toFixed(1),
          },
        },
        loops: isNullLoops(data.loops),
        issues: isNullIsssue(data.issues),
        timeTrend: {
          not_conforming: getNumberLabel(data.counts.not_conforming),
          total: getNumberLabel(sum),
          chart: null,
          xMax: null,
          xMin: null,
          yMax: null,
          yMin: null,
        }
      };

      if (data.charts.time) {
        result.timeTrend.chart = setLineChartData(data.charts.time.data, data.charts.time.x_axis.max, data.charts.time.x_axis.min, false, data.charts.time.y_axis.max, data.charts.time.y_axis.min);
        result.timeTrend.xMax = data.charts.time.x_axis.max;
        result.timeTrend.xMin = data.charts.time.x_axis.min;
        result.timeTrend.yMax = data.charts.time.y_axis.max;
        result.timeTrend.yMin = data.charts.time.y_axis.min;
      }

      this.setRateChartData(result.charts.rate.data); // 建立圖表 Rate Chart.js
      this.setCasesChartData(result.charts.cases.data.conforming, result.charts.cases.data.not_conforming, data.charts.cases.x_axis.max, data.charts.cases.x_axis.min); // 建立圖表 Cases Chart.js
      if(data.charts.time) this.setTimeChartData(result.timeTrend.chart, result.timeTrend.xMax, result.timeTrend.xMin, result.timeTrend.yMax, result.timeTrend.yMax, result.timeTrend.yMin); // 建立圖表 Time Chart.js
      return result;
    },
    /**
     * set Rate Chart Data
     * @param   {object} data new rate chart data
     */
    setRateChartData(data){
      this.rateChartData = {
        labels:[],
        datasets: [
          {
            label: 'Rate',
            data: data,
            fill: false,
            pointRadius: 0, // 隱藏點
            pointHoverRadius: 0, // 隱藏點的 hover
            tension: 0.4,
            borderColor: '#0099FF',
            x: 'x',
            y: 'y',
          }
        ]
      };
      this.rateChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        aspectRatio: 0.6,
        layout: {
          padding: {
            top: 16,
            left: 8,
            right: 8,
          }
        },
        plugins: {
          legend: false, // 圖例
          tooltip: {
            enabled: false // 隱藏 工具提示框
          }
        },
        scales: {
          x: {
            type: 'time',
            // time: {
            //   max: '2022-01-12T02:29:42',
            //   min: '2022-01-03T00:56:25',
            //   displayFormats: {
            //     day: 'yyyy/M/d'
            //   }
            // },
            ticks: {
              display: false,
              // maxRotation: 0, // 不旋轉 lable 0~50
              // color: '#334155',
              // source: 'data',
              // align: 'inner', // label 在軸線的位置
              // callback: function(value, index, values) {
              //   return (index === 0 || index === values.length - 1) ? getMoment(value).format('YYYY/M/D') : null;
              // },
            },
            grid: {
              display: false, // 隱藏 x 軸網格
            },
            border: {
              color: '#334155',
            },
          },
          y: {
            beginAtZero: true, // scale 包含 0
            suggestedMin: 0,
            suggestedMax: 1,
            ticks:{ // 設定間隔數值
              includeBounds: true,
              color: '#334155',
              align: 'inner',
              callback: function(value, index, values) {
                if (value === 0) return `${value * 100}%`;
                else if (value === 1) return `${value * 100}%`;
              },
            },
            grid: {
              display: false, // 隱藏 y 軸網格
            },
            border: {
              color: '#334155',
            },
          },
        },
      };
    },
    /**
     * set Cases Chart Data
     * @param   {array} data new cases chart conforming data
     * @param   {array} data new cases chart not conforming data
     * @param   {number} data new cases chart xMax
     * @param   {number} data new cases chart xMin
     */
    setCasesChartData(conformingData, notConformingData, xMax, xMin){
      this.casesChartData = {
        datasets: [
          {
            type: 'bar',
            label: 'Conforming',
            data: conformingData,
            backgroundColor: '#0099FF',
          },
          {
            type: 'bar',
            label: 'Not Conforming',
            data: notConformingData,
            backgroundColor: '#FFAA44',
          },
        ]
      };
      this.casesChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        aspectRatio: 0.8,
        layout: {
          padding: {
            top: 16,
            left: 8,
            right: 8,
          }
        },
        plugins: {
          tooltips: {
            mode: 'index',
            intersect: false
          },
          legend: false, // 圖例
        },
        scales: {
          x: {
            stacked: true,
            ticks: {
              display: false,
              // autoSkip: false,
              // maxRotation: 0, // 不旋轉 lable 0~50
              // color: '#334155',
              // align: 'center', // label 在軸線的位置
              // callback: function(value, index, values) {
              //   if(index === 0) return getMoment(xMin).format('yyyy/M/D');
              //   else if(index === values.length - 1) return getMoment(xMax).format('yyyy/M/D');
              //    else return null;
              // },
            },
            grid: {
              display: false, // 隱藏 x 軸網格
            },
            border: {
              color: '#334155',
            },
          },
          y: {
            stacked: true,
            beginAtZero: true, // scale 包含 0
            ticks:{
              color: '#334155',
              align: 'inner',
              callback: function(value, index, values) {
                if (index === 0) return shortScaleNumber(value);
                else if (index === values.length - 1) return shortScaleNumber(value);
              },
            },
            grid: {
              // display: false, // 隱藏 y 軸網格
              color: function(context) {
                return context.tick.value === 0 ? '#334155' : null;
              },
              drawTicks: false,
            },
            border: {
              color: '#334155',
            },
          },
        },
      };
    },
    /**
     * set Time Trend chart data
     * @param   {array} data Time Trend chart conforming data
     * @param   {number} xMax Time Trend xMax
     * @param   {number} xMin Time Trend xMin
     * @param   {number} yMax Time Trend yMax
     * @param   {number} yMin Time Trend yMin
     */
    setTimeChartData(data, xMax, xMin, yMax, yMin) {
      let max = yMax * 1.1;
      let xVal = timeRange(xMin, xMax, 100);
      let yVal = yTimeRange(data, 100, yMin, yMax);
      data = xVal.map((x, index) => ({ x, y: yVal[index] }));
      let formattedXVal = xVal.map(value => formatTime(value));
      let selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min);
      let selectTimeMaxIndex = getXIndex(xVal, this.selectDurationTime.max);
      const start = selectTimeMinIndex;
      const end = selectTimeMaxIndex;
      const inside = (ctx, value) => ctx.p0DataIndex >= start && ctx.p1DataIndex <= end ? value : undefined;
      const outside = (ctx, value) => ctx.p0DataIndex < start || ctx.p1DataIndex > end ? value : undefined;

      this.timeChartData = {
        labels: formattedXVal,
        datasets: [
          {
            label: 'Conforming',
            data: yVal,
            fill: true,
            showLine: false,
            tension: 0.4,
            backgroundColor: 'rgba(0,153,255)',
            pointRadius: 0,
            pointHitRadius: 0,
            spanGaps: true,
            segment: {
              backgroundColor: ctx => inside(ctx, 'rgb(0,153,255)') || outside(ctx, 'rgb(255,170,68)'),
             },
            x: 'x',
            y: 'y',
          },
        ]
      };

      this.timeChartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        layout: {
          padding: {
            top: 16,
            left: 8,
            right: 8,
          }
        },
        plugins: {
          legend: false, // 圖例
          tooltip: false,
        },
        scales: {
          x: {
            ticks: {
              // autoSkip: false, // 彈性顯示或全部顯示 lable
              // autoSkipPadding: 4, // lable 之間的距離
              maxRotation: 0, // 不旋轉 lable 0~50
              color: '#334155',
              display: true,
            },
            grid: {
              display: false, // 隱藏 x 軸網格
            },
            title: {
              display: true,
              text: 'Time',
              color: 'rgba(100,116,139)',
            },
          },
          y: {
            beginAtZero: true, // scale 包含 0
            max: max,
            ticks: { // 設定間隔數值
              display: false, // 隱藏數值，只顯示格線
              stepSize: max / 4,
            },
            grid: {
              color: 'rgba(100,116,139)',
              drawTicks: false // 隱藏左側多的空間
            },
            border: {
              display: false, // 隱藏左側多出來的線
            },
            title: {
              display: true,
              text: 'Occurrences',
              color: 'rgba(100,116,139)',
            },
          },
        },
      };
    },
  },
  created() {
    this.$emitter.on('coverPlate', boolean => {
      this.isCoverPlate = boolean;
    });
    // 取得 selectTimeTange 給 Tiem Trend 使用
    this.$emitter.on('timeRangeMaxMin', data => this.selectDurationTime = data);
  },
}
</script>
<style scoped>
:deep(.disc) {
  font-variation-settings:
  'FILL' 1,
  'wght' 100,
  'GRAD' 0,
  'opsz' 20
}
</style>
