<template>
	<view class="returnCont">
		<block v-if="list.length > 0">
			<view class="returnList" v-for="(item, index) in list" :key="index">
				<view class="MallRefundsTemplate">
					<view class="top">
						<view class="company">
							<view class="company-logo" v-if="item.shop">
								<image :src="item.shop.cover" mode="aspectFill" />
								<view class="company-name nowrap">{{item.shop.name}}</view>
							</view>
							<view class="no nowrap" v-if="listType == 'deliver'">退货单号： {{item.shipment_no}}</view>
							<view class="no nowrap" v-else>退货单号： {{item.refund_no}}</view>
						</view>
						<view class="status" style="color:#ee4c47;" v-if="listType == 'deliver'">{{item.state_text}}
						</view>
						<view class="status" style="color:#ee4c47;" v-else>{{item.state.text}}</view>
					</view>
					<view class="goods-info" @click="goDetail(item.goods_sku.goods_id)" v-if="item.goods_sku">
						<image class="goods-img" :src="item.goods_sku.cover" mode="aspectFill" />
						<view class="goods">
							<view class="name nowrap">{{item.goods_sku.goods_name}}</view>
							<view class="sku">数权个数 <span>x {{item.qty}}</span> </view>
						</view>
					</view>
				</view>
				<view class="actions">
					<view v-if="item.can">
						<view v-if="item.can.audit" @click="$Router.push({name: 'storeExamine', params: {id: item.refund_id}})"
							class="nowPay actions-color">订单审核</view>
						<view v-if="item.can.sign" @click="goSigns(item.refund_id, index)" class="nowPay actions-color">
							订单签收</view>
						<view v-if="item.can.reToken" @click="goReTokens(item.refund_id, index)"
							class="nowPay actions-color">确认退货</view>
						<view v-if="item.can.logistic"
							@click="$Router.push({name: 'Logistic', params: {id: item.shipment_no}})"
							class="nowPay actions-color">查看物流</view>
						<view v-if="item.can.deliver"
							@click="$Router.push({name: 'DeliverForm', params: {id: item.shipment_no}})"
							class="nowPay actions-color">我要发货</view>
					</view>
					<view v-if="listType == 'deliver'" class="nowPay"
						@click="$Router.push({name: 'storeOrderDetails', params: {id: item.shipment_no, type: listType}})">
						查看详情</view>
					<view v-else class="nowPay"
						@click="$Router.push({name: 'storeOrderDetails', params: {id: item.refund_id, type: 'return'}})">
						查看详情</view>
				</view>
			</view>
		</block>
		<view v-else class="pack-center">
			<image src="/static/icons/order-null.png"></image>
			<view>{{toast}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsList",
		props: {
			// 数据列表
			list: {
				type: Array,
				default: () => {
					return new Array
				}
			},
			listType: '',
			// 列表空提示
			toast: {
				type: String,
				default: '暂无订单数据 -_-!'
			},
		},
		created() {},
		methods: {
			goSigns(id,index) {
				this.$emit('goSign',{id:id,index:index});
			},
			goReTokens(id,index){
				this.$emit('goReToken',{id:id,index:index});
			},
			goDetail(id){
				this.$emit('navDetail', {id: id})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 列表
	.returnList {
		background-color: #FFFFFF;
		padding: $padding;
		box-sizing: border-box;
		margin-top: $margin;
	}

	.MallRefundsTemplate {
		position: relative;
		z-index: 0;
	}

	// 顶部信息
	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		border-bottom: solid 1rpx #f7f7f7;
		position: relative;
		z-index: 0;

		.company-logo {
			display: flex;
			width: 90%;

			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.company-name {
				font-size: 30rpx;
				color: #484848;
				font-weight: bold;
				width: calc(100% - 40rpx);
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		.no {
			margin-top: 10rpx;
			font-size: $title-size*0.8;
			color: #999;
		}

		.status {
			color: #999;
			font-size: $title-size*.9;
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	// 商品信息
	.goods-info {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		margin-top: 36rpx;

		.goods-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}

		.goods {
			flex: 1;
			width: calc(100% - 120rpx);
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;

			.name {
				width: 100%;
				font-size: 30rpx;

				span {
					font-size: 32rpx;
					font-weight: normal;
				}
			}

			.sku {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
	}

	.flexrow {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;

		.copy {
			color: $mian-color;
			font-size: $title-size*0.8;
			font-weight: 400;
			padding: 0 30rpx;
		}
	}

	// 操作按钮
	.actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		flex-wrap: wrap;
		flex: 1;
		font-size: 28rpx;
		color: #fff;
		border-top: solid 1rpx #EFF4F2;
		margin-top: $margin;

		.nowPay {
			padding: 4rpx 20rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			color: #999;
			border: solid 1rpx #cacaca;

			&.actions-color {
				color: #e1293f;
				border-color: #ec96a0;
			}
		}

		.cancelOrder {
			padding: 10rpx 30rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			background-color: #DD524D;
		}

		.logistics {
			background-color: $mian-color;
			padding: 10rpx 30rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		.sign {
			background-color: #DD524D;
			padding: 10rpx 30rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		.evaluate {
			background-color: $mian-color;
			padding: 10rpx 30rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}
	}

	// 暂无订单
	.pack-center {
		text-align: center;
		font-size: $title-size-sm;
		color: $text-gray;
		padding-top: 50%;

		image {
			width: $uni-img-size-lg * 2;
			height: $uni-img-size-lg * 2;
			border-radius: $uni-border-radius-circle;
			margin-bottom: $margin;
		}
	}
</style>
