<template>
	<view class="page">
		<view v-if="list.length>0" class="item" v-for="(item, index) in list" :key="index">
			<view class="top">
				<view class="service">
					<text>{{ $t('other.aluminumProducts') }}</text>
				</view>
				<view class="status">
					<text v-if="item.showStatus"> {{ item.showStatus_dictText }}</text>
					<text v-else> {{ item.auditStatus_dictText }}</text>
				</view>
			</view>

			<view class="zhuti">

				<view class="left">
					<img :src="item.pic" style="width: 100%;height: 100%;" />
				</view>

				<view class="right" @click="lookDetail(item,index)">
					<view class="text-hidden-1" v-if="item.userName">
						{{ $t('components.customerName') }} ：{{ item.userName }}
					</view>
					<view class="text-hidden-1" v-if="item.phone">
						客户电话：{{ item.phone }}
					</view>
					<view class="text-hidden-1">
						{{ $t('other.pickupAddress') }}：{{ item.address }}
					</view>
					<view class="text-hidden-1">
						{{ $t('other.pickupDate') }}：{{ item.createTime }}
					</view>
				</view>

				<view class="tip" v-if="item.showStatus == 0">
					<!--审核状态 0审核中 1 审核通过 2审核未通过-->
					<img v-if="item.auditStatus==0" src="../../static/order/3.svg" style="width: 100%;height: 100%;" />
					<img v-if="item.auditStatus==1" src="../../static/order/1.svg" style="width: 100%;height: 100%;" />
					<img v-if="item.auditStatus==2" src="../../static/order/2.svg" style="width: 100%;height: 100%;" />
				</view>

			</view>

			<!--撤单按钮-->
			<view class="bottom" v-if="showBackOrder && item.showStatus == 0">
				<view @click="backOrder(item.id)" class="btn">
					{{ $t('other.withdrawOrder') }}
				</view>
			</view>
		</view>

		<!--无历史记录-->
		<view style="padding: 100rpx 0;" v-else>
			<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderList",
		props: {
			list: {
				type: Array,
				default: false
			},
			showBackOrder: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {

			// 查看详情
			lookDetail(item, index) {
				// 交易平台的列表只用于展示，有撤单的说明是我的挂单，则可以查看详情
				if (this.showBackOrder && item.showStatus == 0) {
					// uni.navigateTo({
					//   url: `/pages_order/order/orderDetail2?id`+item.id
					// })
					uni.navigateTo({
						url: `/pages_order/order/myOrderDetail?orderInfo=${encodeURIComponent(JSON.stringify(item))}`
					});
				}
			},

			// 撤单
			backOrder(id) {
				let self = this
				uni.showModal({
					title: self.$t('other.backOrderTitle'),
					content: self.$t('other.backOrderTitleConfirm'),
					success(e) {
						if (e.confirm) {
							self.$api('noShow', {
								id
							}, res => {
								if (res.code == 200) {
									uni.showToast({
										title: self.$t('other.backOrderSuccess'),
										icon: 'none'
									})
									self.$emit("getList")
								}
							})
						}
					}
				})
			},
		}
	}
</script>


<style scoped lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		height: calc(90vh - 180rpx);


		.item {

			padding: 20rpx;
			border-radius: 40rpx;
			background-color: #fff;
      //overflow: hidden;
      //height:300px;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;

				.service {
					color: #000;
				}

				.status {
					color: #8d8d8d;
					font-size: 26rpx;
					font-weight: 600;
				}
			}

			.zhuti {
				display: flex;
				margin: 10rpx 0;
				position: relative;


				.left {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
					}
				}

				.right {

					width: calc(100% - 160rpx);
					color: #777;
					font-size: 24rpx;
					padding-left: 20rpx;
					line-height: 40rpx;
					background-color: #f8f8f8;
				}

				.tip {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					bottom: -20rpx;
					right: -20rpx;
				}
			}

			.bottom {
				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 50rpx;
					border-radius: 40rpx;
					color: #afafaf;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #ffffff;
					border: 1px solid #757986;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}
			}
		}

	}
</style>