<template>
  <div class="w-90% mx-auto left1">
    <Model title="建设用地调查情况">
      <div class="w-98% mx-auto grid grid-cols-2 py-2 pt-1 cursor-pointer">
        <div class="bg flex mx-auto w-90% py-5 my-3" v-for="(v, index) in list" :key="v.title" @click="change(index)">
          <img class="w-15 h-12 ml-2" :src="v.img" alt="" />
          <div class="" :class="`${num === index ? 'text-[#0293CC]' : ''}`">
            <div class="text-lg">{{ v.title }}</div>
            <div class="text-2xl">{{ v.value }}</div>
          </div>
        </div>
      </div>
    </Model>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import Model from './model.vue';
  import img1 from '@/assets/images/onePic/ic_zongdikuai@2x.png';
  import img2 from '@/assets/images/onePic/ic_diaochazhong@2x.png';
  import img3 from '@/assets/images/onePic/ic_weichaobiao@2x.png';
  import img4 from '@/assets/images/onePic/ic_chaobiao@2x.png';
  import { jsyddcqk } from '../api';

  const emit = defineEmits('changes');
  const num = ref(0);
  const list = ref([
    {
      title: '总地块',
      value: 0,
      img: img1,
    },
    {
      title: '未调查地块',
      value: 0,
      img: img2,
    },
    {
      title: '未超标地块',
      value: 0,
      img: img3,
    },
    {
      title: '超标地块',
      value: 0,
      img: img4,
    },
  ]);
  async function init() {
    const res = await jsyddcqk();
    let zs = 0,
      wdc = 0,
      wcb = 0,
      cb = 0;
    res.forEach((v: any) => {
      zs = zs + Number(v.zs);
      wdc = wdc + Number(v.wdc);
      wcb = wcb + Number(v.wcb);
      cb = cb + Number(v.cb);
    });
    list.value[0].value = zs;
    list.value[1].value = wdc;
    list.value[2].value = wcb;
    list.value[3].value = cb;
  }
  init();

  function change(v) {
    num.value = v;
    emit('changes', v);
  }
</script>
<style lang="less" scoped>
  .left1 {
    .bg {
      background: url('@/assets/images/onePic/btn_ic_zongdikuai_bg@2x.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
</style>
