// 可供选择的订单
// 开票列表
<template>
	<view class="position-re" @longtap="showMiniBtn=true">

		<view class="bg-white margin-tb-sm radius ">
			<view class="margin-sm padding-bottom-sm   solid-bottom" @tap="onCopy(item.orderId)">
				<text>{{item.orderId}}<text class="cuIcon-copy padding-left-sm"></text></text>
				<text class="oil-main-color fr">{{item.orderState|statusConduct}}</text>
			</view>
			<view class="cu-list menu-avatar comment">
				<view class="cu-item padding-top-0" @tap="toDetails(item)">

					<!-- <view class="cu-avatar text-xl" :style="'background-image:url('+imgUrl+'orders-wjy.png)'"></view> -->
					<view class="cu-avatar text-xl round" v-show="item.siteImages!=null"
						:style="'background-image:url('+item.siteImages+')'"></view>
					<view class="content">
						<view class=" text-content text-bold text-df">
							{{item.siteName}}
						</view>
						<view class="text-sm ">
							<view class="flex">
								<view class="details">
									<view class="top1 text-left">
										<image class="icon icon-desc " :src="imgUrl+'orders-type.png'" alt /> 
										<text class="padding-left-xs" v-if="item.formats == '1'">加注机&nbsp; {{item.realLiter?item.realLiter:'0'}}升</text>
										<text class="padding-left-xs" v-if="item.formats == '2'">
											桶装
											<!-- （{{item.oilsCode}}） -->
										</text>
									</view>
									<view class="bottom text-left">
										<image class="icon icon-desc  " :src="imgUrl+'orders-car.png'" alt />
										<text class="padding-left-xs">
											{{item.vehicleNo | carF}}
										</text>
									</view>
									<view class="bottom text-left">
										<image class="icon icon-desc" :src="imgUrl+'orders-time.png'" alt />
										<text class="padding-left-xs">
											{{item.createTime}}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="action">
						<!-- <text class="text-xxl padding-right">$4444</text> -->
						<view class="pay-status">
							<text class=" text-bold  text-xxl">￥{{item.realAmount?item.realAmount:item.oldRealAmount?item.oldRealAmount:'0' }}</text>
						</view>
					</view>
				</view>
				<!-- <xkempty v-else></xkempty> -->
				<!-- 评价的弹出层 -->
				<view class="flex padding-sm">
					<view class="flex-sub" @tap="showMiniBtn=true">
						更多
					</view>
					<view class="nowrap" v-show="!timeout">
						<view class="flex-twice" v-show="item.orderStatus=='0'">
							<time-down :is-day="false" :is-hour="false" :tip-text="' '" :day-text="' '" :hour-text="':'"
								:minute-text="':'" :second-text="' '" :datatime="datatime"></time-down>
						</view>
					</view>
					<view class="" v-show="timeout">
						超时未支付
					</view>
					<view class="flex-sub text-right" v-show="item.orderState=='1' && !timeout">
						<button class="cu-btn nowrap sm bg-main-oil"
							@tap="makePay(item.orderSerialNumber)">立即支付</button>
					</view>
				</view>
			</view>
		</view>
		<view class="radius shadow mini-btn bg-white padding flex-wrap position-ab" v-if="showMiniBtn">
			<view class="margin-bottom-sm ">
				<button class="cu-btn nowrap  bg-main-oil" @tap="deleteOrder(item.orderSerialNumber)">删除</button>
			</view>
			<view class="margin-bottom-sm" v-show="item.orderStatus=='0'">
				<button class="cu-btn nowrap bg-brown" @tap="cancelOrder(item.orderSerialNumber)">取消</button>
			</view>
			<view class=" ">
				<button class="cu-btn nowrap " @tap="showMiniBtn=false">收起</button>
			</view>
		</view>
	</view>

</template>

<script>
	import timeDown from '@/components/xw-CountDown'
	import Empty from '@/components/Empty'
	import orderApi from '@/api/oil-order.js'
	export default {
		name: 'oilOrders',
		components: {
			xkempty: Empty,
			timeDown
		},
		props: {
			item: {
				type: Object,
				default () {}
			}
		},
		data() {
			return {
				showMiniBtn: false,
				baseURL: this.global.baseURL,
				imgUrl: this.global.imgURL,
				datatime: '',
				timeout: false
			}
		},
		created() {
			if (this.item.orderState == '-1') {
				this.datatime = this.timF(this.item.createTime)
				let now = new Date().getTime() * 0.001
				this.timeout = (now - this.datatime) > 0
			}
		},
		methods: {
			onCopy(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '订单号复制成功'
						})
					}
				})
			},
			timF(date) {
				date = date.substring(0, 19)
				date = date.replace(/-/g, '/')
				var timestampDeadline = (new Date(date).getTime()) / 1000 + 60 * 10
				return timestampDeadline
			},
			makePay(id) {
				this.$emit('makePay', id)
			},
			deleteOrder(id) {
				orderApi.delOrder(id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							this.$emit('refresh')
						}, 1000)
					}
				})
			},
			cancelOrder(id) {
				orderApi.cancelOrder(id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							this.$emit('refresh')
						}, 1000)
					}
				})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/BagStation/orderDetail/orderDetailUrea?data='+ JSON.stringify(item) + '&&type=orderList'
				})
			},
			onSelect(item) {
				// console.log('触发', '')
				this.$emit('onSelectItem')
			}

		},
		filters: {
			carF(value){
				if(value){
					return value
				}else{
					return "暂无"
				}
			},
			moneyFormath(value) {
				console.log(value) 
				if (value != 'xxx.x') { 
					let number = value.toFixed(2)
					return number
				} else {
					return value
				}
			},
			toT(value) {
				if (value) {
					return value / 1000
				}
			},
			dateFormat(value) {
				if (value) {
					return value.substring(5, 16)
				}
			},
			numberFilter(value) {
					if (value != 'xxx.x') {
							console.log('old:',value)
							let realAmount =(Math.round(value * 100) / 100).toFixed(2)
							console.log('new:',realAmount)
						return realAmount
					} else { 
						return value
					}
			},
			statusConduct(value) {
				//  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
				if (value) {
					// switch value
					// case "0"
					// return '待支付'
					
					switch (value) {
						case '0':
							return '新订单'
						case '1':
							return '支付中'
						case '-1':
							return '作废'
						case '2':
							return '结果确认中'
						case '3':
							return '请求退款'
						case '4':
							return '退款中'
						case '5':
							return '已退款'
						case '9':
							return '支付成功'
					}
				}
			}
		}
	}
</script>

<style scoped>
	.cu-avatar {
		background-color: rgba(255, 255, 255, 0);
	}

	.icon-car {
		height: 41px;
		background-size: contain;
		float: left;
		margin-top: -8px;
		margin-left: -6px;
	}

	.car-position {
		text-align: left;
	}

	.bottom {
		color: #333;
	}

	.icon-desc {
		display: inline-block;
		width: 12px;
		height: 12px;
		position: relative;
		top: 1px;
		line-height: 25px;
	}


	.details {
		position: relative;
	}


	.cu-item {
		position: relative;
	}

	.pay-status {
		position: absolute;
		z-index: 1;
		right: 100upx;
		bottom: 50rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.mini-btn {
		z-index: 1;
		bottom: -1rem;
		left: 1rem;
	}
</style>