<template>
  <div class="statistical">
    <img src="/statistical/left_statistical.png" />
    <div class="statistical_div">
      <a-row>
        <a-col :span="10" @click="handlerChangePolygonType('违法')">
          <span class="statistical_div_dot" style="background: #F70303" />
          <span class="statistical_div_span"> 违法 </span>
        </a-col>
        <a-col :span="10" @click="handlerChangePolygonType('补办手续')">
          <span class="statistical_div_dot" style="background: #AD04F4" />
          <span class="statistical_div_span"> 补办手续 </span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10" @click="handlerChangePolygonType('合法')">
          <span class="statistical_div_dot" style="background: #0AF703" />
          <span class="statistical_div_span"> 合法 </span>
        </a-col>
        <a-col :span="10" @click="handlerChangePolygonType('拆除复耕')">
          <span class="statistical_div_dot" style="background: #F4E004" />
          <span class="statistical_div_span"> 拆除复耕 </span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10" @click="handlerChangePolygonType('其他')">
          <span class="statistical_div_dot" style="background: #0382F7" />
          <span class="statistical_div_span"> 其他 </span>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineEmits, defineProps } from 'vue';
  const emits = defineEmits(['handlerChangePolygonType']);
  const props = defineProps(['bi']);

  function handlerChangePolygonType(type: String): void {
    emits('handlerChangePolygonType', type);
  }
</script>

<style lang="less" scoped>
  .statistical {
    cursor: pointer;

    img {
      position: relative;
      height: 100px;
      width: 200px;
    }

    &_div {
      position: relative;
      top: -75px;
      left: 30px;

      &_dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        position: relative;
        left: -2px;
        top: -2px;
        margin-right: 5px;
        margin-bottom: 17px;
        // border-radius: 50%;
      }

      &_span {
        position: relative;
        top: -20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 13px;
        color: #7ebbff;
      }
    }
  }
</style>
