<template>
  <div class="home-comprehensive-warp">
    <el-row :gutter="10" class="data-item-row">
      <el-col
        v-for="(n, index) in datalist"
        :key="index"
        :span="12"
        class="data-item"
        :style="{ height: 'calc(100%' + ' / ' + datalist.length + ')' }"
      >
        <div class="data-warp">
          <span class="label">{{ n.label }}</span>
          <span class="value">{{ n.value }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: '统计分析',
  },
  postion: {
    type: String,
    default: 'left',
  },
});

let topTitle = ref('');
let pos = ref('');

const datalist = reactive([
  { label: '农机使用(台)', value: 8000 },
  { label: '农药使用(吨)', value: 5000 },
  { label: '肥料使用(吨)', value: 9000 },
  { label: '种源使用', value: 4800 },
  { label: '兽药(吨)', value: 10 },
  { label: '饲料(吨)', value: 88943 },
]);

onMounted(() => {
  if (datalist.length) {
    datalist.forEach((m, index) => {
      let num = 100;
      m.value = (m.value + Math.random() + num).toFixed(2);
    });
  }
});

watch(
  () => (props.title, props.postion),
  () => {
    topTitle.value = props.title;
    pos.value = props.postion;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.home-comprehensive-warp {
  height: 100%;
  .data-item-row {
    height: 100%;
  }
  .data-item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
  }
  .data-warp {
    padding: 8px;

    .label,
    .value {
      display: inline-block;
      width: 100%;
    }
    .label {
      color: #fff;
      font-size: 14px;
    }
    .value {
      color: #6cd1f9;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
