<template>
  <div class="h-full pl-1">
    <w-splitter v-if="!rating.cm.isAwaitSubmitProcessStatus.value" :size="rating.readMode ? 100 : 50" horizontal class="h-full" disable :show-separator="false">
      <template #before>
        <w-splitter :size="36" horizontal class="h-full" unit="px" disable :show-separator="false">
          <template #before>
            <q-tabs v-model="histTab" dense no-caps inline-label align="right">
              <q-tab name="timeline" icon="query_builder" label="审批时间线" />
              <q-tab name="grid" icon="grid_on" label="审批列表" />
            </q-tabs>
          </template>
          <template #after>
            <q-tab-panels v-model="histTab" class="p-0 h-full">
              <q-tab-panel name="timeline" class="p-0 pt-1 px-2 h-full">
                <Timeline></Timeline>
              </q-tab-panel>
              <q-tab-panel name="grid" class="p-0 pt-1 h-full">
                <OpinionGrid></OpinionGrid>
              </q-tab-panel>
            </q-tab-panels>
          </template>
        </w-splitter>
      </template>
      <template #after>
        <Overturn></Overturn>
      </template>
    </w-splitter>
    <Overturn v-else class="p-1"></Overturn>
  </div>
</template>
<script setup lang="ts">
import { inject, ref } from 'vue';
import { Rating } from '../ts/Rating';
import OpinionGrid from './OpinionGrid.vue';
import Overturn from './Overturn.vue';
import Timeline from './Timeline.vue';

const rating = <Rating>inject('rating');
const histTab = ref('timeline');
</script>
