<!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/order/logistics.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 我的采美 -->
<div id="logistics">
    <div class="navLayout">
        <div class="crumbs" v-if="isPC">
            <span>我的交易</span>
            <span>&gt;</span>
            <span>我的订单</span>
            <span>&gt;</span>
            <span>添加物流</span>
        </div>
        <div class="wrap clear">
            <!--左侧面包屑-->
            <div v-show="open">
                <template th:replace="supplier-center/components/tableft"></template>
            </div>
            <div class="right">
                <div class="userinfo">
                    <p class="info">
                        <span>买家信息</span>
                        <button type="button" class="comback" @click="history.go(-1)">返回</button>
                    </p>
                    <div class="user">
                        <p>买家名称：<span>{{userInfo.name}}</span></p>
                        <p>收货人：<span>{{userInfo.shouHuoRen}}</span></p>
                        <p>联系方式：<span>{{userInfo.mobile}}</span></p>
                    </div>
                    <p class="address">收货地址：<span>{{userInfo.address}}</span></p>
                </div>
                <div class="product-info">
                    <div class="price">
                        <p class="protitle">商品信息</p>
                    </div>
                    <div class="product">
                        <ul class="product-title">
                            <li>商品信息</li>
                            <li>购买数量</li>
                            <li>已发数量</li>
                            <li>未发数量</li>
                            <li>本次发货</li>
                        </ul>
                        <ul class="pro-information">
                            <li v-for="order in orderList " :shopOrderID="order.shopOrderID"
                                :orderProductId='order.orderProductID'>
                                <div class="product-img">
                                    <img :src="order.productImage"/>
                                    <h3>{{order.name}}</h3>
                                </div>
                                <div>{{order.num}}</div>
                                <div>{{order.shipmentsNum}}</div>
                                <div>{{order.notOutStore - order.actualCancelNum}}</div>
                                <div class="del-num">{{order.inputVal}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="add-logistics">
                    <div class="add-wrap">
                        <div class="company-number" v-for="(item,index) in logisticList" :key="index">
                            <div class="logist-left">
                                <i class="red icon">*</i>
                                物流公司：
                                <select name="" :id="'logistics'+ index" class="logistics-company-name company"
                                        @change="ChangeLogistics($event,item,index)">
                                    <option value="0">请选择</option>
                                    <option v-for="(kd,kdIndex) in kdlist" :key="kdIndex" :value="kd.value"
                                            :name='kd.label'>{{kd.label}}
                                    </option>
                                </select>
                                <button class="add-company companyBtn" @click="addBtn()" v-if="index==0">+</button>
                                <button class="add-company companyBtn" @click="subBtn(kd)" v-else>-</button>
                            </div>
                            <div class="logist-right">
                                <div v-for="(num,numIndex) in item.numList" :key="numIndex">
                                    <i class="red">*</i>
                                    物流编号：
                                    <input type="text" v-model="num.number" class="logistics-order-number company"
                                           oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入物流编号">
                                    <button class="add-number companyBtn" @click="addNum(item,numIndex)"
                                            v-if="numIndex==0">+
                                    </button>
                                    <button class="add-number companyBtn" v-else @click="reduceBtn(item)">-</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="upload-img">
                        <div class="release-from ">
                            <span class="red-color">&nbsp;图片备注：</span>
                            <div class="release-input" id="uploadGoodsImages">
                                <div class="upload-file" v-for="(item, index) in GoodsImagesList" :key="index">
                                    <img :data-original='item' :src="item" :data-image="item" alt="" class="upload-img">
                                    <i class="icon mIcon del" @click="removeGoodsImagesFn(index)"></i>
                                </div>
                                <div class="upload-file" v-show="GoodsImagesList.length<5">
                                    <i class="icon mIcon add"></i>
                                    <p class="add-text">添加图片</p>
                                    <input ref="goodsImages" type="file" name="file" value="" class="input-file"
                                           accept="image/png,image/jpeg,image/gif,image/jpg"
                                           @change="uploadGoodsImagesFn">
                                </div>
                                <div class="form-upload-tips">
                                    <i class="icon mIcon icon-wen"></i>
                                    <div class="wen-tips">请备注快递单，发货现场和货物的照片，最多10张</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="remarks">
                        <span class="rema">备注：</span>
                        <textarea maxlength="200" placeholder="文字备注，200字以内" v-model="params.info.note"></textarea>
                        <div class="size-num">{{params.info.note.length}}/200</div>
                    </div>
                    <div class="defineBtn">
                        <div>
                            <button type="button" @click="turnBtn">确定</button>
                            <button type="button" @click="history.go(-1)">取消</button>
                        </div>
                    </div>
                </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/common/serviceapi/supplier.service.js(v=${version})}"></script>
    <script charset="utf-8" type="text/javascript" th:src="@{/js/supplier-center/order/logistics.js(v=${version})}"></script>
</body>
</html>
