<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<view class="uni-title">{{$t('order.index.title')}}</view>
			</view>
		</view>
		<view class="uni-container">
			<view class="order">
				<view class="hm-p-b-10">
					<hm-tabs :list="tabs" :current="current" @clickItem="tabsChange"></hm-tabs>
				</view>
				<scroll-view class="scroll" scroll-y scroll-with-animation>
					<view v-if="(list.data).length > 0">
						<view class="box" v-for="(item ,index) in list.data" :key="index">
							<view class="hm-col-9 hm-p-10 hm-font-14">
								<text v-if="item.order_mode.value == 10 && item.table_id > 0">
									{{item.order_mode.text}} # {{item.table.table_name}} #
								</text>
								<text v-else>
									{{item.order_mode.text}} # {{item.row_no}}号 #
								</text>
								{{item.source.text}}
								<view class="dis-block-inline fr">
									{{$t('order.index.text.order_no')}}：{{item.order_no}}
									<text class="hm-m-l-15">
										<text v-if="item.order_mode.value == 10">{{$t('order.index.text.start_time')}}：{{item.arrive_time.text}}</text>
										<text v-if="item.order_mode.value == 20">{{$t('order.index.text.delivery_time')}}：{{item.arrive_time.text}}</text>
										<text v-if="item.order_mode.value == 30">{{$t('order.index.text.self_time')}}：{{item.arrive_time.text}}</text>
									</text>
								</view>
							</view>
							<view class="item cf">
								<view class="goods" :style="'height:'+(100 * item.goods.length) + 'px;'">
									<view v-for="(item1,goods_item) in item.goods" :key="'goods_item_'+goods_item">
										<view class="goods-item">
											<image :src="item1.image.url"></image>
											<view class="hm-p-t-5 hm-col-0">
												{{item1.goods_name}}
											</view>
											<view class="hm-p-t-5 hm-col-9" v-if="item1.goods_attr">
												{{item1.goods_attr}}
											</view>
											<view class="hm-p-t-5 hm-col-error hm-font-b"
												v-if="item.order_status.value == 40">
												{{$t('order.index.text.refund')}}：{{item1.refund_num}} {{$t('order.index.text.copies')}}
											</view>
											<view class="hm-p-t-5 hm-font-b" v-else>
												× {{item1.total_num}}
											</view>
										</view>
										<view class="price">
											<text class="hm-col-error hm-font-b">￥{{item1.total_price}}</text>
										</view>
									</view>
								</view>
								<view class="col-15"
									:style="'height:'+(100 * item.goods.length) + 'px;line-height: '+(100 * item.goods.length) + 'px;'">
									<view class="col-item">
										<view>
											{{$t('order.index.text.paid_in')}} <text class="hm-col-error">￥{{item.pay_price}}</text>
										</view>
										<view>
											{{$t('order.index.text.discount')}} <text class="hm-col-error">-￥{{item.activity_price}}</text>
										</view>
										<view v-if="item.pack_price>0">
											{{$t('order.index.text.pack')}} <text class="hm-col-error">+￥{{item.pack_price}}</text>
										</view>
										<view v-if="item.express_price>0">
											{{$t('order.index.text.express')}} <text class="hm-col-error">+￥{{item.express_price}}</text>
										</view>
										<view v-if="item.ware_price>0">
											{{$t('order.index.text.ware')}} <text class="hm-col-error">+￥{{item.ware_price}}</text>
										</view>
										<view v-if="item.order_status.value == 40">
											{{$t('order.index.text.refund_price')}} <text class="hm-col-error">-￥{{item.refund_price}}</text>
										</view>
									</view>
								</view>
								<view class="col-15"
									:style="'height:'+(100 * item.goods.length) + 'px;line-height: '+(100 * item.goods.length) + 'px;'">
									<view class="col-item">
										<view>{{item.user.nickname}}</view>
										<view>ID：{{item.user.user_id}}</view>
									</view>
								</view>
								<view class="col-15"
									:style="'height:'+(100 * item.goods.length) + 'px;line-height: '+(100 * item.goods.length) + 'px;'">
									<view class="col-item">
										<view v-if="item.order_status.value == 10"
											:class="item.pay_status.value == 10 ? 'hm-col-info' : 'hm-col-warning'">
											<text v-if="item.pay_status.value == 10">{{$t('order.index.text.to_be_paid')}}</text>
											<text
												v-if="item.pay_status.value > 10 && item.shop_status.value == 10">{{$t('order.index.text.to_order')}}</text>
											<text
												v-if="item.shop_status.value > 10 && item.delivery_status.value == 10">{{$t('order.index.text.to_delivery')}}</text>
											<text
												v-if="item.shop_status.value > 10 && item.delivery_status.value == 20">{{$t('order.index.text.delivery_ing')}}</text>
											<text
												v-if="item.pay_status.value == 30 && item.delivery_status.value == 30 && item.receipt_status.value == 10">{{$t('order.index.text.to_collection')}}</text>
											<text
												v-if="item.pay_status.value == 20 && item.delivery_status.value == 30 && item.receipt_status.value == 10">{{$t('order.index.text.to_clearing')}}</text>
										</view>
										<view v-if="item.order_status.value == 20" class="hm-col-error">
											{{$t('order.index.text.cancelled')}}
										</view>
										<view v-if="item.order_status.value == 30" class="hm-col-success">
											{{$t('order.index.text.completed')}}
										</view>
										<view v-if="item.order_status.value == 40 && item.refund_status.value == 10"
											class="hm-col-warning">
											{{$t('order.index.text.to_refunded')}}
										</view>
										<view v-if="item.order_status.value == 40 && item.refund_status.value == 20"
											class="hm-col-success">
											{{$t('order.index.text.refunded')}}
										</view>
									</view>
								</view>
								<view class="col-15"
									:style="'height:'+(100 * item.goods.length) + 'px;line-height: '+(100 * item.goods.length) + 'px;'">
									<view class="col-item">
										<view class="hm-p-t-10">
											<button @click="getOrderDetail(item.order_id)"
												class="btn hm-bg-success">{{$t('order.index.text.order_detail')}}</button>
										</view>
										<view
											v-if="item.pay_status.value > 10 && item.shop_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="setShopStatus(item.order_id)"
												class="btn hm-bg-warning">{{$t('order.index.text.confirm_order')}}</button>
										</view>
										<view
											v-if="item.order_mode.value != 20 && item.shop_status.value == 20 && item.delivery_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="delivery(item.order_id)"
												class="btn hm-bg-warning">{{$t('order.index.text.start_cooking')}}</button>
										</view>
										<view
											v-if="item.order_mode.value == 20 && item.shop_status.value == 20 && item.delivery_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="deliveryShow(item.order_id)"
												class="btn hm-bg-warning">{{$t('order.index.text.assign_knights')}}</button>
										</view>
										<view
											v-if="item.order_mode.value == 20 && item.shop_status.value == 30 && item.delivery_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="cancelDelivery(item.order_id)"
												class="btn hm-bg-error">{{$t('order.index.text.cancel_delivery')}}</button>
										</view>
										<view v-if="item.pay_status.value == 30 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="collection(item.order_id)"
												class="btn hm-bg-error">{{$t('order.index.text.confirm_receipt')}}</button>
										</view>
										<view
											v-show="item.pay_status.value == 20 && item.delivery_status.value == 30 && item.receipt_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="receipt(item.order_id)"
												class="btn hm-bg-error">{{$t('order.index.text.confirm_clearing')}}</button>
										</view>
										<view v-if="item.refund_status.value == 10 && item.order_status.value == 40"
											class="hm-p-t-5">
											<button @click="refundOrder(item.order_id)"
												class="btn hm-bg-error">{{$t('order.index.text.refund_operation')}}</button>
										</view>
										<view
											v-if="item.order_mode.value == 10 && item.row_no != '' && item.delivery_status.value == 30 && item.receipt_status.value == 10 && item.order_status.value == 10"
											class="hm-p-t-5">
											<button @click="spk(item.order_id)" class="btn hm-bg-warning">{{$t('order.index.text.call_for_meal')}}</button>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="hm-empty">
						<img :src="domain + '/addons/food/img/empty/data.png'" />
						<view class="text">{{$t('common.empty')}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="list.per_page" :current="list.current_page" :total="list.total"
					@change="pageChange" />
			</view>
			<!-- 订单详情弹窗 -->
			<uni-popup ref="detail" :is-mask-click="false">
				<view class="popup-500 hm-bg-f">
					<view class="title">
						{{$t('order.index.text.order_detail')}}
						<view @click="$refs.detail.close()" class="close">
							<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
						</view>
					</view>
					<uni-section titleColor="#444" :title="$t('order.index.text.pay_info')" type="line" titleFontSize="14"></uni-section>
					<view class="detail">
						<uni-row class="th">
							<uni-col class="hm-p-tb-10" :span="6">{{$t('order.index.text.amount_payable')}}</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.pay_mode')}}</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.pay_status')}}</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.pay_time')}}</uni-col>
						</uni-row>
						<uni-row class="td">
							<uni-col class="hm-p-tb-10" :span="6">
								￥{{detail.pay_price}}
							</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
								<text v-show="detail.pay_status.value == 20 && detail.transaction_id != ''">{{$t('order.index.text.wx_pay')}}</text>
								<text v-show="detail.pay_status.value == 20 && detail.transaction_id == ''">{{$t('order.index.text.balance_pay')}}</text>
								<text v-show="detail.pay_status.value != 20">--</text>
							</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
								<text v-show="detail.pay_status.value == 10">{{$t('order.index.text.to_paid')}}</text>
								<text v-show="detail.pay_status.value == 20">{{$t('order.index.text.pay_ing')}}</text>
								<text v-show="detail.pay_status.value == 30">{{$t('order.index.text.pay_ed')}}</text>
							</uni-col>
							<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
								<text v-if="detail.pay_time > 0">
									<uni-dateformat :date="detail.pay_time" format="yy-mm-dd hh:MM"></uni-dateformat>
								</text>
								<text v-else>--</text>
							</uni-col>
						</uni-row>
					</view>
					<block v-if="detail.order_mode.value == 20">
						<uni-section titleColor="#444" :title="$t('order.index.text.delivery_address')" type="line" titleFontSize="14"></uni-section>
						<view class="detail">
							<uni-row class="th">
								<uni-col class="hm-p-tb-10" :span="4">{{$t('order.index.text.consignee')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.phone')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="14">{{$t('order.index.text.address')}}</uni-col>
							</uni-row>
							<uni-row class="td">
								<uni-col class="hm-p-tb-10" :span="4">
									{{detail.address.name?detail.address.name:'--'}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
									{{detail.address.phone}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="14">
									{{detail.address.city}} {{detail.address.district}} {{detail.address.detail}}
								</uni-col>
							</uni-row>
						</view>
					</block>
					<block v-if="detail.order_mode.value == 20 && detail.shop_status.value == 30 && detail.delivery">
						<uni-section titleColor="#444" :title="$t('order.index.text.knight_info')" type="line" titleFontSize="14"></uni-section>
						<view class="detail">
							<uni-row class="th">
								<uni-col class="hm-p-tb-10" :span="4">{{$t('order.index.text.knight_name')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.phone')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">{{$t('order.index.text.knight_status')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">{{$t('order.index.text.delivery_status')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.status_time')}}</uni-col>
							</uni-row>
							<uni-row class="td">
								<uni-col class="hm-p-tb-10" :span="4">
									{{detail.delivery.linkman ? detail.delivery.linkman : ''}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
									{{detail.delivery.phone ? detail.delivery.phone : ''}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">
									{{detail.delivery.delivery_status.text ? detail.delivery.delivery_status.text : ''}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">
									{{detail.delivery.status.text ? detail.delivery.status.text : ''}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
									<text v-if="detail.delivery.delivery_time > 0">
										<uni-dateformat :date="detail.delivery.delivery_time" format="yy-mm-dd hh:MM">
										</uni-dateformat>
									</text>
									<text v-else>--</text>
								</uni-col>
							</uni-row>
						</view>
					</block>
					<block v-if="detail.order_status.value == 40">
						<uni-section titleColor="#444" :title="$t('order.index.text.refund_info')" type="line" titleFontSize="14"></uni-section>
						<view class="detail">
							<uni-row class="th">
								<uni-col class="hm-p-tb-10" :span="4">{{$t('order.index.text.refund_money')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">{{$t('order.index.text.refund_account')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">{{$t('order.index.text.refund_status')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.refund_reason')}}</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">{{$t('order.index.text.refund_time')}}</uni-col>
							</uni-row>
							<uni-row class="td">
								<uni-col class="hm-p-tb-10" :span="4">
									{{detail.refund_price}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">
									{{detail.transaction_id ? $t('order.index.text.wechat') : $t('order.index.text.balance')}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="4">
									{{detail.refund_status.status.text}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
									{{detail.refund_desc}}
								</uni-col>
								<uni-col class="hm-p-tb-10 hm-border-l" :span="6">
									<text v-if="detail.refund_time > 0">
										<uni-dateformat :date="detail.refund_time" format="yy-mm-dd hh:MM">
										</uni-dateformat>
									</text>
									<text v-else>--</text>
								</uni-col>
							</uni-row>
						</view>
					</block>
				</view>
			</uni-popup>
			<!-- 推送配送订单弹窗 -->
			<uni-popup ref="delivery" :is-mask-click="false">
				<view class="popup-500 hm-bg-f">
					<view class="title">
						{{$t('order.index.text.push_delivery_order')}}
						<view @click="$refs.delivery.close()" class="close">
							<uni-icons type="closeempty" color="#999" size="22"></uni-icons>
						</view>
					</view>
					<view class="hm-p-lr-10">
						<view class="hm-p-tb-10 hm-border-b">
							<radio-group @change="setDeliveryCompany">
								<label v-for="(item, index) in companyList"
									:key="index">
										<radio :value="item.name" :checked="company === item.name" /> {{item.title}}
								</label>
							</radio-group>
						</view>
						<view v-if="company=='self'" class="hm-p-tb-10">
							<view v-for="(item,index) in clerk" :key="index"
								@click="setClerk(index)"
								:class="index == clerkIndex?'clerk_list2':'clerk_list'">
								{{item.real_name}}
							</view>
						</view>
						<view v-else class="hm-p-tb-10">
							<view class="hm-p-t-10">
								{{$t('order.index.text.delivery_distance')}}：<text
									class="hm-col-9">{{delivery_detail.delivery_distance?delivery_detail.delivery_distance:'--'}}</text>
							</view>
							<view class="hm-p-t-10">
								{{$t('order.index.text.estimated_time')}}：<text class="hm-col-9">{{delivery_detail.delivery_time?delivery_detail.delivery_time:'--'}}</text>
							</view>
							<view class="hm-p-t-10">
								{{$t('order.index.text.delivery_cost')}}：<text class="hm-col-error">{{delivery_detail.delivery_price?delivery_detail.delivery_price:'--'}}</text>
							</view>
						</view>
						<view class="hm-p-t-10 hm-border-t">
							<view class="delivery-but">
								<button @click="deliveryOrder">{{$t('order.index.text.confirm_push')}}</button>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>

<script>
	import config from '@/config.js';
	let App = getApp();
	export default {
		data() {
			return {
				domain: '',
				tabs: [{
						name: '全部',
						type: 'all',
						count: 0,
					},
					{
						name: '待接单',
						type: 'shop',
						count: 0,
					},
					{
						name: '待启菜',
						type: 'delivery',
						count: 0,
					},
					{
						name: '待收款',
						type: 'collection',
						count: 0,
					},
					{
						name: '待清台',
						type: 'receipt',
						count: 0,
					},
					{
						name: '待退款',
						type: 'refund10',
						count: 0,
					}
				],
				current: 0,
				list: {
					data: []
				},
				page: 1,
				order_id: 0, //订单编号
				detail: {}, //订单详情
				
				clerk: {}, //店员列表
				company: 'self',
				companyList: {}, //配送公司列表
				delivery_detail:{},//配送详情
				clerkIndex:0,
			}
		},
		onLoad() {
			let _this = this;
			_this.domain = config.domain;
			_this.getList();
		},
		methods: {
			deliveryOrder: function() {
				let _this = this,
					shop_clerk_id = _this.clerk[_this.clerkIndex].shop_clerk_id,
					delivery = {
						company: _this.company,
						order_id: _this.order_id,
						shop_clerk_id: shop_clerk_id
					};
				uni.showModal({
					title: "提示",
					content: "确定推送外卖订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/peisong', delivery, function(result) {
								App.showSuccess(result.msg, function() {
									_this.$refs.delivery.close();
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 选取店员ID
			 */
			setClerk: function(index) {
				let _this = this;
				_this.clerkIndex = index;
			},
			/**
			 * 设置配送公司
			 */
			setDeliveryCompany: function(e) {
				let _this = this;
				_this.company = e.detail.value;
				if(_this.company=='self'){
					return false;
				}
				App._get('order/preOrder', {
					company: _this.company,
					order_id: _this.order_id
				}, function(result) {
					_this.delivery_detail = result.data.detail;
				});
			},

			/**
			 * 显示外卖推送界面
			 */
			deliveryShow: function(order_id) {
				let _this = this;
				_this.order_id = order_id;
				//获取店员列表
				App._get('shop.clerk/getAll', {}, function(result) {
					_this.clerk = result.data.clerk;
					//获取配送公司
					App._get('order/company', {}, function(result) {
						let companyList = result.data.company;
						companyList.unshift({name:'self',title:'商家自配',status:1});
						_this.companyList = companyList;
						_this.$refs.delivery.open();
					});
				});
			},
			/**
			 * 叫号取餐
			 */
			spk: function(order_id) {
				App._post_form('order/spk', {
					order_id: order_id
				}, function(result) {
					App.showSuccess(result.msg);
				});
			},
			/**
			 * 退款操作
			 */
			refundOrder: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您是否同意退款？",
					cancelText: "拒绝",
					cancelColor: "#fa3534",
					confirmText: "同意",
					confirmColor: "#19be6b",
					success: function(o) {
						let is_refund = 0;
						if (o.confirm) {
							is_refund = 1;
						}
						App._post_form('order/refund', {
							order_id: order_id,
							is_refund: is_refund
						}, function(result) {
							App.showSuccess(result.msg, function() {
								_this.getList();
							});
						}, function(result) {}, function() {});
					}
				});
			},

			/**
			 * 完成清台
			 */
			receipt: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要完成订单清台？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/receipt', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},

			/**
			 * 取消推送的外卖订单
			 */
			cancelDelivery: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认取消已推送的外卖订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/cancelDelivery', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 收到用户付款
			 */
			collection: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认收到用户线下的付款？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/collection', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 确认发货
			 */
			delivery: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认要启菜？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/delivery', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 确认接单
			 */
			setShopStatus: function(order_id) {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "您确定要接受订单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/shop', {
								order_id: order_id
							}, function(result) {
								App.showSuccess(result.msg, function() {
									_this.getList();
								});
							});
						}
					}
				});
			},
			/**
			 * 获取订单详情
			 */
			getOrderDetail: function(order_id) {
				let _this = this;
				App._get('order/detail', {
					order_id: order_id
				}, function(result) {
					_this.detail = result.data.detail;
					_this.$refs.detail.open();
				});
			},
			/**
			 * 获取订单列表
			 */
			getList: function() {
				let _this = this;
				App._get('order/lists', {
					page: _this.page,
					dataType: _this.tabs[_this.current].type
				}, function(result) {
					_this.list = result.data.list;
				});
			},
			// 点击选项卡
			tabsChange(e) {
				let _this = this;
				_this.current = e.currentIndex;
				_this.page = 1;
				_this.getList();
			},
			// 分页触发
			pageChange(e) {
				let _this = this;
				_this.page = e.current;
				_this.getList();
			},
		}
	}
</script>

<style lang="scss">
	.order {
		.scroll {
			width: 100%;
			height: calc(100vh - 212px - (var(--top-window-height)));
		}

		.box {
			margin-bottom: 10px;
			width: 98%;
			border: 1px solid #f0f0f0;

			.item {
				font-size: 14px;

				.goods {
					display: inline-block;
					float: left;
					width: 39.5%;

					.goods-item {
						padding: 10px;
						width: 63.5%;
						float: left;
						border-top: 1px solid #f0f0f0;

						image {
							float: left;
							margin-right: 10px;
							width: 80px;
							height: 80px;
						}
					}

					.price {
						border-top: 1px solid #f0f0f0;
						border-left: 1px solid #f0f0f0;
						display: inline-block;
						height: 100px;
						width: 30%;
						line-height: 100px;
						vertical-align: middle;
						text-align: center;
					}
				}

				.col-15 {
					display: inline-block;
					border-top: 1px solid #f0f0f0;
					border-left: 1px solid #f0f0f0;
					float: left;
					width: 15%;
					text-align: center;

					.col-item {
						display: inline-block;
						line-height: normal;

						.btn {
							height: 30px;
							line-height: 30px;
							text-align: center;
							color: #fff;
							font-size: 14px;
						}
					}
				}
			}
		}
	}

	.detail {
		padding: 0 10px;
		text-align: center;
		font-size: 14px;

		.th {
			border: 1px solid #f0f0f0;
			color: #000;
			font-weight: bold;
		}

		.td {
			border-left: 1px solid #f0f0f0;
			border-right: 1px solid #f0f0f0;
			border-bottom: 1px solid #f0f0f0;
			color: #999;
		}
	}
	.delivery-but{
		padding: 10px 25%;
		button{
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		font-size: 15px;
		background-color: #1196DB;
		}
	}
	.clerk_list{
		width: 22%;
		display: inline-block;
		padding: 10px 0;
		margin: 10px 0 0 10px;
		text-align: center;
		border-radius: 8px;
		background-color: #f0f0f0;
	}
	.clerk_list2{
		width: 22%;
		display: inline-block;
		padding: 10px 0;
		margin: 10px 0 0 10px;
		text-align: center;
		border-radius: 8px;
		background-color: #19be6b;
		color: #fff;
	}
</style>
