<template>
<section class="p-4 space-y-2 h-full w-[calc(100vw_-_316px)] overflow-y-auto float-right">
  <!-- title -->
  <p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></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>Conformance<span>3,890</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>Non-Conformance<span>27,230</span>
    </li>
    <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
      <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
    </li>
  </ul>
  <!-- chart -->
  <div class="flex gap-4 w-full">
    <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>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
          <span class="text-2xl">10%</span>
        </p>
    </div>
    <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>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
          <span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
        </p>
    </div>
    <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">13.5</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 basis-1/2">
        <p class="h2 pl-2 mb-2">Throughput Time</p>
        <p class="pl-2 space-x-2">
          <span class="text-cfm-primary text-2xl font-medium">48</span>
          <span>vs</span>
          <span class="text-cfm-secondary text-2xl font-medium">56</span>
          <span>days,</span>
          <span class="text-2xl font-medium">-8</span>
          <span>days of difference.</span>
        </p>
      </div>
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
        <p class="h2 pl-2 mb-2">Activities per Case</p>
        <p class="pl-2 space-x-2">
          <span class="text-cfm-primary text-2xl font-medium">7.0</span>
          <span>vs</span>
          <span class="text-cfm-secondary text-2xl font-medium">3.9</span>
          <span>activities,</span>
          <span class="text-2xl font-medium">3.1</span>
          <span>activities of difference.</span>
        </p>
      </div>
    </div>
  </section>
  <!-- Issues group -->
  <section>
    <p class="h2 text-base">Non-conformance Issues</p>
    <div class="flex gap-4 w-full">
      <!-- Issues chart -->
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
        <p class="h2 pl-2 flex justify-between items-center">
          <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
          <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
        </p>
      </div>
      <!-- Issues list -->
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
        <p class="h2 pl-2 mb-2">Issue List</p>
          <table class="text-sm min-w-full table-fixed">
            <tbody>
              <tr v-for="(trace, key) in traceList" :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.issue }}
                  </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="switchCaseData(trace.id)">More</div>
                </td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
  </section>
  <!-- title -->
  <p class="h2 text-base">Conformance Checking Results<span class="material-symbols-outlined text-base align-middle ml-2" v-tooltip.bottom="tooltip.results" type="text">info</span></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>Conformance<span>3,890</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>Non-Conformance<span>27,230</span>
    </li>
    <li class=" bg-neutral-700 rounded-full px-4 py-1 space-x-2">
      <iconNA class="inline-block mr-1"></iconNA>Not Applicable<span>7,780</span>
    </li>
  </ul>
  <!-- chart -->
  <div class="flex gap-4 w-full">
    <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>Conformance Rate<span class="material-symbols-outlined text-sm align-middle ml-2" v-tooltip.bottom="tooltip.rate">info</span></span>
          <span class="text-2xl">10%</span>
        </p>
    </div>
    <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>Cases<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
          <span class="text-2xl"><span class="text-cfm-primary">3.89K</span>/38.9K</span>
        </p>
    </div>
    <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">13.5</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 basis-1/2">
        <p class="h2 pl-2 mb-2">Throughput Time</p>
        <p class="pl-2 space-x-2">
          <span class="text-cfm-primary text-2xl font-medium">48</span>
          <span>vs</span>
          <span class="text-cfm-secondary text-2xl font-medium">56</span>
          <span>days,</span>
          <span class="text-2xl font-medium">-8</span>
          <span>days of difference.</span>
        </p>
      </div>
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 basis-1/2">
        <p class="h2 pl-2 mb-2">Activities per Case</p>
        <p class="pl-2 space-x-2">
          <span class="text-cfm-primary text-2xl font-medium">7.0</span>
          <span>vs</span>
          <span class="text-cfm-secondary text-2xl font-medium">3.9</span>
          <span>activities,</span>
          <span class="text-2xl font-medium">3.1</span>
          <span>activities of difference.</span>
        </p>
      </div>
    </div>
  </section>
  <!-- Issues group -->
  <section>
    <p class="h2 text-base">Non-conformance Issues</p>
    <div class="flex gap-4 w-full">
      <!-- Issues chart -->
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
        <p class="h2 pl-2 flex justify-between items-center">
          <span>Time Trend<span class="material-symbols-outlined text-sm align-middle ml-2">info</span></span>
          <span class="text-2xl"><span class="text-cfm-secondary">3.89K</span>/38.9K</span>
        </p>
      </div>
      <!-- Issues list -->
      <div class="border rounded border-neutral-300 p-2 bg-neutral-10 w-full">
        <p class="h2 pl-2 mb-2">Issue List</p>
          <table class="text-sm min-w-full table-fixed">
            <tbody>
              <tr v-for="(trace, key) in traceList" :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.issue }}
                  </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="switchCaseData(trace.id)">More</div>
                </td>
              </tr>
            </tbody>
          </table>
      </div>
    </div>
  </section>
</section>
</template>
<script>
import iconNA from '@/components/icons/IconNA.vue';

export default {
  data() {
    return {
      traceList: [
        {
          id: 1,
          issue: 'Skip',
          value: this.progressWidth(80),
          count: '1,234,567,890',
          ratio: 80,
        },
        {
          id: 2,
          issue: 'Order Switch',
          value: this.progressWidth(30),
          count: '567,890',
          ratio: 30,
        },
        {
          id: 3,
          issue: 'Activity不包含到院、出院、出院、出院',
          value: this.progressWidth(70),
          count: '4,567,890',
          ratio: 70,
        }
      ],
      tooltip: {
        results: {
          value: 'This page will perform a conformance check based on the filtering results of the map.',
        },
        rate: {
          value: '=(total Non-Conformance/total Conformance)*100%'
        }
      }
    }
  },
  components: {
    iconNA,
  },
  methods: {
    /**
     * set progress bar width
     * @param   {number} value
     * @returns {string}      樣式的寬度設定
     */
     progressWidth(value){
      return `width:${value}%;`
    },
    /**
     * switch case data
     * @param {number} id
     */
    switchCaseData(id) {
      console.log(id);
    },
  }
}
</script>
<style scoped>
:deep(.disc) {
  font-variation-settings:
  'FILL' 1,
  'wght' 100,
  'GRAD' 0,
  'opsz' 20
}

</style>
