<!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>
                <span>核对订单信息</span>
                <span>成功提交订单</span>
            </div>
            <h1>我的购物车</h1>
        </div>
        <div class="listWrap">
            <div v-if="isPC" class="cartTit clear">
                <div class="c0"><input class="check" type="checkbox"></div>
                <div class="c1">全选</div>
                <div class="c2">商品信息</div>
                <div class="c3">包装规格</div>
                <div class="c4">优惠价</div>
                <div class="c5">数量</div>
                <div class="c6">小计（元）</div>
                <div class="c7">操作</div>
            </div>
            <div class="supplierItem" v-for="supplier in listData">
                <div v-if="!isPC" class="supplierTit">
                    <div class="c0"><input class="check" type="checkbox"></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>
                <div class="cartItem clear"  v-for="cart in supplier.cartList">
                    <div class="c0"><input class="check" type="checkbox" name="cartList"></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">
                            <i v-if="cart.ladderFlag" class="priTag">阶梯价格</i>
                            <span v-text="cart.name"></span>
                        </a>
                    </div>
                    <div class="c3"><span v-if="!isPC">包装规格：</span><span class="unit" v-text="cart.unit"></span></div>
                    <div class="c4">
                        <span class="price">
                            <em v-text="'¥'+toFloat(cart.price)"></em>
                            <span v-if="cart.ladderFlag" class="info">
                                <i v-if="isPC" class="tag">阶梯价格</i>
                                <i class="i" @click="showThisLadder($event)">?</i>
                                <span 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 v-if="l.maxNum>0">{{l.buyNum+' ~ '+l.maxNum}}</i>
                                            <i v-else>≥ {{l.buyNum}}</i>
                                        </em>
                                        <em v-if="!isPC" @click="hideThisLadder($event)" class="close">了解</em>
                                    </span>
                                </span>
                            </span>
                        </span>
                    </div>
                    <div class="c5">
                        <span class="number">
                            <em class="sub">-</em>
                            <input type="number" :value="cart.number">
                            <em class="add">+</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">×<em class="tips">删除</em></span></div>
                </div>
                <div class="supplierInfo">
                    <div v-if="isPC" class="c0"><input class="check" type="checkbox"></div>
                    <div v-if="isPC" class="c2"><a class="name" :href="'/supplier/index.html?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
                    <div class="c7"><span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span></div>
                </div>
            </div>
            <div class="invalidTit">
                <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">
                    <span>全选</span>
                    <a class="delete" href="javascript:void(0);">删除</a>
                </div>
                <div class="item">商品种类：<em v-text="totalSize"></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></div>
                <a class="submit" href="javascript:void(0);">去结算</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>
