<template>
	<div class="app-container" style="position: relative; height: calc(100vh - 117px);">
		<div class="container">
			<el-tabs v-model="status" type="card" @tab-click="handleOrder">
				<el-tab-pane name="0">
					<span slot="label">
						<i class="el-icon-s-order"></i>
						全部订单
					</span>
				</el-tab-pane>
				<el-tab-pane name="12">
					<span slot="label">
						<i class="el-icon-bank-card"></i>
						待付款
					</span>
				</el-tab-pane>
				<el-tab-pane name="2">
					<span slot="label">
						<i class="el-icon-refrigerator"></i>
						待发货
					</span>
				</el-tab-pane>
				<el-tab-pane name="3">
					<span slot="label">
						<i class="el-icon-truck"></i>
						待收货
					</span>
				</el-tab-pane>
				<!-- <el-tab-pane name="4">
					<span slot="label">
						<i class="el-icon-document"></i>
						待评价
					</span>
				</el-tab-pane> -->
				<el-tab-pane name="5">
					<span slot="label">
						<i class="el-icon-circle-check"></i>
						交易完成
					</span>
				</el-tab-pane>
				<!-- 	<el-tab-pane name="13">
					<span slot="label">
						<i class="el-icon-back"></i>
						申请退款
					</span>
				</el-tab-pane>
				<el-tab-pane name="14">
					<span slot="label">
						<i class="el-icon-finished"></i>
						已退款
					</span>
				</el-tab-pane> -->
				<el-tab-pane name="15">
					<span slot="label">
						<i class="el-icon-circle-close"></i>
						已关闭
					</span>
				</el-tab-pane>
			</el-tabs>
			<!--工具栏-->
			<el-card class="filter-container" shadow="never">
				<div>
					<i class="el-icon-search"></i>
					<span>筛选搜索</span>
					<el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索
					</el-button>
					<el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">重置
					</el-button>
				</div>
				<div style="margin-top: 15px">
					<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
						<el-form-item label="订单编号：">
							<el-input v-model="listQuery.orderSn" class="input-width" placeholder="编号"></el-input>
						</el-form-item>
						<!-- <el-form-item label="订单分类：">
							<el-select v-model="listQuery.orderType" class="input-width" placeholder="全部" clearable>
								<el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item> -->

						<el-form-item label="提交日期：">
							<el-date-picker class="input-width" v-model="listQuery.createTimeStart" value-format="yyyy-MM-dd"
								type="date" placeholder="请选择日期"></el-date-picker> - 
								<el-date-picker class="input-width" v-model="listQuery.createTimeEnd" value-format="yyyy-MM-dd"
									type="date" placeholder="请选择日期"></el-date-picker>
						</el-form-item>
						
						<el-form-item label="收货信息  ：">
							<el-input v-model="listQuery.receiverPhone" class="input-width" placeholder="收货人电话">
							</el-input>
						</el-form-item>

						<!-- <el-form-item label="订单来源：">
							<el-select v-model="listQuery.sourceType" class="input-width" placeholder="全部" clearable>
								<el-option v-for="item in sourceTypeOptions" :key="item.value" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item> -->
					</el-form>
				</div>
			</el-card>

			<!--订单数据统计-->
			<div class="order-caculate">
				<a class="caculate-title">
					订单数 :
					<span class="caculate-num">{{ caculateInfo.orderCount }}</span>
				</a>

				<a class="caculate-title">
					订单金额 :
					<span class="caculate-num">{{ caculateInfo.orderPay }}</span>
				</a>
				<a class="caculate-title">
					客户数 :
					<span class="caculate-num">{{ caculateInfo.memberCount }}</span>
				</a>
			</div>

			<el-card class="operate-container" shadow="never">
				<i class="el-icon-tickets"></i>
				<span>数据列表</span>
			</el-card>
			<!-- <div class="batch-operate-container">
				<el-checkbox v-model="printChecked" @change="batchSelection"
					style="margin-left:23px; margin-right: 20px;"></el-checkbox>
				<el-select v-model="batchHandle" @change="handlePrintOption" clearable placeholder="批量操作"
					class="filter-item" style="width: 130px; margin-right: 8px;">
					<el-option v-for="item in handleOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
				<el-select v-model="batchExport" @change="handleExportOption" clearable placeholder="批量导出"
					class="filter-item" style="width: 130px">
					<el-option v-for="item in exportOptions" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select>
			</div> -->
			<div class="table-container">
				<el-table ref="orderTable" :data="list" style="width: 100%;" @selection-change="handleSelectionChange"
					v-loading="listLoading" border>
					<el-table-column type="selection" width="60" align="center"></el-table-column>
					<el-table-column label="编号" width="80" align="center">
						<template slot-scope="scope">
							{{ scope.row.id }}
						</template>
					</el-table-column>
					<el-table-column label="订单编号" width="200" align="center">
						<template slot-scope="scope">
							{{ scope.row.orderSn }}
						</template>
					</el-table-column>
					<el-table-column label="商品" align="center">
						<template slot-scope="scope">
							{{ scope.row.goodsName }}
						</template>
					</el-table-column>
					<el-table-column label="提交时间" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.createTime | formatCreateTime }}
						</template>
					</el-table-column>
					<el-table-column label="用户账号" width="180" align="center">
						<template slot-scope="scope">
							{{ scope.row.memberUsername }}
						</template>
					</el-table-column>
					<el-table-column label="订单金额" width="120" align="center">
						<template slot-scope="scope">
							￥{{ scope.row.totalAmount }}
						</template>
					</el-table-column>
					<el-table-column label="支付金额" width="120" align="center">
						<template slot-scope="scope">
							￥{{ scope.row.payAmount }}
						</template>
					</el-table-column>
					<el-table-column label="支付方式" width="120" align="center">
						<template slot-scope="scope">
							{{ scope.row.payType | formatPayType }}
						</template>
					</el-table-column>
					<!-- <el-table-column label="订单来源" width="120" align="center">
						<template slot-scope="scope">
							{{ scope.row.sourceType | formatSourceType }}
						</template>
					</el-table-column>
					<el-table-column label="订单类型" width="120" align="center">
						<template slot-scope="scope">
							{{ scope.row.orderType | formatOrderType }}
						</template>
					</el-table-column> -->

					<el-table-column label="订单状态" width="120" align="center">
						<template slot-scope="scope">
							{{ scope.row.status | formatStatus }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleViewOrder(scope.$index, scope.row)">查看订单</el-button>
							<!-- <el-button size="mini" @click="handleCloseOrder(scope.$index, scope.row)"
								v-show="scope.row.status === 14">关闭订单</el-button> -->
							<el-button size="mini" @click="handleDeliveryOrder(scope.$index, scope.row)"
								v-show="scope.row.status === 2">订单发货</el-button>
							<!-- <el-button size="mini" @click="handleViewLogistics(scope.$index, scope.row)"
								v-show="scope.row.status > 2 || scope.row.status < 9">订单跟踪</el-button> -->
							<!-- <el-button size="mini" type="danger" @click="handleDeleteOrder(scope.$index, scope.row)"
								v-show="scope.row.status === 15">删除订单</el-button> -->
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="pagination-container">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
					:page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import checkPermission from '@/utils/permission';
	import {
		formatTime
	} from '@/utils/index';
	import {
		fetchList,
		closeOrder,
		deleteOrder,
		orderData
	} from '@/api/order';
	import {
		formatDate
	} from '@/utils/date';
	import LogisticsDialog from '@/views/oms/order/components/logisticsDialog';
	const defaultListQuery = {
		pageNum: 1,
		pageSize: 10,
		status: 0,
		orderSn: null,
		receiverPhone: null,
		createTimeStart: null,
		createTimeEnd: null
	};

	export default {
		name: 'orderList',
		components: {
			LogisticsDialog
		},
		data() {
			return {
				delLoading: false,
				status: '0',
				orderType: '0',
				createTime: '',
				checkList: [],
				printChecked: false,
				batchHandle: '',
				batchExport: '',
				listContent: [],
				listQuery: Object.assign({}, defaultListQuery),
				listLoading: true,
				list: null,
				total: null,
				operateType: null,
				multipleSelection: [],
				closeOrder: {
					dialogVisible: false,
					content: null,
					orderIds: []
				},
				statusOptions: [{
						label: '待付款',
						value: 12
					},
					{
						label: '待发货',
						value: 2
					},
					{
						label: '已发货',
						value: 3
					},
					{
						label: '已完成',
						value: 5
					},
					{
						label: '申请退款',
						value: 13
					},
					{
						label: '已退款',
						value: 14
					},
					{
						label: '已关闭',
						value: 15
					}
				],
				orderTypeOptions: [{
						label: '正常订单',
						value: 1
					},
					{
						label: '秒杀订单',
						value: 6
					},
					{
						value: 7,
						label: '门店自取订单'
					},
					{
						label: ' 拼团订单',
						value: 2
					},
					{
						label: '团购订单',
						value: 3
					},
					{
						label: '砍价订单',
						value: 4
					},
					{
						label: '积分订单',
						value: 5
					}
				],
				sourceTypeOptions: [{
						label: '小程序订单',
						value: 1
					},
					{
						label: 'APP订单',
						value: 4
					},
					{
						label: 'h5订单',
						value: 2
					},
					{
						label: 'pc订单',
						value: 3
					}
				],
				operateOptions: [{
						label: '批量发货',
						value: 1
					},
					{
						label: '关闭订单',
						value: 2
					},
					{
						label: '删除订单',
						value: 3
					}
				],
				logisticsDialogVisible: false,

				handleOptions: [{
					value: '',
					label: '批量操作'
				}, {
					value: '0',
					label: '批量打印'
				}],
				exportOptions: [{
					value: '',
					label: '批量导出'
				}, {
					value: '0',
					label: '导出全部'
				}, {
					value: '1',
					label: '导出选中'
				}],
				caculateInfo: {
					orderCount: 0,
					orderPay: 0,
					memberCount: 0
				}
			};
		},
		created() {
			this.$nextTick(() => {
				this.getList();
				this.orderDatas(0);
			});
		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			},
			formatPayType(value) { //支付方式：0->未支付；1->支付宝；2->微信
				if (value === 1) {
					return '支付宝';
				} else if (value === 2) {
					return '微信';
				} else if (value === 3) {
					return '余额支付';
				} else if (value === 5) {
					return '积分兑换';
				}
			},
			formatSourceType(value) { //订单来源：0->PC订单；1->app订单
				if (value === 4) {
					return '小程序';
				} else if (value === 2) {
					return 'h5订单';
				} else if (value === 3) {
					return 'PC订单';
				} else if (value === 1) {
					return 'android订单';
				} else if (value === 5) {
					return 'ios订单';
				}
			},
			formatOrderType(value) {
				if (value === 2) {
					return '拼团订单';
				} else if (value === 3) {
					return '团购订单';
				} else if (value === 6) {
					return '秒杀订单';
				} else if (value === 1) {
					return '普通订单';
				} else if (value === 4) {
					return '砍价订单';
				} else if (value === 5) {
					return '积分订单';
				}
			},
			formatStatus(value) { //订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
				if (value === 12) {
					return '待付款';
				}
				if (value === 1) {
					return '支付成功，没有回掉';
				} else if (value === 2) {
					return '待发货';
				} else if (value === 3) {
					return '待收货';
				} else if (value === 4) {
					return '待评价';
				} else if (value === 5) {
					return '已完成';
				} else if (value === 6) {
					return '维权中';
				} else if (value === 7) {
					return '维权已完成';
				} else if (value === 8) {
					return '待分享';
				} else if (value === 13) {
					return '申请退款';
				} else if (value === 14) {
					return '已退款';
				} else if (value === 15) {
					return '已关闭';
				} else if (value === 16) {
					return '无效订单';
				} else if (value === 17) {
					return '已删除';
				}
			}
		},
		methods: {
			formatTime,
			checkPermission,
			handleOrder(tab, event) {
				this.listQuery.status = tab.name;
				this.getList();
				this.orderDatas(tab.name);
				console.log("tab", tab)
			},
			handleResetSearch() {
				this.listQuery = Object.assign({}, defaultListQuery);
			},
			handleSearchList() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleViewOrder(index, row) {
				this.$router.push({
					path: '/oms/orderDetail',
					query: {
						id: row.id
					}
				});
			},
			handleCloseOrder(index, row) {
				this.closeOrder.dialogVisible = true;
				this.closeOrder.orderIds = [row.id];
			},
			handleDeliveryOrder(index, row) {
				let listItem = this.covertOrder(row);
				console.log("listItem", listItem)
				this.$router.push({
					path: '/oms/deliverOrderList',
					query: {
						list: [listItem]
					}
				});
			},
			handleViewLogistics(index, row) {
				this.logisticsDialogVisible = true;
			},
			handleDeleteOrder(index, row) { //删除订单
				let id = [];
				id.push(row.id);
				this.deleteOrder(id);
			},
			handleBatchOperate() {
				if (this.multipleSelection == null || this.multipleSelection.length < 1) {
					this.$message({
						message: '请选择要操作的订单',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				if (this.operateType === 1) {
					//批量发货
					let list = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						if (this.multipleSelection[i].status === 1) {
							list.push(this.covertOrder(this.multipleSelection[i]));
						}
					}
					if (list.length === 0) {
						this.$message({
							message: '选中订单中没有可以发货的订单',
							type: 'warning',
							duration: 1000
						});
						return;
					}
					this.$router.push({
						path: '/oms/deliverOrderList',
						query: {
							list: list
						}
					});
				} else if (this.operateType === 2) {
					//关闭订单
					this.closeOrder.orderIds = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						this.closeOrder.orderIds.push(this.multipleSelection[i].id);
					}
					this.closeOrder.dialogVisible = true;
				} else if (this.operateType === 3) {
					//删除订单
					let ids = [];
					for (let i = 0; i < this.multipleSelection.length; i++) {
						ids.push(this.multipleSelection[i].id);
					}
					this.deleteOrder(ids);
				}
			},
			// 设置每页几条
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			// 查看第几页数据
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},
			handleCloseOrderConfirm() {
				if (this.closeOrder.content == null || this.closeOrder.content === '') {
					this.$message({
						message: '操作备注不能为空',
						type: 'warning',
						duration: 1000
					});
					return;
				}
				let params = new URLSearchParams();
				params.append('ids', this.closeOrder.orderIds);
				params.append('note', this.closeOrder.content);
				closeOrder(params).then(response => {
					this.closeOrder.orderIds = [];
					this.closeOrder.dialogVisible = false;
					this.getList();
					this.$message({
						message: '修改成功',
						type: 'success',
						duration: 1000
					});
				});
			},
			getList() {
				this.listLoading = true;
				if (this.listQuery.status == 0)
					this.listQuery.status = null

				if (this.listQuery.orderSn == "")
					this.listQuery.orderSn = null

				if (this.listQuery.receiverPhone == "")
					this.listQuery.receiverPhone = null


				console.log("listQuery", this.listQuery)
				fetchList(this.listQuery).then(response => {
					this.listLoading = false;
					console.log("list", response.data.records)
					this.list = response.data.records;
					this.total = response.data.total;
				});
			},
			orderDatas(status) {
				orderData({
					status: status
				}).then(response => {
					this.caculateInfo = response.data;
				});
			},

			deleteOrder(id) {
				this.$confirm('是否要进行该删除操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let params = new URLSearchParams();
					params.append('id', id);
					deleteOrder(params).then(response => {
						this.$message({
							message: '删除成功！',
							type: 'success',
							duration: 1000
						});
						this.getList();
					});
				});
			},
			covertOrder(order) {
				let address = order.receiverRegion + order
					.receiverDetailAddress;

				let listItem = {
					orderId: order.id,
					orderSn: order.orderSn,
					receiverName: order.receiverName,
					receiverPhone: order.receiverPhone,
					receiverPostCode: order.receiverPostCode,
					address: address,
					deliveryCompany: null,
					deliverySn: null
				};
				return listItem;
			},
			beforeInit() {
				this.url = 'api/yxStoreOrder';
				const sort = 'id,desc';
				this.params = {
					page: this.page,
					size: this.size,
					sort: sort,
					orderStatus: this.status,
					orderType: this.orderType,
					addTime: this.createTime,
					listContent: this.listContent
				};
				const query = this.query;
				const type = query.type;

				return true;
			},

			getCaculateInfo() {},
			clearCaculateInfo() {
				this.caculateInfo = {
					orderCount: 0,
					orderPay: 0,
					memberCount: 0
				};
			},

			batchSelection(val) {
				let rows = this.data;
				if (val) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handlePrintOption(val) {
				switch (val) {
					case '0':
						this.getPrintList();
						this.batchHandle = '';
						break;
					default:
						break;
				}
			},
			handleExportOption(val) {
				let list = this.checkList;
				this.page = 0;
				this.size = 10000;
				switch (val) {
					case '0':
						this.listContent = '';
						this.beforeInit();
						this.downloadMethod();
						break;
					case '1':
						if (list.length == 0) {
							this.$message({
								message: '请选择订单',
								type: 'warning'
							});
						} else {
							this.listContent = [];
							list.forEach(item => {
								this.listContent.push(item.orderId);
							});
							this.listContent = JSON.stringify(this.listContent);
							this.beforeInit();
							this.downloadMethod();
						}
						break;
					default:
						break;
				}
				this.batchExport = '';
			},
			downloadMethod() {
				this.beforeInit();
				this.downloadLoading = true;
				download(process.env.BASE_API + '/download', this.params)
					.then(result => {
						this.downloadFile(result, this.title + '数据', 'xlsx');
						this.downloadLoading = false;
					})
					.catch(() => {
						this.downloadLoading = false;
					});
			},
			// 下载文件
			downloadFile(obj, name, suffix) {
				const url = window.URL.createObjectURL(new Blob([obj]));
				const link = document.createElement('a');
				link.style.display = 'none';
				link.href = url;
				const fileName = parseTime(new Date()) + '-' + name + '.' + suffix;
				link.setAttribute('download', fileName);
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			getPrintList() {
				let list = this.checkList;
				if (list.length == 0) {
					this.$message({
						message: '请选择订单',
						type: 'warning'
					});
				} else {
					const _this = this.$refs.form5;
					_this.dialog = true;
				}
			},
			checkboxT(row, rowIndex) {
				return row.id !== 1;
			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		height: calc(100% - 80px);
		position: absolute;
		overflow: auto;
		width: calc(100% - 20px);

		.order-caculate {
			font-size: 14px;
			color: #909399;
			border-top: 1px solid #f0f0f0;
			padding: 20px 10px;

			.caculate-title {
				display: inline-block;
				margin-right: 50px;
			}

			.caculate-num {
				font-size: 20px;
				color: #ff4949;
			}
		}

		.el-table th {
			background-color: #fafafa;
		}
	}

	.footer-contains {
		position: absolute;
		display: -ms-flexbox;
		display: flex;
		background-color: #f6f6f6;
		bottom: 0;
		flex-align: center;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		z-index: 999;
		padding: 0 20px 0 13px;
	}

	/*打印单样式编辑*/
	.order-list {
		/*  height: 297mm;*/
		margin: 0 auto;
		width: 210mm;

		.order-title {
			height: 16mm;
			line-height: 16mm;
			font-size: 8mm;
			font-weight: bolder;
			text-align: center;
		}

		.order-info {
			span {
				display: inline-block;
				padding: 0 0 10px 0;
				font-size: 3mm;
			}

			span.info {
				width: 60mm;
			}
		}

		.el-table--small th,
		.el-table--small td {
			padding: 4px 0;
		}
	}
</style>
