<template>
  <PageWrapper dense contentFullHeight  contentClass="flex">
    <StMetricList  class="w-1/2 xl:w-1/2" @onClickRow1="clickMetricRow" :mtrcCtp="2"></StMetricList>
    <MetricReportCombinedList class="w-1/2 xl:w-1/2" :data="metricData" ref="refMetricReportCombinedList"></MetricReportCombinedList>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import {ref,nextTick } from 'vue';
  import StMetricList from './components/StMetricList.vue';
  import MetricReportCombinedList from './MetricReportCombinedList.vue'
  import { PageWrapper } from '/@/components/Page';
  

  const metricData = ref({});
  const refMetricReportCombinedList = ref(null)

  function clickMetricRow(metricObj) {
    nextTick(() => {
      metricData.value = metricObj;
      refMetricReportCombinedList.value?.setData(metricObj);
    });
  }

</script>
