<template>
	<div class="sel-order">
		<!-- 抽屉 -->
		<el-drawer
			title="发货管理"
			:visible.sync="showShipManage"
			size="440px"
			:before-close="closeFn"
			custom-class="ship-draw-wrap"
		>
			<div class="ship-manage-wrap">
				<!-- 订单详情 -->
				<div class="order-info-wrap">
					<div class="order-info-left">
						<div class="info-list">
							<div class="label">订单号</div>
							<div class="val">{{ orderData.orderSn }}</div>
						</div>
						<div class="info-list">
							<div class="label">下单客户</div>
							<div class="val">{{ orderData.bookName }}</div>
						</div>
						<div class="info-list">
							<div class="label">下单时间</div>
							<div class="val">{{ orderData.addTime | formatTime }}</div>
						</div>
						<div class="info-list" v-if="!$util.isEmpty(orderData.goodsInfoList)">
							<div class="label">商品名称</div>
							<div class="val">{{ orderData.goodsInfoList[0].title }}</div>
						</div>
						<div class="info-list">
							<div class="label">金额</div>
							<div class="val">{{ orderData.actPrice }}</div>
						</div>
					</div>
					<div class="order-info-right" v-if="!$util.isEmpty(orderData.goodsInfoList)">
						<img :src="orderData.goodsInfoList[0].smallCoverUrl" alt="商品图" />
					</div>
				</div>
				<!-- 时间线 -->
				<el-timeline>
					<!-- :timestamp="activity.timestamp" -->
					<el-timeline-item v-for="(item, index) in shipData" :key="index">
						<!-- title -->
						<div class="title-wrap">
							<div class="title">{{ item.actionName }}</div>
							<div class="time" v-if="item.finishTime != 0">
								{{ item.finishTime | formatTime }}
							</div>
						</div>
						<!-- content -->
						<div class="content-wrap">
							<!-- 打单 -->
							<template v-if="item.actionName == '打单'">
								<div v-if="$util.isEmpty(item.receive) && index == 0">
									<el-button type="primary" @click="hasDeliver"
										>有配送单</el-button
									>
									<el-button type="primary" @click="fillFormFn">填单</el-button>
								</div>
								<div v-else>
									<!-- <span>配送用户信息</span> -->
									<card-name
										v-if="!$util.isEmpty(item.receive)"
										:info="item.receive"
									/>
									<span v-else>无配送信息</span>
									<div
										style="margin-top: 10px"
										v-if="!$util.isEmpty(item.receive)"
									>
										<el-button
											size="mini"
											v-if="orderData.printStatus == 0"
											@click="printOrderFn"
											>打印</el-button
										>
										<el-button size="mini" v-else @click="rePrintOrderFn"
											>重打</el-button
										>
									</div>
								</div>
							</template>
							<!-- 发货 -->
							<template v-if="item.actionName == '发货'">
								<div v-if="item.finishTime == 0">
									<template v-if="orderData.hasDeliver == 1">
										<el-popover
											placement="top"
											width="160"
											v-model="sendMySelfConfirm"
										>
											<p>确认发送？</p>
											<div style="text-align: right; margin: 0">
												<el-button
													size="mini"
													type="text"
													@click="sendMySelfConfirm = false"
													>取消</el-button
												>
												<el-button
													type="primary"
													size="mini"
													@click="sendMySelfFn"
													>确定</el-button
												>
											</div>
											<el-button type="primary" size="small" slot="reference"
												>确认发送</el-button
											>
										</el-popover>
									</template>
									<template v-else>
										<el-popover
											placement="top"
											width="160"
											v-model="sendMySelfConfirm"
										>
											<p>确认自己配送？</p>
											<div style="text-align: right; margin: 0">
												<el-button
													size="mini"
													type="text"
													@click="sendMySelfConfirm = false"
													>取消</el-button
												>
												<el-button
													type="primary"
													size="mini"
													@click="sendMySelfFn"
													>确定</el-button
												>
											</div>
											<el-button type="primary" size="small" slot="reference"
												>自己送</el-button
											>
										</el-popover>
										<el-button
											type="primary"
											size="small"
											@click="sendShipFn"
											style="margin-left:15px;"
											>代送</el-button
										>
									</template>
								</div>
								<div v-else>
									<template v-if="!$util.isEmpty(item.sendInfo)">
										<div class="label-list">
											配送：{{ item.sendInfo.sideName }}
										</div>
										<div class="label-list">
											距离：{{ item.sendInfo.distance }}km
										</div>
										<div class="label-list">
											运费：¥{{ item.sendInfo.cost }}
										</div>
										<div class="label-list">小费：¥{{ item.sendInfo.tip }}</div>
									</template>
									<template v-else>
										<div class="label-list">
											<span class="label">配送：</span>
											<span class="value">门店</span>
										</div>
									</template>
								</div>
							</template>
							<!-- 送达 -->
							<template v-if="item.actionName == '送达'">
								<div v-if="item.finishTime == 0">
									<template v-if="orderData.sendType == 3">
										<el-popover
											placement="top"
											width="210"
											v-model="confirmSendVisit"
										>
											<p>
												此订单由快递配送，送到会自动确认，确定要手动确认？
											</p>
											<div style="text-align: right; margin: 0">
												<el-button
													size="mini"
													type="text"
													@click="confirmSendVisit = false"
													>取消</el-button
												>
												<el-button
													type="primary"
													size="mini"
													@click="orderReachFn"
													>确定</el-button
												>
											</div>
											<el-button slot="reference" size="small" type="primary"
												>确认送达</el-button
											>
										</el-popover>
									</template>

									<template v-else>
										<el-popover
											placement="top"
											width="160"
											v-model="confirmSendVisit"
										>
											<p>确认已送达？</p>
											<div style="text-align: right; margin: 0">
												<el-button
													size="mini"
													type="text"
													@click="confirmSendVisit = false"
													>取消</el-button
												>
												<el-button
													type="primary"
													size="mini"
													@click="orderReachFn"
													>确定</el-button
												>
											</div>
											<el-button slot="reference" size="small" type="primary"
												>确认送达</el-button
											>
										</el-popover>
									</template>

									<div class="prompt-text">确认后会自动通知客户</div>
								</div>
							</template>
							<!-- 订单分类 -->
							<template v-if="item.actionName == '完成'">
								<div v-if="!$util.isEmpty(item.classify)">
									<div class="label-list">
										订单分类：{{ item.classify.category }}
									</div>
									<div class="label-list">用途：{{ item.classify.usage }}</div>
								</div>
								<div v-else>
									<el-button type="primary" @click="orderClassFn"
										>订单分类</el-button
									>
								</div>
							</template>
						</div>
					</el-timeline-item>
				</el-timeline>
			</div>
		</el-drawer>
		<!-- 填单 -->
		<el-dialog
			title="填单"
			:visible.sync="orderDialog"
			:close-on-click-modal="false"
			width="1000px"
		>
			<div class="order-modal-content">
				<el-form
					:model="orderForm"
					:rules="ruleForm"
					ref="orderForm"
					label-width="100px"
					class="demo-form"
				>
					<div class="form-wrap">
						<!-- 左侧 -->
						<div class="form-left-wrap">
							<el-form-item label="收花人姓名" prop="receiveUserName">
								<el-input
									v-model="orderForm.receiveUserName"
									placeholder="请输入姓名"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="收花人电话" prop="receiveMobile">
								<el-input
									v-model="orderForm.receiveMobile"
									placeholder="请输入电话"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="收花人城市" prop="receiveProvince">
								<el-cascader
									v-model="addressArr"
									:options="addressOptions"
									:props="addressProps"
									size="small"
									@change="handleChange"
									style="width: 100%"
								></el-cascader>
							</el-form-item>
							<el-form-item label="详细地址" prop="receiveAddress">
								<el-autocomplete
									v-model="orderForm.receiveAddress"
									:fetch-suggestions="querySearchAsync"
									placeholder="请输入内容"
									@select="addressFn"
									size="small"
									style="width: 100%"
								>
									<template slot-scope="{ item }">
										<p style="line-height: 30px">{{ item.title }}</p>
										<p style="line-height: 20px;font-size: 12px;color: #999">
											{{ item.address }}
										</p>
									</template>
								</el-autocomplete>
							</el-form-item>
							<el-form-item label="门牌号" prop="receiveFloor">
								<el-input
									v-model="orderForm.receiveFloor"
									placeholder="楼号门牌号（选填）"
									size="small"
								></el-input>
							</el-form-item>
						</div>
						<!-- 右侧 -->
						<div class="form-left-wrap">
							<el-form-item label="订花人电话" prop="bookMobile">
								<el-input
									v-model="orderForm.bookMobile"
									placeholder="请输入电话（选填）"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="送达时间" prop="reachTime">
								<el-date-picker
									type="date"
									placeholder="选择开始日期"
									v-model="orderForm.reachTime"
									value-format="yyyy-MM-dd"
									style="width: 100%;"
									size="small"
								></el-date-picker>
								<el-radio-group v-model="orderForm.reachPeriod">
									<el-radio label="0">上午</el-radio>
									<el-radio label="1">下午</el-radio>
									<el-radio label="2">晚上</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="带贺卡"
								><el-switch
									v-model="orderForm.needCard"
									active-value="1"
									inactive-value="0"
								></el-switch>
								<template v-if="orderForm.needCard == '1'">
									<el-input
										v-model="orderForm.cardInfo"
										placeholder="输入贺卡内容，留空将寄出空白贺卡"
										size="small"
									></el-input>
								</template>
							</el-form-item>
							<el-form-item label="其它备注" prop="remark">
								<el-input
									v-model="orderForm.remark"
									placeholder="选填"
									size="small"
								></el-input>
							</el-form-item>
							<el-form-item label="匿名派送"
								><el-switch
									v-model="orderForm.anonymity"
									active-value="1"
									inactive-value="0"
								></el-switch>
							</el-form-item>
						</div>
					</div>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitOrderFn">确认</el-button>
			</div>
		</el-dialog>
		<!-- 发货弹窗 -->
		<el-dialog
			title="确认发货？"
			:visible.sync="shipDialog"
			:close-on-click-modal="false"
			width="400px"
		>
			<div class="ship-modal-content">
				<el-form
					:model="shipForm"
					:rules="shipRuleForm"
					ref="shipForm"
					label-width="100px"
					class="demo-form"
				>
					<template>
						<el-form-item label="送花时间" prop="sendTime">
							<el-time-select
								v-model="shipForm.sendTime"
								:picker-options="{
									start: '08:00',
									step: '00:10',
									end: '24:00'
								}"
								placeholder="选择时间"
								size="small"
								style="width: 100%"
							>
							</el-time-select>
						</el-form-item>
						<el-form-item label="配送" prop="sendSide">
							<el-select
								v-model="shipForm.sendSide"
								placeholder="请选择"
								size="small"
								style="width: 100%"
							>
								<el-option
									v-for="item in sendSideOpt"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitShipFn">确认</el-button>
			</div>
		</el-dialog>
		<!-- 订单分类 -->
		<el-dialog
			title="订单分类"
			:visible.sync="categoryDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="category-dialog-wrap">
				<el-form
					:model="categoryForm"
					:rules="categoryRule"
					ref="categoryForm"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="选择分类" prop="categoryId">
						<el-radio-group v-model="categoryForm.categoryId">
							<el-radio
								border
								v-for="(item, index) in categoryData"
								:label="item.id"
								:key="index"
								size="small"
								>{{ item.categoryName }}</el-radio
							>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="选择用途" prop="usageId">
						<el-radio-group v-model="categoryForm.usageId">
							<el-radio
								border
								v-for="(item, index) in usageData"
								:label="item.id"
								:key="index"
								size="small"
								>{{ item.usageName }}</el-radio
							>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="orderClassConfirmFn">确认</el-button>
			</div>
		</el-dialog>

		<!-- 配送单 -->
		<div class="print-html">
			<table border="1" width="780" style="border:solid 1px black;border-collapse:collapse">
				<tr>
					<td style="padding: 10px;width: 100px;">配送时间：</td>
					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.reachDate }}</td>
					<td style="padding-left: 10px;width: 100px;">订单号：</td>
					<td style="padding-left: 10px;" colspan="2">{{ deliver.data.orderSn }}</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">收花人姓名：</td>
					<td style="padding-left: 10px;width: 130px;">
						{{ deliver.data.receiveUserName }}
					</td>
					<td style="padding-left: 10px;width: 100px;">收花人电话：</td>
					<td style="padding-left: 10px;width: 130px;">
						{{ deliver.data.receiveMobile }}
					</td>
					<td style="padding-left: 10px;" colspan="2" rowspan="4">
						<div style="text-align: center;padding-top: 1px">
							<p>情人节</p>
							<img
								style="width: 100px;height: 100px;margin-bottom: 20px"
								class="cover"
								:src="deliver.data.img"
								alt=""
							/>
						</div>
					</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">收花人地址：</td>
					<td style="padding-left: 10px" colspan="3">
						{{ deliver.data.receiveFullAddress }}
					</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">祝福语：</td>
					<td style="padding-left: 10px" colspan="3">{{ deliver.data.cardInfo }}</td>
				</tr>
				<tr>
					<td style="padding-left: 10px;width: 100px;">订花人姓名：</td>
					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookName }}</td>
					<td style="padding-left: 10px;width: 100px;">订花人电话：</td>
					<td style="padding-left: 10px;width: 130px;">{{ deliver.data.bookMobile }}</td>
				</tr>
				<tr>
					<td style="padding: 10px;width: 100px;">备注说明：</td>
					<td style="padding-left: 10px" colspan="5">{{ deliver.data.remark }}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import cardName from './card-name';

