// 可供选择的订单
// 开票列表
<template>
	<view class="cu-item  radius shadow margin-bottom ">
		<!-- <image class="pay-status" :src="baseURL+'static/img/oil-unfinished.png'" alt /> -->
		<view class="cu-avatar text-sl" v-if="item.sourceType==='3'" :style="'background-image:url('+baseURL+'static/img/order-wjy.png)'"></view>
		<view class="cu-avatar text-sl" v-if="item.sourceType==='4'||item.sourceType==='6'" :style="'background-image:url('+baseURL+'static/img/order-xy.png)'"></view>
		<view class="cu-avatar text-sl" v-if="item.sourceType==='5'" :style="'background-image:url('+baseURL+'static/img/order-lv.png)'"></view>
		<view class="content">
			<view class=" solid-bottom padding-bottom-sm">
				<view class="flex-treble" @tap="copyId(item.orderID)">
					{{item.orderID}}<text class="flex-sub padding-left-sm text-right cuIcon-copy text-lg text-red">
					</text>
				</view>
				<view class="flex-sub text-right cuIcon-right" @tap="toDetails(item.orderID)">
				</view>
			</view>
			<view class=" text-content text-df">
				<text class="lin-h-2">
					{{item.oilSiteName}}
				</text>
			</view>
			<view class="text-sm " @tap="toDetails(item.orderID)">
				<view class="flex">
					<view class="details">
						<view class="top1 text-left">
							<image class="icon icon-desc " :src="baseURL+'static/img/oil-lf.png'" alt />

							<text class="padding-left-xs padding-right-sm">
								{{item.oilName}}
							</text>
							<text class=" text-lg text-bold text-red " v-if="item.vol">
								{{item.vol|numberFilter}} L</text>

						</view>
						<view class="bottom text-left">
							<image class="icon icon-desc  " :src="baseURL+'static/img/oil-time.png'" alt />

							<text class="padding-left-xs">
								{{item.createDatetime.substring(0, 10)}}
							</text>
						</view>
						<view class="bottom text-left">
							<image class="icon icon-desc  " :src="baseURL+'static/img/mini-car.png'" alt />

							<text class="padding-left-xs">
								加油车牌： {{item.carNo|plateFilter}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-top-sm  flex justify-between" @tap="toDetails(item.orderID)">
				<view class="text-gray text-df">
					{{item.createDatetime.substring(0,19)}}
				</view>
				<view>
					<text class="text-red text-lg text-bold total-money">￥{{amount|numberFilter}}</text>
					<view class="round pay-state  light bg-olive bg-transparent text-center state-0" v-if="istate==0">
						<text class="inner-istate  round">{{istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-orange bg-transparent text-center state-1" v-if="istate==1">
						<text class="inner-istate  round">{{istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-oilve bg-transparent text-center state--1" v-if="istate==-1">
						<text class="inner-istate  round">{{istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<view class="round pay-state  light bg-gray bg-transparent text-center state--2" v-if="istate==-2||istate==2">
						<text class="inner-istate  round">{{istate|formatStr}}</text>
						<view class="inner-border">

						</view>
					</view>
					<!-- <text v-show="item.orderType!='9'&&item.orderType!='0'" class="text-sm text-orange">(分单)</text> -->
				</view>
			</view>
		</view>
	</view>
	<!-- <xkempty v-else></xkempty> -->
	<!-- <Empty /> -->
	<!-- 评价的弹出层 -->

</template>

<script>
	export default {
		name: 'oilOrders',

		props: {
			item: {
				type: Object,
				default () {}
			}
		},
		computed: {
			istate() {
				let orderType = uni.getStorageSync('orderType')
				if (orderType == 1) {
					console.log(this.item.istate)
					switch (parseInt(this.item.istate)) {
						// 网页版 0：待支付， 1：已支付 ，-1：支付失败 ，-2：退款，
						//小程序	1：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
						case 1:
							return 1
						case -1:
							return -1
						case 2:
							return 2
						case 0:
							return 0
						case 3:
							return -2
					}
				} else {
					return this.item.istate
				}
			},
			amount(){
				let orderType = uni.getStorageSync('orderType')
				if (orderType == 1) {
					return this.item.sitePrice*this.item.vol
				}else{
					return this.item.realamount
				}
			}
		},
		data() {
			return {
				baseURL: this.global.baseURL
			}
		},
		methods: {
			copyId(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'none'
						})
					}
				})
			},
			toDetails(id) {
				let orderType = uni.getStorageSync('orderType')
				uni.setStorageSync('orderSource', orderType == 1 ? 'mpxoil' : null)
				uni.setStorageSync('orderId', id)
				uni.navigateTo({
					url: '/packageOrders/pages/orderList/OrderDetail/OrderDetail'
				})

			}
		},
		filters: {
			plateFilter(value) {
				if (value) {
					const numBegin = value.substring(0, 2);
					const numEnd = value.substring(5);
					return numBegin + '***' + numEnd;
				} else {
					return '暂无'
				}
			},
			toT(value) {
				if (value) {
					return value / 1000
				}
			},
			dateFormat(value) {
				if (value) {
					return value.substring(5, 16)
				}
			},
			numberFilter(value) {
				value = value - 1 + 1
				return value.toFixed(2)
			},
			formatStr(value) {
				let orderType = uni.getStorageSync('orderType')
				switch (parseInt(value)) {
					// 0：待支付， 1：已支付 ，-1：支付失败 ，-2：退款，
					case 1:
						return '已支付'
					case -1:
						return '支付失败'
					case -2:
						return '退款'
					case 0:
						return '待支付'
					case 2:
						return '已取消'
				}

			}
		}
	}
</script>

<style scoped>
	.lin-h-2 {
		line-height: 2.6rem;
	}

	.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;
		top: 50rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.pay-state {
		position: absolute;
		right: 2rem;
		bottom: 1rem;
		width: 172upx;
		height: 172upx;
		line-height: 172upx;
		transform: rotate(-30deg);

	}

	.inner-border {
		position: absolute;
		width: 142upx;
		height: 142upx;
		left: 14upx;
		border-radius: 800upx;
		top: 14upx;
	}

	.state-0 {
		border: 1px solid #8dc63f;
	}

	.state-1 {
		border: 1px solid #f37b1d;
	}

	.state--1 {
		border: 1px solid #f37b1d;
	}

	.state--2 {
		border: 1px solid #666;
	}

	.state-0 .inner-border {
		border: 1px dashed #8dc63f;
	}

	.state-1 .inner-border {
		border: 1px dashed #f37b1d;
	}

	.state--1 .inner-border {
		border: 1px dashed #f37b1d;
	}

	.state--2 .inner-border {
		border: 1px dashed #666;
	}
</style>