<template>
    <up-swipe-action>
        <up-swipe-action-item :disabled="disabled" v-for="item in list" :key="item.itemid" :options="options1"
            @click="onClick(item)">
            <view class="item">
                <view class="left" @click.stop="previewImge(item.imageUrl)">
                    <up-image :show-loading="true" :src="item.imageUrl" width="100%" height="100%" />
                </view>
                <view class="right">
                    <view class="itemname">
                        {{ item.itemname || '--' }}
                    </view>
                    <view class="row">
                        分类：{{ item.bomfullname || '--' }}
                    </view>
                    <view class="row">
                        型号：{{ item.model || '--' }}
                    </view>
                    <view class="row">
                        售价：<text class="price">{{ $Http.formatNumber(item.price) }}</text>
                    </view>
                    <view class="number">
                        <up-number-box :disabled="disabled" v-model="item.qty" @change="valChange" />
                    </view>
                </view>
            </view>
        </up-swipe-action-item>
    </up-swipe-action>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive } from 'vue';
import { getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
const emits = defineEmits(['deleteItem']);
const props = defineProps({
    list: {
        type: Array
    },
    deleteItem: {
        type: Function
    },
    disabled: {
        type: Boolean,
        default: false
    }
});

// 使用 reactive 创建响应式对象  
const options1 = reactive([{
    text: '删除',
    style: {
        backgroundColor: '#FA5151'
    }
}]);

function onClick(item) {
    uni.showModal({
        title: '提示',
        content: `是否确定删除“${item.itemname || '该产品'}”？`,
        confirmText: '删除',
        success: ({ confirm }) => {
            if (confirm) {
                emits('deleteItem', item);
            }
        },
    })
}

function valChange(e) {
    console.log(e)
}

function previewImge(url) {
    if (!url) return;
    uni.previewImage({
        urls: [url],
        current: url
    });
}
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    width: 100%;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 16rpx;
    padding-left: 0;
    box-sizing: border-box;
    margin-top: 16rpx;

    .left {
        flex-shrink: 0;
        width: 174rpx;
        height: 174rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        border: 2rpx solid #707070;
        margin-right: 20rpx;
        overflow: hidden;
    }

    .right {
        position: relative;
        flex: 1;

        .itemname {
            line-height: 38rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
        }

        .row {
            line-height: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-size: 24rpx;
            color: #999999;

            .price {
                color: #FA5151;
            }
        }

        .number {
            position: absolute;
            right: 0rpx;
            bottom: 0rpx;
        }

    }
}

.item:first-child {
    margin-top: 0;
}
</style>