<template>
  <div class="data-home-index">
    <baseBg :name-val="'home'">
      <template #center>
        <el-row style="width: 100%; height: 100%">
          <el-col :span="6" class="left-charts">
            <div class="left-charts-item">
              <subTop title="综合数据统计" :postion="'left'"></subTop>
              <comprehensive></comprehensive>
            </div>
            <div class="left-charts-item">
              <subTop title="土地分布数据统计" :postion="'left'"></subTop>
              <rolllist :items="rollDataList"></rolllist>
            </div>
            <div class="left-charts-item">
              <subTop title="种养殖数据统计" :postion="'left'"></subTop>
              <plantBreedCharts></plantBreedCharts>
            </div>
          </el-col>
          <el-col :span="12" style="text-align: center; position: relative">
            <img
              :src="getAssetsFile('images/gmmap.png')"
              style="
                width: 80%;
                height: 80%;
                position: absolute;
                bottom: 50px;
                left: 50%;
                object-fit: cover;
                transform: translateX(-50%);
                max-width: 1000px;
                max-height: 1000px;
              "
            />
          </el-col>
          <el-col :span="6" class="right-charts">
            <subTop title="使用投入品数据统计" :postion="'right'"></subTop>
            <div class="right-charts-item">
              <inputs></inputs>
            </div>
            <div class="right-charts-item">
              <subTop title="经营主体数据统计" :postion="'right'"></subTop>
              <entitiesCharts></entitiesCharts>
            </div>
            <div class="right-charts-item">
              <subTop title="溯源赋码与扫码数据统计" :postion="'right'"></subTop>
              <traceCharts></traceCharts>
            </div>
          </el-col>
        </el-row>
      </template>
    </baseBg>
  </div>
</template>
<script setup>
import baseBg from '@/components/baseBg.vue';
import subTop from '@/components/subTop.vue';
import comprehensive from './components/comprehensive.vue';
import plantBreedCharts from './components/plantBreedCharts.vue';
import entitiesCharts from './components/entitiesCharts.vue';
import inputs from './components/inputs.vue';
import traceCharts from './components/traceCharts.vue';
import rolllist from './components/rolllist.vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive } from 'vue';

let rollDataList = reactive([
  { title: '数据 1' },
  { title: '数据 2' },
  { title: '数据 3' },
  { title: '数据 4' },
  { title: '数据 5' },
  { title: '数据 6' },
  // 更多项...
]);
</script>
<style lang="scss" scoped>
.data-home-index {
  .left-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .left-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
    background: transparent;
  }

  .right-charts {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .right-charts-item {
    width: 100%;
    height: calc((100% - 30px) / 3);
  }
}
</style>
