<script setup lang="ts">
import { onMounted, ref } from 'vue';
import './supplierListBox.less'
import shopIcon from '../../../../assets/image/shopIcon.png'
import { handleGetSupplierList, handleGetSupplierListChain } from '../../service';
import supplierIcon from '../../../../assets/image/supplierIcon.png'

// 供应商列表
let supplierList = ref<any>([])


onMounted(async () => {
    await handleGetData()
})


// 拿到数据的方法
const handleGetData = async () => {
    const req: any = {
        ProvinceCode: "530000",
        StatisticsMonth: "202505"
    }
    const data = await handleGetSupplierListChain(req)
    console.log('handleGetSupplierListChainhandleGetSupplierListChain', data);

    supplierList.value = data.slice(0, 11)
}


</script>

<template>
    <div class="supplierListBox">
        <div class="supplierListItem" v-for="(item, index) in supplierList" :key="index">
            <!-- <div class="supplierListLeft">
                <img class="supplierIcon" :src="item.Icon" />
            </div> -->

            <div class="supplierListRight">
                <div class="supplierListNamebox">
                    <img class="supplierListIcon" :src="supplierIcon" />
                    <div class="supplierListName">{{ item.SupplierName || '' }}</div>
                </div>

                <div class="supplierListContent">
                    <!-- <img class="shopIcon" :src="shopIcon" /> -->
                    <span class="shopValue">{{ item.VarietyCount }}</span>
                    <span class="shopUnit">种</span>

                    <!-- <span class="shopLabel">送达率</span>
                    <span class="shopValue">{{ item.DeliverRate || '-' }}</span>
                    <span class="shopUnit">%</span> -->
                </div>
            </div>
        </div>
    </div>
</template>