<template>
    <div style="background-color: #ececec; padding: 0px;height: 76vh;overflow:hidden;">
      <a-row :gutter="5">
        <a-col :span="leftSpan">
          <LeftIndex  ref="refLeftIndex" @query="setDatas" @closeLeft="closeLeft" @callback="callback"></LeftIndex>
        </a-col>
        <a-col :span="(24-leftSpan)">
          <CenterIndex ref="refCenterIndex" @closeLeft="closeLeft"></CenterIndex>
        </a-col>
      </a-row>
    </div>
  </template>

  
<script lang="ts" setup>
import {ref,nextTick} from 'vue';
import CenterIndex from './report/CenterIndex.vue';
import LeftIndex from "./report/LeftIndex.vue";
const refCenterIndex = ref();
const refLeftIndex = ref();
const leftSpan = ref(24);
const isCloseLeft = ref(false) 
const curFileDoc = ref({})

const emit = defineEmits(['callback']);

async function setDatas(conds) {
  conds["fileDoc"] = curFileDoc.value
  refCenterIndex.value.setReportData(conds)
}

async function iniActList() {
  await refLeftIndex.value.iniActList();
}

async function handleSearch (srhText){
  if(isCloseLeft.value) {
    await refCenterIndex.value.handleSearch(srhText);
  } else {
    await refLeftIndex.value.handleSearch(srhText);
  }
};

async function refresh() {
  if(isCloseLeft.value) {
    await refCenterIndex.value.handleSearch("");
  } else {
    await refLeftIndex.value.iniActList();
  }
}

async function closeLeft(isColse){
  isCloseLeft.value = isColse
  if(isColse) {
    leftSpan.value = 0
  } else {
    leftSpan.value =24
    refLeftIndex.value.closeLeft(false)
  }
};

function callback(fileDoc) {
  curFileDoc.value = fileDoc
  emit("callback",fileDoc.fileName);
}

defineExpose({
  iniActList,
  handleSearch,
  refresh
});

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
::v-deep .file-content table {
  border: 1px solid;
  width: 100%;
}
::v-deep .file-content tr {
  border: 1px solid;
}
::v-deep .file-content td {
  border: 1px solid;
}
body {
  overflow: hidden;
}
.layout {
  background: #fff;
  height: calc(90vh - 110px);
  margin: 10px 10px 0px 10px;
  overflow: hidden;
}
.resizable-sider {
  position: relative;
  background: #f0f2f5;
}

.sider-content {
  background-color: #fff;
  padding: 16px;
  height: calc(90vh - 88px);
  overflow-y: auto;
}

.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background-color: #d9d9d9;
}
.content {
  background: #fff;
  padding: 24px;
  overflow: auto;
}
::-webkit-scrollbar {
  /* 隐藏滚动条 */
  display: none;
}
</style>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
