<template>
  <!-- <positionChart ref="positionChartRef" /> -->
  <div class="bigData-container">
    <div ref="dataScreenRef" class="bigData-content">
      <div class="bigData-header">headers</div>
      <div class="bigData-main">
        <div class="bigData-lf">
          <el-descriptions
            title="2023年7月30日"
            direction="vertical"
            :column="2"
            border
          >
            <el-descriptions-item
              v-for="item in 8"
              :key="item"
              align="center"
              label="X家"
              >企业用户</el-descriptions-item
            >
          </el-descriptions>
          <positionChart ref="positionChartRef" />
        </div>
        <div class="bigData-ct">
          <div class="bigData-map">
            <NanshanDistrictChart ref="nanshanDistrictRef" />
          </div>
        </div>
        <div class="bigData-rg">
          <el-descriptions title="新增简历" :column="1">
            <el-descriptions-item
              v-for="item in 19"
              :key="item"
              align="center"
              :label="item + '.王一'"
            >
              <template #default>
                <div>清华大学</div>
                <div>销售经理</div>
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="bigData-footer">
        <pieChart ref="pieRef" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NanshanDistrictChart from "./components/NanshanDistrictChart.vue";
import positionChart from "./components/positionChart.vue";
import pieChart from "./components/pieChart.vue";

const dataScreenRef = ref();
const nanshanDistrictRef = ref();
const positionChartRef = ref();
const pieRef = ref();

// 设置响应式
const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
onMounted(() => {
  nanshanDistrictRef.value.init();
  positionChartRef.value.init();
  pieRef.value.init();
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__title) {
  color: #ffffff;
  width: 100%;
  text-align: center;
}
.bigData-container {
  width: 100%;
  height: 100%;
  background: url("../../assets/bg.png") no-repeat;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100% 100%;
  background-size: cover;

  .bigData-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
    transform-origin: left top;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    .bigData-header {
      height: 200px;
      width: 100%;
      color: #fff;
    }
    .bigData-main {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      width: 100%;
      padding: 12px 42px 20px;
      .bigData-lf {
        width: 394px;
        height: 100%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .bigData-ct {
        display: flex;
        flex: 1;
        height: 100%;
        margin-right: 40px;
        .bigData-map {
          position: relative;
          box-sizing: border-box;
          flex: 1;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .bigData-rg {
        width: 394px;
        height: 100%;
        :deep(.el-descriptions__body) {
          padding-top: 10px;
          .el-descriptions__cell {
            display: flex;
            .el-descriptions__label {
              width: 33.333333%;
            }
            .el-descriptions__content {
              display: flex;
              flex: 1;
              justify-content: space-around;
            }
          }
        }
      }
    }
    .bigData-footer {
      height: 200px;
      width: 100%;
      color: #fff;
    }
  }
}
</style>
