<template>
	<view class="flex">
		<view class="flex-column">
			<image :src="textType[index].src" class="img"></image>
			<view class="line"></view>
			<view class="dot"></view>
		</view>
		<view style="width: 93%;">
			<view class="drc">
				<text class="text1">{{textType[index].tip}}</text>
				<text class="text2">{{textType[index].desc}}</text>
			</view>
			<view style="margin-top: 20rpx;">
				<view class="content">
					<view>{{radiolist[2]}}</view>
					<view style="color: #909399;">{{radiolist[0]}} &nbsp; &nbsp;{{radiolist[1]}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="querytot"></view>
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'
	const radiolist = ref([])
	const lineHeight=ref('100rpx')//默认60rpx
	const index=ref(0)
	const textType=ref([
		{
			tip:'仓库处理中',
			desc:'仓库正在加急发货，请耐心等待',
			src:'../../static/0628仓库.png'
		},
		{
			tip:'快递已发货',
			desc:'快递已经发货，请耐心等待',
			src:'../../static/0628仓库.png'
		},
		{
			tip:'已完成',
			desc:'本次服务已完成，欢迎再次购买',
			src:'../../static/0628已完成.png'
		},
		{
			tip:'已取消',
			desc:'欢迎下次选购',
			src:'../../static/0628已取消.png'
		},
		{
			tip:'已关闭',
			desc:'本次服务已关闭，有疑问可以联系我们。欢迎再次购买',
			src:'../../static/0628已关闭.png'
		},
	])
	const goodList=ref()
	
	onShow(()=>{
		goodList.value=JSON.parse(uni.getStorageSync('orderGoods'))
		radiolist.value=goodList.value.deliveryAddress.split("\n")
		
		if(goodList.value.status=='PAID'){
			index.value=0
		}else if(goodList.value.status=='DELIVERED'){
			index.value=1
		}else if(goodList.value.status=='FINISHED'){
			index.value=2
		}else if(goodList.value.status=='CANCELED'){
			index.value=3
		}else if(goodList.value.status=='CLOSED'){
			index.value=4
		}
	})
</script>

<style lang="less" scoped>
	.querytot {
		background: url(../../static/bottomBorder.png) bottom repeat-x;
		background-size: 50%;
		padding: 10rpx 0 0;
	}
	.img{
		width: 60rpx;
		height: 60rpx;
	}

	.flex {
		display: flex;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding-left: 5%;
		width: 7%;
	}

	.dot {
		margin: 0 16rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 100%;
		background-color: #ffc4bc;
	}

	.line {
		border-right: 1rpx solid #000000;
		width: 30rpx;
		margin: 10rpx 0;
		height: v-bind(lineHeight);
	}

	.drc {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		padding: 10rpx 20rpx;

		.text1 {
			color: red;
		}

		.text2 {
			color: #999;
		}
	}

	.img-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.content {
		padding: 10rpx 20rpx;
	}
</style>