<template>
	<div>
		<!-- 服务包订单 -->
		<div style="position: relative; display: inline-block; margin: 5px">
			<span>订单号：</span>
			<el-input
				style="width: 200px"
				placeholder="请输入订单号"
				v-model="ordersNo"
			>
			</el-input>
		</div>
		<div style="position: relative; display: inline-block">
			<span>状态：</span>
			<el-select
				clearable
				v-model="status"
				style="width: 150px; margin-left: 10px">
				<el-option value="0" label="待支付"></el-option>
				<el-option value="1" label="已支付"></el-option>
				<el-option value="2" label="已退款"></el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<el-button
			style="margin: 10px"
			size="mini"
			type="primary"
			icon="document"
			@click="handleSelect"
		>查询
		</el-button>
		<el-button
			style="margin: 10px"
			size="mini"
			type="primary"
			icon="document"
			@click="handleClear"
		>重置
		</el-button
		>&nbsp;&nbsp;
		<el-table v-loading="tableDataLoading" :data="tableData.list" :height="650">
			<el-table-column prop="ordersId" label="编号" width="60" fixed="left"></el-table-column>
			<el-table-column prop="ordersNo" label="订单号" width="180" fixed="left"></el-table-column>
			<el-table-column prop="userName" label="下单用户"></el-table-column>
			<el-table-column prop="title" label="名称" width="180"></el-table-column>
			<el-table-column prop="vipRate" label="会员优惠比" width="120">
				<template slot-scope="scope">
					<span>{{ scope.row.vipRate }}%</span>
				</template>
			</el-table-column>
			<el-table-column prop="oldSumMoney" label="金额" width="80"></el-table-column>
			<el-table-column prop="sumMoney" label="应付金额" width="80"></el-table-column>
			<el-table-column prop="payMoney" label="支付金额" width="80"></el-table-column>
			<el-table-column prop="payWay" label="支付方式" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.payWay==1">app微信</span>
					<span v-if="scope.row.payWay==2">微信公众号</span>
					<span v-if="scope.row.payWay==3">微信小程序</span>
					<span v-if="scope.row.payWay==4">微信公众号浏览器支付</span>
					<span v-if="scope.row.payWay==5">零钱</span>
					<span v-if="scope.row.payWay==6">支付宝</span>
				</template>
			</el-table-column>
			<el-table-column prop="payTime" label="支付时间" width="100"></el-table-column>
			<el-table-column prop="status" label="订单状态" width="80">
				<template slot-scope="scope">
					<span style="color: #f56c6c;" v-if="scope.row.status==0">待支付</span>
					<span style="color: #009900;" v-if="scope.row.status==1">已支付</span>
					<span style="color: #FF0000;" v-if="scope.row.status==2">已退款</span>
					<span style="color: #6f7180;" v-if="scope.row.status==3">已取消</span>
				</template>
			</el-table-column>
			<el-table-column prop="couponCount" label="优惠券数量" width="120">
				<template slot-scope="scope">
						<span style="color: #008000;cursor: pointer;"
							  @click="showCoupon(scope.row)">{{ scope.row.couponCount }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="couponMoney" label="优惠券金额" width="120">
				<template slot-scope="scope">
						<span style="color: #008000;cursor: pointer;"
							  @click="showCoupon(scope.row)">{{ scope.row.couponMoney }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="refundTime" label="退款时间" width="100"></el-table-column>
			<el-table-column prop="refundMoney" label="退款金额" width="80"></el-table-column>
			<el-table-column prop="unUsedQuantity" label="未使用次数" width="100" fixed="right"></el-table-column>
			<el-table-column prop="usedQuantity" label="已使用次数" width="100" fixed="right">
				<template slot-scope="scope">
					<span style="color: #008000;cursor: pointer;"
						  @click="showDetailView(scope.row)">{{ scope.row.usedQuantity }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" prop="id" width="100" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="scope.row.status==0||scope.row.status==1"
						size="mini"
						type="primary"
						style="margin: 5px"
						@click="showPackageView(scope.row)"
					>服务包
					</el-button>
					<el-button v-if="scope.row.status==0||scope.row.status==1"
						size="mini"
						type="primary"
						style="margin: 5px"
						@click="showDetailView(scope.row)"
					>包详情
					</el-button>
<!--					<el-button v-if="scope.row.status==1"-->
<!--						size="mini"-->
<!--						type="danger"-->
<!--						style="margin: 5px"-->
<!--						@click="showRefundView(scope.row)"-->
<!--					>退款-->
<!--					</el-button>-->
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center; margin-top: 10px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="limit"
				:current-page="page"
				layout="total,sizes, prev, pager, next,jumper"
				:total="tableData.totalCount"
			>
			</el-pagination>
		</div>

		<!-- 显示代金券 -->
		<el-dialog title="代金券" :visible.sync="dialogVisibleCoupon" width="600px" center>
			<el-table v-loading="couponTableDataLoading" :data="couponTableData">
				<el-table-column prop="couponName" label="名称" width="450"></el-table-column>
				<el-table-column prop="couponMoney" label="金额"></el-table-column>
			</el-table>
		</el-dialog>

		<!-- 显示服务包-->
		<el-dialog title="订单服务包" :visible.sync="dialogVisiblePackage" center>
			<el-table v-loading="packageTableDataLoading" :data="packageTableData">
				<el-table-column prop="id" label="服务编号"></el-table-column>
				<el-table-column label="服务类型" fixed="left" prop="type">
					<template slot-scope="scope">
						{{ showDictValue(scope.row.type, typeDictData) }}
					</template>
				</el-table-column>
				<el-table-column prop="title" label="服务名称" width="360"></el-table-column>
				<el-table-column prop="massageImg" label="图片">
					<template slot-scope="scope">
						　　<img
						v-if="scope.row.packageImg && scope.row.packageImg != ''"
						:src="scope.row.packageImg"
						width="40"
						height="40"
					/>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="oldPrice" label="原价"></el-table-column>
				<el-table-column prop="price" label="现价"></el-table-column>
				<el-table-column prop="status" label="状态" fixed="right" width="80">
					<template slot-scope="scope">
						<span style="color: #f56c6c;" v-if="scope.row.status==0">待支付</span>
						<span style="color: #009900;" v-if="scope.row.status==1">已支付</span>
						<span style="color: #FF0000;" v-if="scope.row.status==2">已退款</span>
						<span style="color: #6f7180;" v-if="scope.row.status==3">已无效</span>
						<span style="color: #009900;" v-if="scope.row.status==9">已用完</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="id" width="100" fixed="right">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="primary"
							style="margin: 5px"
							@click="showDetailView(scope.row)"
						>项目详情
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 显示详情 需改造，订单映射表取数据在匹配服务包，再匹配服务包详情-->
		<el-dialog title="订单项目详情" :visible.sync="dialogVisibleDetail" center>
			<el-table v-loading="detailTableDataLoading" :data="detailTableData">
				<el-table-column prop="massageTypeId" label="项目编号"></el-table-column>
				<el-table-column prop="title" label="项目名称" width="360"></el-table-column>
				<el-table-column prop="massageImg" label="图片">
					<template slot-scope="scope">
						　　<img
						v-if="scope.row.massageImg && scope.row.massageImg != ''"
						:src="scope.row.massageImg"
						width="40"
						height="40"
					/>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="现价"></el-table-column>
				<el-table-column prop="packagePrice" label="服务包价格"></el-table-column>
				<el-table-column prop="usedQuantity" label="使用数量"></el-table-column>
				<el-table-column prop="unUsedQuantity" label="未用数量"></el-table-column>
			</el-table>
		</el-dialog>

		<!-- 退款 -->
		<el-dialog title="退款" :visible.sync="dialogFormVisibleRefund" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">订单号：</span>
				<span style="width: 50%; display: inline-block; text-align: left">{{ ordersNo }}</span>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">支付金额：</span>
				<span style="width: 50%; display: inline-block; text-align: left">{{ payMoney }}</span>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">退款金额：</span>
				<el-input
					style="width: 50%"
					v-model="refundMoney"
					type="number"
					min="0"
					placeholder="请输入退款金额"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleRefund = false">取 消</el-button>
				<el-button type="primary" @click="handleRefund()">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
import axios from "axios";
import {jsonp} from "vue-jsonp";
export default {
	data() {
		return {
			tableDataLoading: false,
			tableData: {},
			typeDictData: [],
			page: 1,
			limit: 10,
			status: "",//状态
			ordersId:"",//订单编号
			ordersNo: "",//订单号
			type: "",//服务类型
			packageName: "",//服务名称
			payMoney:0,//支付金额

			dialogVisibleCoupon: false,//代金券弹窗
			couponTableDataLoading: false,//代金券loading
			couponTableData: [],//代金券表格数据

			dialogVisiblePackage: false,//服务包弹窗
			packageTableDataLoading: false,//服务包loading
			packageTableData: [],//服务包

			dialogVisibleDetail: false,//详情弹窗
			detailTableDataLoading: false,//详情loading
			detailTableData: [],//详情

			refundMoney: 0,//退款金额
			dialogFormVisibleRefund: false,//退款弹窗

		};
	},
	methods: {
		showDictValue(data, datas){
			const dictItem = datas.find(item => data === item.id);
			return dictItem ? dictItem.value : '';
		},
		// 服务包类型
		typeDictSelect() {
			this.$http({
				url: this.$http.adornUrl("sys/dict/selectDictList"),
				method: "get",
				params: this.$http.adornParams({
					type: "service_package",
				}),
			}).then(({data}) => {
				this.typeDictData = data.data;
			});
		},
		// 项目类型
		fwSelect() {
			this.$http({
				url: this.$http.adornUrl("sys/dict/selectDictList"),
				method: "get",
				params: this.$http.adornParams({
					type: "服务类型",
				}),
			}).then(({ data }) => {
				let returnData = data.data;
				this.fwData = returnData;
			});
		},

		// 获取服务包订单列表数据
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("user/package/order/findPage"),
				method: "get",
				params: this.$http.adornParams({
					page: this.page,
					limit: this.limit,
					status: this.status,
					type: this.type,
					ordersNo: this.ordersNo,
					packageName: this.packageName
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					let returnData = data.data;
					this.tableData = returnData;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.tableDataLoading = false;
			});
		},
		// 重置
		handleClear() {
			this.status = "";
			this.type = "";
			this.ordersNo = "";
			this.packageName = "";
			this.page = 1;
			this.handleSelect();
		},

		//分页
		handleSizeChange(val) {
			this.limit = val;
			this.handleSelect();
		},

		//翻页
		handleCurrentChange(val) {
			this.page = val;
			this.handleSelect();
		},

		//显示代金券
		showCoupon(row){
			this.dialogVisibleCoupon = true;
			this.couponTableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("user/package/order/findCoupon"),
				method: "get",
				params: this.$http.adornParams({
					ordersId: row.ordersId,
				}),
			}).then(({data}) => {
				this.couponTableData = data.data;
				this.couponTableDataLoading = false;
			});
		},

		showPackageView(row){
			this.dialogVisiblePackage = true;
			this.packageTableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("user/package/findList"),
				method: "get",
				params: this.$http.adornParams({
					ordersId: row.ordersId,
					status: row.status
				}),
			}).then(({data}) => {
				this.packageTableData = data.data;

				this.packageTableDataLoading = false;
			});
		},

		//显示订单项目详情
		showDetailView(row){
			this.dialogVisibleDetail = true;
			this.detailTableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("user/package/detail/findDetailUsedQuantity"),
				method: "get",
				params: this.$http.adornParams({
					mainId: row.id,
					status: row.status
				}),
			}).then(({data}) => {
				this.detailTableData = data.data;
				this.detailTableDataLoading = false;
			});
		},

		// 显示退款窗体
		showRefundView(row){
			this.ordersId = row.ordersId;
			this.ordersNo = row.ordersNo;
			this.payMoney = row.payMoney;
			this.dialogFormVisibleRefund = true;
		},

		// 退款
		handleRefund() {
			if(this.refundMoney > this.payMoney){
				this.$message({
					message: "退款失败，退款金额不能大于支付金额！",
					type: "warning",
					duration: 1500
				});
				return;
			}
			this.$http({
				url: this.$http.adornUrl("user/package/order/refund"),
				method: "post",
				params: this.$http.adornParams({
					refundMoney: this.refundMoney,
					ordersId: this.ordersId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "退款成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleRefundClear();
						},
					});
					this.dialogFormVisibleRefund = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		handleRefundClear() {
			this.ordersId = "";
			this.ordersNo = "";
			this.type = "";
			this.packageName = "";
			this.payMoney = 0;
			this.handleSelect();
		},

	},
	mounted() {
		this.handleSelect();
		this.typeDictSelect();
		this.fwSelect();
	},
};
</script>

<style>
.customWidth {
	width: 80% !important;
}
.el-dialog--center {
	text-align: center;
}

.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}

</style>
