<script lang="ts" setup>
import { ref } from 'vue'
import Aside from './aside/Aside.vue'
import Content from './content/Content.vue'
import DataHeader from '@/components/DataHeader/index.vue'
import { useWorkOrder } from '@/store/modules/workOrder'
import Robot from '@/components/Robot/index.vue'

const workStore = useWorkOrder()
const contentRef: any = ref(null)
function ApprovalOver(packageId) {
  const id: string = workStore.getActiveId
  contentRef.value.queryDetail(id)
}
</script>

<template>
  <div style="width: 100%">
    <div class="header">
      <DataHeader />
    </div>
    <div class="main">
      <!-- 侧边 -->
      <Aside style="margin-right:16px" @approval-over="ApprovalOver" />

      <!-- 内容 -->
      <Content ref="contentRef" />
    </div>
    <Robot />
  </div>
</template>

<style lang="less" scoped>
:deep(.header_wrap){
  margin-top: 3px !important;
   margin-left: 16px;
    margin-right: 16px;
    background: #FFFFFF;
}
.main {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  width: 100%;
    height: calc(100vh - 176px);
  padding-bottom: 16px;
  //height: calc(100% - 170px);
}
@media (max-height: 900px) {
  .main {

    height: calc(100vh - 150px);
 
}
}
:deep(.ip_box){
  z-index: 10;
  bottom: 120px;
}
</style>
