<template>
	<view>
		<view v-for="(item,index) in goodList">
			<view class="flex-column">
				<view>
					<image :src="item.colorPic" class="img"></image>
				</view>
				<view class="flex-d">
					<view class="flex-w">
						<text class="text1">{{item.silkName}}</text>
						<text class="text2">{{item.length}}米</text>
					</view>
					<view class="flex-w">
						<text class="text3">{{item.color}}</text>
						<text
							class="text3">{{item.wrapType.indexOf('STRONG')>=0?'打卷（抗皱纸管)':item.wrapType.indexOf('COMMON')>=0?'打卷（普通纸管)':''}}</text>
					</view>
					<view class="flex-w">
						<text class="text4"> ¥{{item.pricePreMeter}}/米</text>
						<text class="text4">小计：￥{{item.price}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: flex-end;margin-right: 20rpx;"
				v-if="goodItem.status=='PAID'||goodItem.status=='DELIVERED'||goodItem.status=='FINISHED'">
				<view style="width: 25%;" @click="afterSale(item)">
					<up-button shape="circle">售后</up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue'

	const goodList = ref([])
	const goodItem = ref({})

	onShow(() => {
		goodItem.value = JSON.parse(uni.getStorageSync('orderGoods'))
		goodList.value = JSON.parse(uni.getStorageSync('orderGoods')).items
	})
	
	const afterSale=(item:any)=>{
		uni.navigateTo({
			url: '/pages/orderFlow/applicationRefund/applicationRefund?item=' + JSON.stringify([item])+'&orderId='+  goodItem.value.id
		})
	}
</script>

<style lang="less" scoped>
	.flex-column {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
	}

	.flex-d {
		width: calc(100% - 220rpx);
		height: 170rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.text3 {
			color: #999999;
		}
	}

	.flex-w {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 1%;

		.text1 {
			font-size: 36rpx;
			padding: 2rpx 0;
		}

		.text2 {
			font-size: 34rpx;
			color: #1abc9c;
			padding: 2rpx 0;
		}

		.text4 {
			color: red;
		}
	}

	.img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 20rpx;
	}
</style>