<template>
	<view class="order_card mb-20">
		<view class="header_bg">
			<text class="col-f f-36 l-h-48 f-w-500">狼人杀</text>
			<image class="bg_nav" src="@/static/homeImg/bg_1.png" mode="widthFix"></image>
		</view>
		<u-cell-group>
			<u-cell
				v-for="(value, key, index) in formatObj"
				:title="key"
				:titleStyle="{fontSize: '26rpx', color: '#666', lineHeight: '34rpx'}"
				:key="index"
				:border="index < ObjectLength - 1"
			>
				<text slot="value" class="f-26 col-6 l-h-32">{{ value }}</text>
			</u-cell>
			<u-cell title="订单状态" :titleStyle="{fontSize: '26rpx', color: '#666', lineHeight: '34rpx'}" :value="stateValue" />
		</u-cell-group>
		<slot name="refund"></slot>
		<slot name="comment"></slot>
		<view v-if="orderList.refundReason" class="btn_list m-top30">
			<view v-if="orderList.state === 0" class="btn_right cancel" @click="lookRefund(0)">拒绝退款</view>
			<view v-if="orderList.state === 0" class="btn_right" @click="lookRefund(1)">同意退款</view>
		</view>
		<view v-else-if="orderList.commentContent" class="btn_list m-top30">
			<view class="btn_right cancel">回复评价</view>
			<view class="btn_right">恶意差评申诉</view>
		</view>
		<view v-else class="btn_list m-top30">
			<view class="btn_left">
				<u-icon name="phone" size="20" color="#3D3D3D"></u-icon>
				<text class="m-l-10 col-3d f-28 f-w-500">顾客</text>
			</view>
			<view class="btn_right cancel">取消订单</view>
			<view class="btn_right">确认订单</view>
		</view>
	</view>
</template>

<script>
	import { businessAppealReason, businessReply, businessLookRefund } from '@/api/order.js'
	export default {
		name:"orderCard",
		props: {
			orderList: {
				type: Object,
				require: true
			},
			// 订单状态
			stateValue: {
				type: String,
				require: true
			}
		},
		computed: {
			// 订单背景
			formatBgColor(){
				let colorObj = {
					0: '#FFA100',
					1: '#0096E7',
					2: '#DF0000'
				}
				return colorObj[this.orderStatus]
			},
			// 格式化球场订单名称
			formatBallName(){
				return (keyValue) => {
					let obj = {
						orderNo: '订单流水号',
						peopelNum: '参与人数',
						belongGym: '场馆',
						groundNum: '场地号',
						appointmentStartTime: "预约开始时间",
						appointmentEndTime: "预约结束时间",
						orderType: '订单类型',
						serviceCharge: '手续费',
						commission: '抽佣',
						contacts: '联系人',
						contactsPhone: '联系方式',
						commentName: '评论人',
						envRank: '环境评价',
						serviceRank: '服务评价',
						priceRank: '性价比评价'
					}
					return obj[keyValue]
				}
			},
			// 格式化遍历对象
			formatObj() {
				let keys = Object.keys(this.orderList)
				let arrs = keys.filter(item => this.formatBallName(item))
				let keysNames = arrs.map(item => this.formatBallName(item))
				let values = arrs.map(item => this.orderList[item])
				const combinedObject = keysNames.reduce((obj, key, index) => {
					if(key === '订单类型'){
						obj[key] = values[index] === 0 ? '整租' : '约球'
					} else {
						obj[key] = values[index]
					}
				  return obj
				}, {})
				return combinedObject
			},
			// 获取对象长度
			ObjectLength(){
				return Object.keys(this.orderList).length
			}
		},
		methods: {
			// 商家审核退款
			lookRefund(num) {
				if(num === 0) {
					uni.showModal({
						title: '提示',
						content: '是否拒绝用户退款',
						success: async function (res) {
							if (res.confirm) {
								await businessLookRefund(num)
								uni.$u.toast('拒绝成功')
							} else if (res.cancel) {
								uni.$u.toast('取消退款')
							}
						}
					})
				} else {
					this.$emit('showRefund', true)
				}
			}
		}
	
	}
</script>

<style lang="scss" scoped>
.order_card{
	padding-bottom: 38rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	overflow: hidden;
	.header_bg{
		position: relative;
		padding: 26rpx 32rpx;
		box-sizing: border-box;
		height: 100rpx;
		overflow: hidden;
		background: linear-gradient( 270deg, #966CFF 0%, #C3ACFF 100%);
		.bg_nav{
			position: absolute;
			width: 170rpx;
			top: 0;
			right: 0;
		}
	}
	.order_title{
		display: flex;
		align-items: center;
		height: 100rpx;
		color: #fff;
		line-height: 100rpx;
		font-size: 32rpx;
		font-weight: 600;
		background-color: #FFA100;
		padding-left: 20rpx;
	}
	.btn_list{
		display: flex;
		align-items: center;
		gap: 30rpx;
		padding: 0 40rpx;
		.btn_left{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 80rpx;
			background: #F0F0F2;
			border-radius: 200rpx;
		}
		.btn_right{
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			background: linear-gradient( 270deg, #FCBF1C 0%, #FFAE00 100%);
			border-radius: 200rpx;
			&.cancel{
				background: #F0F0F2;
				color: #333;
			}
		}
	}
}
</style>