<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-我的购物车</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/shopping/cart.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 购物车列表 -->
<div id="shoppingCart">
    <!--loading-->
    <div v-if="listLoading" class="loading">
        <img src="/img/base/loading.gif">
    </div>
    <!--数据为空-->
    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
        <img src="/img/common/empty.png">
        <div class="msg">
            <p>购物车空空如也，快去<a href="/">商城</a>，逛逛吧~</p>
        </div>
    </div>
    <!--列表-->
    <div v-else class="wrap">
        <div class="pageTitle">
            <div class="step">
                <span class="on">我的购物车</span>
                 <label class="line"></label>
                <span>核对订单信息</span>
                 <label class="line"></label>
                <span>成功提交订单</span>
            </div>
            <h1>我的购物车</h1>
        </div>
        <div class="listWrap">
            <div v-if="isPC" class="cartTit clear">
                <div class="c0"><input class="check" type="checkbox" @change="ckeckAll()" v-model="allChecked"></div>
                <div class="c1">全选</div>
                <div class="c2">商品信息</div>
                <div class="c4">单价（元）</div>
                <div class="c5">数量</div>
                <div class="c6">小计（元）</div>
                <div class="c7">操作</div>
            </div>
            <div class="supplierItem" v-for="supplier,index in listData">
                <div class="supplierTit">
                    <div class="c0">
                        <input class="check" type="checkbox" @change="ckeckSupplier($event, supplier.checked)" v-model="supplier.checked">
                    </div>
                    <a  :href="'/supplier/index.html?id='+supplier.id" target="_blank">
                        <img class="img" :src="supplier.logo">
                        <span class="name" v-text="supplier.name"></span>
                    </a>
                    <!--店铺促销-->
                    <div class="price">
                        <div v-if="supplier.promotions" class="priceTag">
                            <i @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="supplier.promotions.name"></i>
                            <div class="promotion mFixed">
                                <div>
                                    <p class="t">
                                        <em v-if="supplier.promotions.mode==2">{{supplier.promotions.name+'，满 ¥'+toFloat(supplier.promotions.touchPrice)+' 减 ¥'+toFloat(supplier.promotions.reducedPrice)}}</em>
                                        <em v-if="supplier.promotions.mode==3">{{supplier.promotions.name+'，满 ¥'+toFloat(supplier.promotions.touchPrice)+' 赠送商品'}}</em>
                                    </p>
                                    <p>促销时间：<em v-if="supplier.promotions.status==1">不限时</em><em v-else>{{supplier.promotions.beginTime.substr(0,10)+' ~ '+supplier.promotions.endTime.substr(0,10)}}</em></p>
                                    <template v-if="supplier.promotions.mode==3">
                                        <p>赠品：</p>
                                        <p>
                                            <span v-for="g in supplier.promotions.giftList" class="p">
                                                <img :src="g.image">
                                                <span v-text="g.name"></span>
                                                <span v-text="'× '+g.number"></span>
                                            </span>
                                        </p>
                                    </template>
                                    <p class="r"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cartItem clear"  v-for="cart in supplier.cartList" >
                    <div class="c0">
                        <input class="check" type="checkbox" name="cartList" :value="cart.productId" v-model="submitIds" @change="computedPrice()">
                    </div>
                    <div class="c1"><a :href="'/product-'+cart.productId+'.html'" target="_blank">
                        <img class="image" :src="cart.image">
                    </a></div>
                    <div class="c2">
                        <a class="name" :href="'/product-'+cart.productId+'.html'" target="_blank">
                            <span v-text="cart.name"></span>
                        </a>
                    </div>
                    <div class="c4">
                        <div class="price">
                            <template v-if="cart.actStatus==1 && cart.promotions && cart.promotions.type==1 && cart.promotions.mode==1">
                                <del v-text="'¥'+toFloat(cart.originalPrice)"></del>
                            </template>
                            <template v-else>
                                <em v-text="'¥'+toFloat(cart.price)"></em>
                            </template>
                            <!-- 促销活动 -->
                            <div v-if="cart.actStatus==1 && cart.promotions" class="priceTag">
                                <i v-if="cart.promotions.type==1 && cart.promotions.mode==1" @click="toggleThisLadder($event)" class="tag icon mIcon" v-text="cart.promotions.name+'：¥'+toFloat(cart.promotions.touchPrice)"></i>
                                <i v-else class="tag icon mIcon" @click="toggleThisLadder($event)" v-text="cart.promotions?cart.promotions.name:''"></i>
                                <div class="promotion mFixed">
                                    <div>
                                        <p class="t">
                                            <em v-if="cart.promotions.type==1 && cart.promotions.mode==1">{{cart.promotions.name+'：¥'+toFloat(cart.promotions.touchPrice)}}</em>
                                            <em v-if="cart.promotions.mode==2">{{cart.promotions.name+'，满 ¥'+toFloat(cart.promotions.touchPrice)+' 减 ¥'+toFloat(cart.promotions.reducedPrice)}}</em>
                                            <em v-if="cart.promotions.mode==3">{{cart.promotions.name+'，满 ¥'+toFloat(cart.promotions.touchPrice)+' 赠送商品'}}</em>
                                        </p>
                                        <p>促销时间：<em v-if="cart.promotions.status==1">不限时</em><em v-else>{{cart.promotions.beginTime.substr(0,10)+' ~ '+cart.promotions.endTime.substr(0,10)}}</em></p>
                                        <p v-if="cart.promotions.type==2" class="r"><a class="more" :href="'/product/promotions.html?id='+cart.promotions.id">更多凑单商品>>></a></p>
                                        <template v-if="cart.promotions.mode==3">
                                            <p>赠品：</p>
                                            <p>
                                                <span v-for="g in cart.promotions.giftList" class="p">
                                                    <img :src="g.image">
                                                    <span v-text="g.name"></span>
                                                    <span v-text="'× '+g.number"></span>
                                                </span>
                                            </p>
                                        </template>
                                        <p class="r"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                    </div>
                                </div>
                            </div>
                            <!-- 阶梯价 -->
                            <div v-else-if="cart.ladderFlag" class="priceTag">
                                <i class="tag icon mIcon" @click="toggleThisLadder($event)">阶梯价格</i>
                                <div class="ladder mFixed">
                                    <span>
                                        <em class="t"><i>价格</i><i>起订量</i></em>
                                        <em v-for="l in cart.ladderPrices">
                                            <i class="p">¥{{toFloat(l.buyPrice)}}</i>
                                            <i>{{l.numRange}}</i>
                                        </em>
                                        <em @click="hideThisLadder($event)" class="close">了解</em>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="c5">
                        <span class="number">
                            <em class="sub" @click="cartNumberSub(cart)">-</em>
                            <input type="number" :value="cart.number" v-model="cart.number" @change="cartNumberChange(cart)">
                            <em class="add" @click="cartNumberAdd(cart)">+</em>
                        </span>
                        <input type="hidden" :value="cart.step"></div>
                        <div v-if="isPC" class="c6"><span v-text="'¥'+toFloat(cart.price*cart.number)"></span></div>
                        <div v-if="isPC" class="c7"><span class="del" @click="deleteCart(cart.productId)">×<em class="tips">删除</em></span></div>
                    </div>
                <div class="supplierBtn">
                    <span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span>
                </div>
            </div>
            <div class="invalidTit" v-if="invalidData.length>0">
                <div class="tit">失效商品 <em v-text="invalidData.length"></em> 件</div>
                <span class="delAll">清空失效商品</span>
            </div>
            <div class="supplierItem disable" v-for="cart in invalidData">
                <div class="cartItem clear">
                    <div class="c0"><input class="check" type="checkbox" readonly disabled></div>
                    <div class="c1">
                        <img class="image" :src="cart.image">
                    </div>
                    <div class="c2">
                        <span class="name"><em class="tag">失效商品</em>{{cart.name}}</span>
                    </div>
                    <div class="c10">
                        <em v-if="cart.status==1">商品已丢失</em>
                        <em v-else-if="cart.status==2">商品已停售</em>
                        <em v-else-if="cart.status==3">商品已下架</em>
                        <em v-else-if="cart.status==4">商品已售罄</em>
                        <em v-else-if="cart.status==5">价格仅会员可见，您不能购买</em>
                        <em v-else-if="cart.status==6">未公开价格</em>
                        <em v-else-if="cart.status==7">库存不足</em>
                        <em v-else>商品已失效</em>
                    </div>
                    <div v-if="isPC" class="c6"><span class="del">×<em class="tips">删除</em></span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="summaryWrap">
        <div class="summary">
            <div class="left mfbt">
                <div class="item">
                    <input class="check" type="checkbox" @change="ckeckAll()" v-model="allChecked">
                    <span>全选</span>
                    <a class="delete" href="javascript:void(0);" @click="deleteSelected()">删除</a>
                </div>
                <div class="item">商品种类：<em v-text="kindCount"></em></div>
                <div class="item">商品数量：<em v-text="totalCount"></em></div>
            </div>
            <div class="right mfbt">
                <div class="item">合计：<em v-text="'¥'+toFloat(totalPrice)"></em><span class="del"><del v-text="'¥'+toFloat(originalPrice)"></del><em>减{{'¥'+toFloat(reducedPrice)}}</em></span></div>
                <a class="submit" href="javascript:void(0);" @click="submitCart()">去结算</a>
            </div>
        </div>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/shopping/cart.js(v=${version})}"></script>
</body>
</html>
