<template>
  
  <div class="show-data">
    <div class="left-data-item">
      <div class="item-mark"></div>
      <div class="item-value">
        <div>{{`已办结${ybjzs}个`}}</div>
        <div>{{`共${dataProcessingCount(ybjmj)}亩`}}</div>
      </div>
    </div>
    <div class="right-data-item">
      <div class="item-value">
        <div>{{`未办结${wbjzs}个`}}</div>
        <div>{{`共${dataProcessingCount(wbjmj)}亩`}}</div>
      </div>
      <div class="item-mark"></div>
    </div>
    <div style="width: 150px;position: absolute; top:50%;left:50%;transform:translate(-50%, -90%);z-index:1;">
      <div style="font-family: DIN;
font-weight: 500;
font-size: 46px;
color: #FFFFFF;
margin-bottom:9px;
display:flex;
justify-content:center;">{{totalzs}}</div>
      <div style="font-family: Microsoft YaHei;
font-weight: 400;
font-size: 17px;
color: #FFFFFF;
display:flex;
justify-content:center;">总数量</div>
    </div>
    <div class="left-bg"></div>
    <div class="center-bg"></div>
    <div class="right-bg"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, watch } from "vue"
import { GetTotalAndAreaByType } from '@/api/statistical/index.ts'
import { dataProcessingCount } from '@/views/demo/tiankongdi/util.ts'

const totalzs = ref(0)
const wbjmj = ref(0)
const wbjzs = ref(0)
const ybjmj = ref(0)
const ybjzs = ref(0)

const props = defineProps(['countyId','landType'])
onMounted(() => {
  getData()
})
const getData = () => {
  GetTotalAndAreaByType({countyid: props.countyId,type:props.landType}).then(res => {
    wbjmj.value = res.wbjmj
    wbjzs.value = res.wbjzs
    ybjmj.value = res.ybjmj
    ybjzs.value = res.ybjzs
    totalzs.value = res.totalzs
  })
}
watch(() => [props.countyId,props.landType], () => {
  getData()
})

</script>

<style lang="scss" scoped>
  .show-data{
    height: 142px;
    // padding-top: 23px;
    position: relative;
    .left-data-item{
      display: flex;
      .item-mark{
        width: 2px;
        height: 33px;
        background: #1B62BA;
        margin-right:12px;
      }
      .item-value{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #7EBBFF;
        margin-bottom: 9px;
      }
    }
    .right-data-item{
      display: flex;
      position: absolute;
      right: 0;
      bottom: 30px;
      .item-mark{
        width: 2px;
        height: 33px;
        background: #04F4C3;
        
      }
      .item-value{
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #01FFC7;
        margin-bottom: 8px;
        margin-right:9px;
      }
    }
    .left-bg{
      position: absolute;
      left: 14px;
      width: 136px;
      height:38px;
      background: url('@/assets/statistical/select_left_bg.png') no-repeat;
      background-size: cover;
    }
    .center-bg{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 150px;
      height:85px;
      background: url('@/assets/statistical/select_center_bg.png') no-repeat;
      background-size: cover;
    }
    .right-bg{
      position: absolute;
      width: 136px;
      height:39px;
      background: url('@/assets/statistical/select_right_bg.png') no-repeat;
      background-size: cover;
      right: 14px;
      bottom: 30px;
    }
  }
  
</style>
