<template>
  <div class="home-comprehensive-warp">
    <div class="data-item-row">
      <div
        v-for="(n, index) in datalist"
        :key="index"
        :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg.png') + ')' }"
        class="data-item"
      >
        <div class="data-warp">
          <div class="small-bg">
            <img :src="getAssetsFile('images/vsualized/home/partbg1.png')" />
            <img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
          </div>
          <div class="data-pos">
            <div class="data-pos-center">
              <div class="pos-center">
                <span class="label">{{ n.label }}</span>
                <span class="value">{{ n.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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: 27.88, icon: 'farmers.png' },
  { label: '耕地面积(万亩)', value: 103.05, icon: 'area.png' },
  { label: '农业总产值(亿元)', value: 92.81, icon: 'outputVal.png' },
  { label: '人均增收(万元)', value: 1.87, icon: 'Increase.png' },
]);

onMounted(() => {
  if (datalist.length) {
    datalist.forEach((m, index) => {
      let num = 0;
      switch (index) {
        case 0:
          num = 20;
          break;
        case 1:
          num = 100;
          break;
        case 2:
          num = 90;
          break;
        case 3:
          num = 1;
          break;
        default:
          num = 10;
          break;
      }

      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%;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .data-item {
    height: calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    position: relative;
  }
  .data-warp {
    padding: 8px;
    text-align: center;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    padding-left: 20px;
    .small-bg,
    .data-pos {
      display: inline-flex;
      vertical-align: middle;
      .data-pos-center {
        display: inline-flex;
        justify-content: space-around;
        flex-direction: column;
        height: 100%;
        .pos-center {
        }
      }
    }
    .small-bg {
      width: 54px;
      height: 54px;
      position: relative;
      .img-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 38%;
        height: 38%;
      }
    }
    .data-pos {
      width: calc(100% - 54px);
      .label,
      .value {
        display: inline-block;
        width: 100%;
      }
      .label {
        color: #fff;
        font-size: 13px;
      }
      .value {
        color: #6beff9;
        font-size: 16px;
        font-weight: bold;
        margin-top: 6px;
      }
    }
  }
}
</style>