import { getLodop } from '@/utils/lodop';

export default {
	name: 'sel-order',
	components: {
		cardName
	},
	props: {
		id: String
	},
	data() {
		return {
			orderData: {},
			// draw
			showShipManage: false,
			shipData: [],
			// dialog
			// 打单信息
			relateData: {},
			confirmSendVisit: false,
			orderDialog: false,
			orderForm: {
				receiveUserName: '', // 收花人姓名；到店自提的姓名
				receiveMobile: '', // 收花人手机；到店自提的电话；
				receiveProvince: '', // 收花人省份
				receiveCity: '', // 收花人城市
				receiveAddress: '', // 收花人地址
				receiveFloor: '', // 收花人门楼号和牌号
				receiveFullAddress: '', // 收花人完整地址，从腾讯地图接口获取
				// bookName: '', // 订花人姓名
				bookMobile: '', // 订花人手机号
				reachTime: '', // 配送时间
				reachPeriod: '0', // 配送时段，0上午1下午2晚上
				needCard: '1', // 是否要贺卡 0不要 1要
				cardInfo: '', // 贺卡信息
				remark: '', // 备注
				anonymity: '0', // 是否匿名 0不 1要
				latitude: 0,
				longitude: 0
			},
			addressArr: [],
			ruleForm: {},
			sendMySelfConfirm: false,
			addressOptions: [],
			addressProps: {
				label: 'name',
				value: 'name',
				children: 'children'
			},
			// 发货弹窗
			shipDialog: false,
			shipForm: {
				sendType: '2',
				sendTime: '',
				sendSide: 1
			},
			shipRuleForm: {},
			sendSideOpt: [
				{
					label: '达达配送',
					value: 1
				}
			],
			// 订单分类
			categoryDialog: false,
			categoryForm: {
				categoryId: '',
				usageId: ''
			},
			categoryRule: {},
			deliver: {
				visible: false,
				data: {}
			}
		};
	},
	computed: {
		...mapGetters({ categoryData: 'category' }),
		...mapGetters({ usageData: 'usage', shopInfo: 'shopInfo' })
	},
	methods: {
		init() {
			this.getDet();
			this.$service.order.orderRelate().then(res => {
				this.relateData = res;
				let region = res.region;
				let newRegion = [];
				if (region.length > 0) {
					for (let i in region) {
						newRegion.push({
							id: region[i].id,
							name: region[i].name,
							children: []
						});
						if (region[i].children && region[i].children.length > 0) {
							for (let j in region[i].children) {
								newRegion[i].children.push({
									id: region[i].children[j].id,
									name: region[i].children[j].name
								});
							}
						}
					}
				}

				this.addressOptions = newRegion;

				let shopProvince = res.shop.province || '';
				let shopCity = res.shop.city || '';
				this.addressArr = [shopProvince, shopCity];
				this.orderForm.receiveProvince = shopProvince;
				this.orderForm.receiveCity = shopCity;
				// this.orderForm.receiveAddress = shopProvince + shopCity;
				this.orderForm.latitude = res.shop.shopLat || 0;
				this.orderForm.longitude = res.shop.shopLong || 0;
			});

			this.$service.order.info({ id: this.id }).then(res => {
				this.orderData = res;
			});
		},
		getDet() {
			this.$service.single.orderSendDet({ id: this.id }).then(res => {
				this.shipData = res;
				this.showShipManage = true;
			});
		},
		// dialog
		querySearchAsync(queryString, cb) {
			if (!this.orderForm.receiveCity) {
				this.$message.error('请先选择收花人地址');
				cb([]);
				return false;
			}
			if (!queryString) {
				cb([]);
				return false;
			}
			this.$service.single
				.mapSuggestion({ region: this.orderForm.receiveCity, keyword: queryString })
				.then(res => {
					let newArr = res.data;
					newArr = newArr.map(e => {
						e.value = e.title;
						return e;
					});
					cb(newArr);
				});
		},
		addressFn(item) {
			console.log('江总', item)
			this.orderForm.latitude = item.location.lat;
			this.orderForm.longitude = item.location.lng;
			this.orderForm.receiveAddress = item.title;
			this.orderForm.receiveFullAddress = item.address
		},
		submitOrderFn() {
			this.$service.order
				.orderSheet({
					id: this.id,
					...this.orderForm
				})
				.then(res => {
					this.getDet();
					this.resetForm();
				});
		},
		handleChange(value) {
			console.log('value', value);
			this.orderForm.receiveProvince = value[0];
			this.orderForm.receiveCity = value[1];
			this.orderForm.receiveAddress = value[0] + value[1];
		},
		resetForm() {
			try {
				this.$refs['orderForm'].resetFields();
			} catch (e) {}
			try {
				this.$refs['shipForm'].resetFields();
			} catch (e) {}
			try {
				this.$refs['categoryForm'].resetFields();
			} catch (e) {}
			this.shipDialog = false;
			this.categoryDialog = false;
			this.orderDialog = false;
		},
		// draw
		closeFn() {
			this.showShipManage = false;
		},
		// =========================
		//有配送单
		hasDeliver() {
			this.$service.single.printOrder({ id: this.id, option: 1 }).then(res => {
				this.getDet();

				this.$service.order.info({ id: this.id }).then(res => {
					this.orderData = res;
				});
			});
		},
		//打单
		async printOrderFn() {
			await this.$service.single.printOrder({ id: this.id, option: 2 });
			this.getDet();
			this.$service.order.getDeliverDetail({ id: this.id }).then(res => {
				this.deliver.data = res;
				this.printOrder();
			});
		},
		//重打
		rePrintOrderFn() {
			// this.printOrder();
			this.$service.order.getDeliverDetail({ id: this.id }).then(res => {
				this.deliver.data = res;
				this.printOrder();
			});
		},
		// 填单
		fillFormFn() {
			this.orderDialog = true;
		},
		//确认发货 自己送
		sendMySelfFn() {
			this.sendMySelfConfirm = false;
			this.shipForm.sendType = 2;
			this.$service.single
				.orderDeliver({ id: this.id, option: 1, ...this.shipForm })
				.then(res => {
					this.$message.success('已确认！');
					this.$emit('song-success');

					this.getDet();
					// this.shipDialog = false;
					this.resetForm();
				});
		},
		//确认发货 代送按钮显示
		sendShipFn() {
			this.shipDialog = true;
		},
		//确认发货 代送 确认
		submitShipFn() {
			if (this.shipForm.sendTime == '') {
				this.$message.error('请选择时间');
				return false;
			}
			this.shipForm.sendType = 3;
			this.$service.single
				.orderDeliver({ id: this.id, option: 1, ...this.shipForm })
				.then(res => {
					this.$message.success('已提交！');

					this.getDet();
					// this.shipDialog = false;
					this.resetForm();
				});
		},
		// 确认送达
		orderReachFn() {
			this.$service.single.orderReach({ id: this.id, option: 1 }).then(res => {
				this.$message.success('已确认！');
				this.getDet();
				this.confirmSendVisit = false;
				//操作栏置空
				this.$set(this.orderData, 'status', '5');
				this.$set(this.orderData, 'currentFlow', this.orderData.totalFlow);
			});
		},
		// 订单分类
		orderClassFn() {
			this.categoryDialog = true;
		},
		// 确认订单分类
		orderClassConfirmFn() {
			if (!this.categoryForm.categoryId || !this.categoryForm.usageId) {
				this.$message.error('请先选择分类或者用途！');
				return false;
			}
			this.$service.single.orderClass({ id: this.id, ...this.categoryForm }).then(res => {
				this.$message.success('订单分类成功！');
				this.getDet();
				// this.categoryDialog = false;
				this.resetForm();
			});
		},
		// 打印配置
		printOrder() {
			this.deliver.visible = true;

			this.$nextTick(() => {
				let LODOP = getLodop();
				LODOP.PRINT_INIT('配送单');
				LODOP.SET_PRINT_STYLE('FontSize', 12);
				LODOP.ADD_PRINT_TEXT(470, 10, 350, 200, `店铺地址：${this.shopInfo.address}`);
				LODOP.ADD_PRINT_TEXT(470, 400, 350, 600, `电话：${this.deliver.data.telephone}`);
				LODOP.ADD_PRINT_TEXT(
					470,
					590,
					470,
					600,
					`制单时间：${this.deliver.data.printTime}`
				);
				LODOP.SET_PRINT_STYLE('FontSize', 20);
				LODOP.SET_PRINT_STYLE('Bold', 1);
				LODOP.ADD_PRINT_TEXT(150, 10, 790, 30, `${this.shopInfo.name}配送单`);
				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);
				LODOP.SET_PRINT_STYLE('FontSize', 12);
				LODOP.ADD_PRINT_TEXT(160, 500, 100, 20, `No ${this.deliver.data.sendNum}`);
				LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2);

				LODOP.ADD_PRINT_HTM(
					200,
					10,
					790,
					600,
					document.querySelector('.print-html').innerHTML
				);
				LODOP.PREVIEW();
				// LODOP.PRINT();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.sel-order {
	.ship-manage-wrap {
		padding: 20px;
		border-top: 1px solid $borderColor;
	}
	.order-info-wrap {
		font-size: 14px;
		margin-bottom: 34px;
		padding: 4px;
		background-color: #f5f7fa;
		@include disFlex(center, space-between);
		.order-info-left {
			.info-list {
				@include disFlex(center, flex-start);
				margin: 4px 0;
				.label {
					width: 70px;
					color: #999;
				}
			}
		}
		.order-info-right {
			width: 88px;
			height: 88px;
		}
	}
	// ==================
	.title-wrap {
		@include disFlex(center, flex-start);
		.title {
			font-size: 16px;
			font-weight: bold;
			margin-right: 10px;
		}
		.time {
			font-size: 14px;
			color: #666;
		}
	}
	.content-wrap {
		margin-top: 10px;
	}
	.prompt-text {
		font-size: 12px;
		margin-top: 6px;
	}
	.label-list {
		font-size: 12px;
		margin: 4px 0;
	}
	// dialog
	.category-dialog-wrap {
		.el-radio {
			margin-bottom: 6px;
		}
	}

	.order-modal-content {
		.form-wrap {
			@include disFlex(flex-start, space-between);
			& > div {
				width: 49%;
			}
		}
		.prompt-text {
			font-size: 12px;
		}
	}
}
</style>

<style lang="scss">
.ship-draw-wrap {
	.el-drawer__header {
		margin-bottom: 20px;
		span {
			outline: none;
		}
	}
}

.print-html {
	position: absolute;
	left: 0;
	top: -5000px;
}
</style>
