<template>
  <div class="w-90% mx-auto right1">
    <Model title="风险管控和修复名录">
      <div class="flex py-30px w-90% mx-auto">
        <div>
          <div class="flex mb-5">
            <img class="w-10 h-12 mr-3" :src="img1" />
            <div>
              <div>未移出名录地块数量</div>
              <div class="val text-xl">{{ ycz }} <span class="text-sm">家</span></div>
            </div>
          </div>
          <div class="flex">
            <img class="w-10 h-12 mr-3" :src="img2" />
            <div>
              <div>移出名录地块数量</div>
              <div class="val text-xl">{{ wyc }} <span class="text-sm">家</span></div>
            </div>
          </div>
        </div>
        <div class="ml-20px">
          <div class="val bg-val text-4xl text-center py-4 px-6">
            <div class="mb-5">{{ zs }}</div>
          </div>
          <div class="text-xl xf mt-3">修复名录总地块数量</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/weiyichu_ic@2x.png';
  import img2 from '@/assets/images/onePic/yichu_ic@2x.png';
  import { fxgkhxfmlt } from '../api';

  const ycz = ref(0);
  const wyc = ref(0);
  const zs = ref(0);

  async function init() {
    const res = await fxgkhxfmlt();
    res.forEach((v: any) => {
      ycz.value = ycz.value + Number(v.yc);
      wyc.value = wyc.value + Number(v.wyc);
      zs.value = zs.value + Number(v.zs);
    });
  }
  init();
</script>
<style lang="less" scoped>
  // 自定义字体
  @font-face {
    font-family: 'zcool-gdh-Medium';
    src: url('/@/assets/font/zcoo.TTF');
  }
  .right1 {
    .val {
      font-family: 'zcool-gdh-Medium';
      color: #d8f0ff;
    }
    .xf {
      font-family: 'zcool-gdh-Medium';
    }
    .bg-val {
      background: url('@/assets/images/onePic/bg_xiuf@2x.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
</style>
