<template>
    <view>
        <MBLoading v-if="loading" />
        <uni-card
            v-for="item in goodsList"
            :key="item.goodsName"
            :title="item.goodsName"
        >
            <view class="context">
                <view class="label">
                    <text>件装数:</text>
                    <text>{{ item.packingNum }}</text>
                </view>
                <view class="label">
                    <text>单价:</text>
                    <text>{{ formatPrice(item.price) }}</text>
                </view>
				<view class="label">
				    <text>数量分配:</text>
				    <text>{{ item.goodsnum }}</text>
				</view>
				<view class="label">
				    <text>件数:</text>
				    <text>{{ item.packNumWithUnit }}</text>
				</view>
                <view class="label">
                    <text>小计:</text>
                    <text>{{ formatPrice(item.price * item.goodsnum ) }}</text>
                </view>
                
                <view class="label">
                    <text>补差分配:</text>
                    <text>{{ item.piaokou }}</text>
                </view>
				<view class="label">
				    <text>备注:</text>
				    <text>{{ item.remark }}</text>
				</view>
            </view>
        </uni-card>
        <view v-if="!goodsList || goodsList.length === 0" class="empty-data">
            <text>暂无商品信息</text>
        </view>
    </view>
</template>

<script setup>
import { defineProps } from 'vue'
import { formatPrice } from "@/utils/utils.js";
import MBLoading from "@/components/MB/MBLoading.vue";

const props = defineProps({
    goodsList: {
        type: Array,
        default: () => []
    },
    loading: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped>
.context {
    font-size: 14px;
}
.context .label {
    font-size: 14px;
}
.empty-data {
    text-align: center;
    padding: 30px;
    color: #999;
    font-size: 14px;
}
</style>