<template>
    <div class="cart_item" :class="{ active: props.item.active, border: props.border }"
        @click="selectCartItemHandle(index)">
        <div class="name_wrap">
            <span>{{ props.item.product_name }}</span>
            <template v-if="props.item.is_gift">
                <div class="price">
                    <span class="dis" v-if="props.item.is_temporary">
                        ￥{{ formatDecimal(+props.item.discount_sale_amount, 2, true) }}
                    </span>
                    <span class="dis" v-else>
                        ￥{{ formatDecimal(goodsStore.showVipPrice ? +props.item.memberPrice || +props.item.lowPrice :
                            +props.item.lowPrice, 2,
                            true) }}
                    </span>
                    <span v-if="props.item.discount_sale_amount">
                        ￥0.00
                    </span>
                </div>
            </template>
            <template v-else>
                <div class="price" v-if="item.is_time_discount == 1 && item.discount_sale_amount <= 0">
                    <span class="dis">
                        ￥{{ formatDecimal(+item.salePrice, 2, true) }}
                    </span>
                    <span>
                        ￥{{ formatDecimal(+item.time_discount_price, 2, true) }}
                    </span>
                </div>
                <template v-else>
                    <div class="price" v-if="props.item.is_temporary">
                        <span>
                            ￥{{ formatDecimal(+props.item.discount_sale_amount, 2, true) }}
                        </span>
                    </div>
                    <div class="price" v-else>
                        <template v-if="+item.discount_sale_amount > 0">
                            <span class="dis">
                                ￥{{ formatDecimal(+item.salePrice, 2, true) }}
                            </span>
                            <span>
                                ￥{{ formatDecimal(+item.discount_sale_amount, 2, true) }}
                            </span>
                        </template>
                        <div class="flex" v-else>
                            <template v-if="goodsStore.showVipPrice && item.memberPrice > 0">
                                <span class="dis">
                                    ￥{{ formatDecimal(+props.item.salePrice, 2, true) }}
                                </span>
                                <span>
                                    ￥{{ formatDecimal(+props.item.memberPrice, 2, true) }}
                                </span>
                            </template>
                            <span v-else>
                                ￥{{ formatDecimal(+item.salePrice, 2, true) }}
                            </span>
                        </div>
                    </div>
                </template>
            </template>
        </div>
        <div class="remark_wrap" @click="showRemark(props.item)">
            备注：<span class="t">{{ props.item.remark }}</span><el-icon class="icon" v-if="props.type == 'cart'">
                <EditPen />
            </el-icon>
        </div>
        <div class="sku_list" v-if="props.item.sku_name">
            <div class="tag" v-for="item in item.sku_name.split(',')">
                {{ item }}
            </div>
        </div>
        <div class="grooup_wrap" v-if="props.item.goods_type == 'package' && props.item.group_text">
            {{ props.item.group_type == 0 ? '固定套餐：' : '自选套餐：' }}
            <span>{{ props.item.group_text }}</span>
        </div>
        <div class="num">
            <div class="left">
                <div class="icon_item zen" v-if="item.is_time_discount && item.discount_sale_amount <= 0">
                    <span class="t">限时折扣</span>
                </div>
                <div class="icon_item zen" v-if="props.item.is_gift">
                    <span class="t">赠</span>
                </div>
                <div class="icon_item bao" v-if="+props.item.pack_number">
                    <span class="t">打包({{ +props.item.pack_number }})</span>
                </div>
                <div class="icon_item tui" v-if="props.item.returnNum">
                    <span class="t">退({{ props.item.returnNum }})</span>
                </div>
                <div class="icon_item lin" v-if="props.item.is_temporary == 1">
                    <span class="t">临</span>
                </div>
                <div class="icon_item zhe" v-if="props.item.discount_sale_amount > 0 && !props.item.is_temporary">
                    <span class="t">折</span>
                </div>
                <div class="icon_item chu" v-if="props.item.is_print == 0">
                    <span class="t">免厨打印</span>
                </div>
            </div>
            <el-text class="t">x{{ formatDecimal(+props.item.number, 2, true) }}</el-text>
        </div>
    </div>
    <!-- 备注 -->
    <remarkModal ref="remarkRef" @success="remarkSuccess" />
</template>

<script setup>
import { ref } from 'vue'
import remarkModal from "@/components/remarkModal.vue";
import { useGoods } from '@/store/goods.js'
import { formatDecimal } from '@/utils/index.js'

const goodsStore = useGoods()

const props = defineProps({
    type: {
        type: String,
        default: 'cart'
    },
    item: {
        type: Object,
        default: {}
    },
    index: {
        type: [String, Number],
        default: 0
    },
    i: {
        type: [String, Number],
        default: 0
    },
    border: {
        type: Boolean,
        default: true
    }
})

// 购物车选中
function selectCartItemHandle() {
    if (props.type == 'cart') {
        goodsStore.selectCartItemHandle(props.index)
    } else if (props.type == 'order') {
        goodsStore.selectOrderItem(props.index, props.i)
    }
}

// 添加单品备注
const remarkRef = ref(null)
function showRemark() {
    if (props.type == 'cart') {
        remarkRef.value.show()
    }
}

// 修改备注
function remarkSuccess(e) {
    goodsStore.operateCart({ ...props.item, remark: e }, 'edit')
}
</script>

<style scoped lang="scss">
.remark_wrap {
    font-size: 14px;
    color: #999;
    padding-top: 10px;

    .icon {
        position: relative;
        top: 2px;
        margin-left: 4px;
    }
}

.cart_item {
    padding: var(--el-font-size-base);

    &.active {
        background-color: var(--primary-color-hover);
    }

    &.border {
        border-bottom: 1px solid #ececec;
    }

    .name_wrap {
        display: flex;
        justify-content: space-between;
        font-size: var(--el-font-size-base);

        .dis {
            color: #999;
            font-size: 12px;
            text-decoration: line-through;
            margin-right: 4px;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        .vip {
            color: var(--el-color-danger);
            margin-left: 4px;
        }
    }

    .sku_list {
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px;

        .tag {
            padding: 2px 6px;
            background-color: var(--el-color-danger);
            color: #fff;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }

    .grooup_wrap {
        padding-top: 10px;
        font-size: 12px;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .num {
        padding-top: var(--el-font-size-base);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding-right: 10px;

            .icon_item {
                $size: 20px;
                height: $size;
                padding: 0 6px;
                border-radius: 2px;
                background-color: #e2e2e2;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 10px;

                &.zen {
                    background-color: #FFB0B1;
                    color: #FF4D4F;
                }

                &.bao {
                    background-color: #52C41A;
                }

                &.tui {
                    background-color: var(--el-color-danger);
                }

                &.lin {
                    background-color: var(--el-color-warning);
                }

                &.zhe {
                    background-color: var(--primary-color);
                }

                &.chu {
                    background-color: #ffe7ba;
                    color: #e69f1c;
                }

                span {
                    font-size: inherit;
                    color: inherit;
                }
            }
        }

        .t {
            font-size: var(--el-font-size-base);
        }
    }
}
</style>