<template>
  <div class="index-box">
    <div class="center_left">
        <border-box  class="center_left-left center_lr-item" title="24小时话务量">
          <LeftTop :content="state.data1"/>
        </border-box>
      <border-box
          class="center_left-center center_lr-item-center"
          title="24小时坐席话务TOP10"
          style="margin-top: 10px"
      >
        <LeftCenter :content="state.data2"/>
      </border-box>
      <border-box
          class="center_left-bottom center_lr-item"
          title="数据展示"
          style="margin-top: 10px"
      >
        <LeftBottom :data="props.data" :content="state.data3"/>
      </border-box>
    </div>
    <div class="center_right">
      <Right :data="props.data"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted,reactive} from "vue";
import {agentPaged} from "api/home";
import BorderBox from "@/views/seats/border-box.vue";
import LeftTop from "@/views/seats/left-top.vue";
import LeftCenter from "@/views/seats/left-center.vue";
import LeftBottom from "@/views/seats/left-bottom.vue";
import Right from "@/views/seats/right.vue";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const state = reactive<any>({
  data1: [],
  data2: [],
  data3:{},
});
onMounted( async()=>{
  try {
    const {result} = await agentPaged();
    state.data1 = result[0] ?? [];
    state.data2 = result[1] ?? [];
    state.data3 = {
      count: result[2] ?? [],
      list: result[3] ?? [],
    }
  }catch (e) {
    console.log(e)
  }
})
</script>
<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 140px);
  font-size: var(--el-font-size-base);
  color: var(--el-color-white);
}
.center_left,
 {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 570px;
  background-color: rgba(0, 0, 0, 0.18);
  padding:0 16px;
  margin-left: 10px;
  border-radius: var(--el-border-radius-base);
}
.center_right{
  box-sizing: border-box;
  flex:1;
  margin-left:20px;
}
.center_lr-item {
  height: 242px;
}
.center_lr-item-center{
  height: 360px;
}
</style>
