<template>
  <a-row :gutter="24">
    <a-col class="gutter-row" :span="6">
      <div class="bg-#fff b-rd-10px py-24px px-32px h-250px text-center">
        <div class="flex justify-between mb-14px">
          <div class="text-22px fw-500 text-#223354">Available Sensors</div>
          <div class="text-14px text-#767676 flex items-center cursor-pointer">
            Details
            <i-custom-arrow_right class="w-16px h-16px" />
          </div>
        </div>
        <a-divider class="!my-0" />
        <img src="@/assets/images/data_img.png" class="w-30px h-30px mt-16px mb-14px" alt="" srcset="" />
        <div class="text-36px mb-14px fw-500 text-#223354">$ 6913.62</div>
        <div class="text-14px text-#3D3D3D">Commission earned from customers and orders</div>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="10">
      <div class="b-rd-10px h-250px bg-#fff py-24px px-32px">
        <div class="mb-16px h-24px lh-24px">
          <a-date-picker v-model:value="condition.year" picker="year" class="w-120px h-24px b-rd-4px"/>
        </div>
        <a-row :gutter="20">
          <a-col class="gutter-row" :span="8">
            <div class="p-18px b-rd-10px bg-#00DD99/7">
              <img src="@/assets/images/people_group.png" class="w-30px h-30px" alt="" srcset="" />
              <div title="Number of Customers" class="text-18px text-#3D3D3D my-20px fw-500 line-clamp-1">Number of Customers</div>
              <div class="flex text-#223354 items-end">
                <span class="text-36px fw-500">100</span>
                <span class="text-18px fw-500 pb-5px ml-4px">people</span>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="p-18px b-rd-10px bg-#00DD99/7">
              <img src="@/assets/images/people_single.png" class="w-30px h-30px" alt="" srcset="" />
              <div title="Customer Commission" class="text-18px text-#3D3D3D my-20px fw-500 line-clamp-1">Customer Commission​</div>
              <div class="flex text-#223354 items-end">
                <span class="text-36px fw-500">$100</span>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="p-18px b-rd-10px bg-#00DD99/7">
              <img src="@/assets/images/bill.png" class="w-30px h-30px" alt="" srcset="" />
              <div title="Order commission" class="text-18px text-#3D3D3D my-20px fw-500 line-clamp-1">Order commission</div>
              <div class="flex text-#223354 items-end">
                <span class="text-36px fw-500">$3692</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="4">
      <div class="bg-#fff flex items-center justify-center h-250px b-rd-10px py-24px px-32px">
        <div class="text-center pt-20px">
          <img src="@/assets/images/icon_intro.png" class="w-44px h-44px" alt="" srcset="" />
          <div class="text-22px text-#223354 mt-20px mb-30px fw-500">Customer Introduction</div>
          <div class="w-100px py-10px b-rd-300px bg-#00DD99 mx-auto cursor-pointer">
            <img src="@/assets/images/right_white_arrow.png" class="w-30px h-15px" alt="" srcset="" />
          </div>
        </div>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="4">
      <div class="bg-#fff flex items-center justify-center h-250px b-rd-10px py-24px px-32px">
        <div class="text-center pt-20px">
          <img src="@/assets/images/icon_withdrawal.png" class="w-44px h-44px" alt="" srcset="" />
          <div class="text-22px text-#223354 mt-20px mb-30px fw-500">Customer Introduction</div>
          <div class="w-100px py-10px b-rd-300px bg-#00DD99 mx-auto cursor-pointer">
            <img src="@/assets/images/right_white_arrow.png" class="w-30px h-15px" alt="" srcset="" />
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { useGetData } from '../useGetData'

const { condition } = useGetData()
</script>
<style scoped lang="less"></style>
