<!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/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/supplier-center/shop/goods.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<h1></h1>
<!-- 我的采美 -->
<div id="myGoods">
    <div class="navLayout goods-container" v-cloak="">
        <div class="crumbs" v-if="isPC">
            <span>我的店铺</span>
            <span>&gt;</span>
            <span>我的商品</span>
        </div>
        <div class="wrap clear">
            <!--左侧面包屑-->
            <template th:replace="supplier-center/components/tableft"></template>
            <div class="right">
                <div class="head-top">
                    <form action="">
                        <div class='form-row low'>
                            <span>商品货号：</span>
                            <input type="text" id="name-buyer" v-model="listQuery.productCode" class="Buyer"
                                   placeholder="请输入商品货号" maxlength="20">
                        </div>
                        <div class="form-row low">
                            <span>商品名称:</span>
                            <input class="Buyer" v-model="listQuery.name" type="text" maxlength="25"
                                   placeholder="请输入商品名称">
                        </div>
                        <div class="form-row">
                            状态：
                            <select name="" id="settlement-status" class="state " @change="SelectChangeStateFn($event)">
                                <option value="">全部</option>
                                <option value="1">待审核</option>
                                <option value="8">审核未通过</option>
                                <option value="2">已上架</option>
                                <option value="3">已下架</option>
                                <option value="9">已冻结</option>
                                <option value="10">已隐身</option>
                                <option value="0">已删除</option>
                            </select>
                        </div>
                        <div class="form-row">
                            主推商品：
                            <select name="" class="state" @change="SelectChangeInsideFn($event)">
                                <option value="">请选择</option>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                        <div class="form-row fenlei">
                            <span class="">分类：</span>
                            <select name="" class="state " @change="ChangeClassificationFirst($event)">
                                <option value="">全部</option>
                                <option v-for="x in classificationFirstList" :value="x.bigTypeID">{{x.name}}</option>
                            </select>
                            <select name="" class="state " @change="ChangeClassificationTwo($event)">
                                <option value="">二级分类</option>
                                <option v-for="x in classificationTwoList" :value="x.smallTypeID">{{x.name}}</option>
                            </select>
                            <select name="" class="state " @change="ChangeClassificationThree($event)">
                                <option value="">三级分类</option>
                                <option v-for="x in classificationThreeList" :value="x.tinyTypeID">{{x.name}}</option>
                            </select>
                        </div>
                        <div id="newBtn">
                            <div class="query-btn" @click="SearchQueryListFn">搜索</div>
                        </div>
                    </form>
                </div>
                <div class="goods-main" v-if="productsList.length>0">
                    <div class="goods-table" width="100%" v-if="isPC">
                        <ul class="goods-title">
                            <li>编号</li>
                            <li>商品主图</li>
                            <li>分类</li>
                            <li>市场价/售价</li>
                            <li>状态</li>
                            <li>操作</li>
                        </ul>
                        <div class="tbody">
                            <ul v-for="(product, index) in productsList" :key="index"
                                :class="[product.productsChecked ?'bg-gouxuan':'']">
                                <li>
                                    <div class="checkbox checklist" @click='ischeck(product)'>
                                        <div class="box icon"
                                             :class="[product.productsChecked ?'icon-gouxuan':'icon-weigouxuan']"></div>
                                        <span> {{product.productID}}</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="good-info">
                                        <img :src="product.mainImage" :alt="product.name">
                                        <p class="good-name">{{product.name}}</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="good-classFly">
                                        <p>{{product.typeName}}</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="good-price">
                                        <p>￥{{toFixedFn(product.normalPrice)}}</p>
                                        <p>/</p>
                                        <p>￥{{toFixedFn(product.price1)}}</p>
                                    </div>
                                      <span v-if="product.promotions!=null" class="priceTag">
                                          <i class="tag icon mIcon" @click="toggleThisLadder($event)" v-text="product.promotions?product.promotions.name:''"></i>
                                          <div class="promotion mFixed">
                                                    <div>
                                                        <p class="t">
                                                            <em v-if="product.promotions.mode==2">{{product.promotions.name+'，满 ¥'+toFloat(product.promotions.touchPrice)+' 减 ¥'+toFloat(product.promotions.reducedPrice)}}</em>
                                                            <em v-if="product.promotions.mode==3">{{product.promotions.name+'，满 ¥'+toFloat(product.promotions.touchPrice)+' 赠送商品'}}</em>
                                                        </p>
                                                        <p>促销时间：<em >不限时</em><em v-else>{{product.promotions.beginTime.substr(0,10)+' ~ '+product.promotions.endTime.substr(0,10)}}</em></p>
                                                        <p v-if="product.promotions.type==2" class="r"><a class="more" :href="'/product/promotions.html?id='+product.promotions.id">更多凑单商品>>></a></p>
                                                        <template v-if="product.promotions.mode==3">
                                                            <p>赠品：</p>
                                                            <p>
                                                                <span v-for="g in product.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="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                                    </div>
                                                </div>
                                      </span>
                                </li>
                                <li>
                                    <p class="status" :style="{color: StatusColorFn(product.validFlag)}">
                                        {{StatusTextFn(product.validFlag)}}</p>
                                </li>
                                <li>
                                    <div class="good-handle">
                                        <a class="btn " href="javascript: void(0);"
                                           v-if="['0','1','2','3','8','9'].indexOf(product.validFlag)!=-1"
                                           @click="editGoodFn(product)">编辑</a>
                                            <a class="btn primary" href="javascript: void(0);"
                                           v-if="['1','2'].indexOf(product.validFlag)!=-1"
                                           @click="pageLinkDetils(product)">预览商品</a>
                                           <a class="btn " href="javascript: void(0);"
                                           v-if="['2'].indexOf(product.validFlag)!=-1" @click="ItemDownshelf(product)">下架</a>
                                           <a class="btn danger" href="javascript: void(0);" v-if="product.isDelFeatured"
                                           @click="DeletePushHotFn(product)">删除主页推荐</a>
                                           <a class="btn success" href="javascript: void(0);" v-if="product.isAddFeatured"
                                           @click="AddPushHotFn(product)">添加主页推荐</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                   <div class="goods-table" width="100%" v-else>
                        <div v-for="(product, index) in productsList" :key="index" class="table-list">
                            <ul class="goods-title">
                                 <li>商品主图：</li>
                                  <li>
                                    <div class="checkbox" @click='ischeck(product)'>
                                        <span style="color: #22272e"> {{product.productID}}</span>
                                        <div class="box icon mIcon":class="[product.productsChecked ?'icon-gouxuan':'icon-weigouxuan']"></div>
                                    </div>
                                </li>
                            </ul>
                            <div class="tbody">
                                <div class="good-info">
                                     <img :src="product.mainImage" :alt="product.name">
                                     <p class="good-name">{{product.name}}</p>
                                     <a class="btn eit" href="javascript: void(0);"
                                      v-if="['0','1','2','3','8','9','10'].indexOf(product.validFlag)!=-1"
                                           @click="editGoodFn(product)">编辑</a>
                                </div>
                                <div  class="good-price">
                                    <span>市场价/售价：</span>
                                     <p>￥{{toFixedFn(product.normalPrice)}}</p>
                                     <p>/</p>
                                     <p>￥{{toFixedFn(product.price1)}}</p>
                                      <span v-if="product.promotions!=null" class="priceTag">
                                          <i class="tag" @click="toggleThisLadder($event)" v-text="product.promotions?product.promotions.name:''"></i>
                                          <div class="promotion mFixed">
                                                    <div>
                                                        <p class="t">
                                                            <em v-if="product.promotions.mode==2">{{product.promotions.name+'，满 ¥'+toFloat(product.promotions.touchPrice)+' 减 ¥'+toFloat(product.promotions.reducedPrice)}}</em>
                                                            <em v-if="product.promotions.mode==3">{{product.promotions.name+'，满 ¥'+toFloat(product.promotions.touchPrice)+' 赠送商品'}}</em>
                                                        </p>
                                                        <p>促销时间：<em >不限时</em><em v-else>{{product.promotions.beginTime.substr(0,10)+' ~ '+product.promotions.endTime.substr(0,10)}}</em></p>
                                                        <p v-if="product.promotions.type==2" class="r"><a class="more" :href="'/product/promotions.html?id='+product.promotions.id">更多凑单商品>>></a></p>
                                                        <template v-if="product.promotions.mode==3">
                                                            <p>赠品：</p>
                                                            <p>
                                                                <span v-for="g in product.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="c"><a class="close" @click="hideThisLadder($event)" href="JavaScript:void(0);">了解</a></p>
                                                    </div>
                                                </div>
                                      </span>
                                </div>
                                <div class="good-status">
                                    <div class="good-left">
                                        <span>分类：</span>
                                        <p class="good-classFly">{{product.typeName}}</p>
                                    </div>
                                    <div class="good-right">
                                        <span>状态：</span>
                                        <p class="status" :style="{color: StatusColorFn(product.validFlag)}">
                                            {{StatusTextFn(product.validFlag)}}</p>
                                    </div>
                                </div>
                                <div class="good-handle">
                                        <a class="btn down" href="javascript: void(0);"
                                           v-if="['2'].indexOf(product.validFlag)!=-1" @click="ItemDownshelf(product)">下架</a>
                                        <a class="btn success" href="javascript: void(0);" v-if="product.isAddFeatured"
                                           @click="AddPushHotFn(product)">添加主页推荐</a>
                                        <a class="btn danger" href="javascript: void(0);" v-if="product.isDelFeatured"
                                           @click="DeletePushHotFn(product)">删除主页推荐</a>
                                        <a class="btn primary" href="javascript: void(0);"
                                           v-if="['1','2'].indexOf(product.validFlag)!=-1"
                                           @click="pageLinkDetils(product)">预览商品</a>
                                    </div>
                            </div>
                          </div>
                        </div>
                    <div class="good-footer">
                        <div class="styleborder">
                        <div class="footer-left">
                            <div class="checkbox" @click='checkedAll'>
                                <div class="box icon mIcon"
                                     :class="[isCheckedAll ? 'icon-gouxuan' : 'icon-weigouxuan']"></div>
                                <span>全选</span>
                            </div>
                        </div>
                        <div class="footer-right">
                            <a href="javascript:void(0);" class="btn batch"
                               :class="[isCheckedAll ||check? 'icon-gouxuan' : 'icon-weigouxuan']" @click="ItemDownshelfAll">批量下架</a>
                        </div>
                          </div>
                    </div>
                </div>
                <div  class="empty" v-else>
                    <img src="/img/order/icon-goods.svg">
                    <div class="msg"><p>您还未发布任何商品快去<a href="/supplier/release.html">发布</a>吧</p></div>
                </div>
                <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
                 <div class="pageWrap clear" v-if="isPC && pageTotal>1">
                        <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)" href="javascript:void(0);"></a>
                        <template v-for="n in showPageBtn">
                            <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
                            <span v-else>···</span>
                        </template>
                        <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)" href="javascript:void(0);"></a>
                        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
                        <span>跳至</span>
                        <input v-model="pageInput" @blur="checkNum()"/>
                        <span>页</span>&nbsp;
                        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
                   </div>
            </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/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript"
        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-center/shop/goods.js(v=${version})}"></script>
</body>
</html>
