<template>
	<!-- 催发货 -->
	<view class="">
		<up-popup :show="show" mode="bottom" :round="10" @close="close()" closeable>
			<view class="urgwBox">
				<view class="success"><up-icon name="checkbox-mark" size="36" :color="Color" /></view>
				<view class="title">已提醒卖家尽快发货</view>
				<view v-if="urge_status === 0" class="info">
					<template v-if="orderInfo.delivery_time">卖家承诺最晚于<text>{{orderInfo.delivery_time}}</text>发货</template>
				</view>
				<view v-else class="info">卖家超时发货，<template v-if="urge_status === 2 && deduct_amount">为您补偿<text>{{deduct_amount}}</text>元优惠券，<br>已自动发放到账户，</template>团长联系卖家尽快发货</view>
				<view class="box">
					<view class="btn" @click="comfirm()">联系团长</view>
					<view class="btn btn1" @click="close()">我知道了</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { typeList, returnList, refundList, Style } from '@/utils/list.js'
	
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			info: Object
		},
		setup(props, context) {
			const data = reactive({
				deduct_amount: 0,
				urge_status: 0,
				orderInfo: {},
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor
			})
			watch(props, (newProps) => {
				if (newProps.show) {
					data.orderInfo = newProps.info
					data.deduct_amount = newProps.info.deduct_amount
					console.log(typeof newProps.info.urge_status, newProps.info.urge_status)
					data.urge_status = newProps.info.urge_status
				}
			})

			function comfirm() {
				close()
				context.emit('contactTeamer', data.orderInfo.id)
			}

			function close() {
				context.emit('close')
			}
			
			return {
				...toRefs(data),
				close,
				comfirm
			}
		}
	}
</script>

<style lang="scss" scoped>
	.urgwBox {
		padding: 70rpx 30rpx 30rpx;
		.success{
			width: 140rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: v-bind('bgColor');
			border-radius: 50%;
			margin: 0 auto;
		}
		.title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #2c2c2c;
			margin: 60rpx 0 20rpx;
		}
		.info{
			text-align: center;
			font-size: 28rpx;
			line-height: 50rpx;
			color: #666;
		}
		.box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 80rpx;
			font-size: 30rpx;
		}
		.btn {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			background-color: #fff;
			text-align: center;
			border-radius: 8rpx;
			border: 1px solid #9D9D9D;
			box-sizing: border-box;
			width: 48%;
			&.btn1{
				background-color: v-bind('Color');
				color: #fff;
				border: 1px solid v-bind('Color');
			}
		}
	}
</style>
