<template>
	<view>
		<view class="all" >
		<view  
		:class="[current === index ? 'Tong' : '']" 
		@click="changeIndex" 
		:data-index="index" 
		v-for="(item,index) in list">
		{{item}}
		</view>
		</view>
		
		<block v-if="current === 0">
		<!-- 地址 -->
		<view class="home">
			<image src="../../../static/address.png"></image>
				<view>
					<text>{{user_address.consignee}} {{user_address.phone}}</text>
					<text>{{user_address.province_name + user_address.city_name + user_address.area_name + user_address.address}}</text>
				</view>
		</view>
		
		<!-- 设备 -->
		<view class="title-wrp">
			<image src="../../../static/style1.png" mode=""></image>
			<text>设备</text>
		</view>
		
		<!-- 设备详情 -->
		<view class="xiangxi">
			<text>产品类型</text>
			<view>
			<picker :value=0 mode="selector" :range="listSelect" @change="change">
				<view>{{value_ || '请选择'}}</view>
			</picker>
				<image src="../../../static/back.png" mode=""></image>
			</view>
		</view>
		
		<!-- 设备 -->
		<view class="title-wrp">
			<image src="../../../static/style1.png" mode=""></image>
			<text>维护包</text>
		</view>
		
		<view class="equipment">
			<view v-for="(item,index) in care_package_list" class="equipment-wrp">
				<label class="radio">
					<radio value="11111" /><text>1111</text>
				</label>
				<checkbox checked="true" />
				<image src="../../../static/imgs/app_icon/icon1.png" mode=""></image>
				<view>
					<text>{{item.package_name}}</text>
					<text class="dol">{{item.package_price}}</text>
				</view>
			</view>
		</view>
		
		<view class="bottom-wrp">
			<text @click="callPhone">联系电话: 11111111111111</text>
			<view>维护</view>
		</view>
		
		</block>
		
		<block v-else>
			<view @click="toMsg(item.id)" class="No-" v-for="(item,index) in list2">
				<!-- <image src="../../../static/imgs/kefu/sys_head.png" mode=""></image> -->
				<view class="msg-wrp">
					<text>{{item.consignee}} {{item.phone}}</text>
					<text>{{item.province_name}}{{item.city_name}}{{item.area_name}}</text>
					<view class="msg">
						<text>工单编号</text>
						<text>{{item.order_sn}}</text>
					</view>
					<view class="msg">
						<text>开始时间</text>
						<text>{{item.createtime}}</text>
					</view>
				</view>
				<image src="../../../static/back.png"></image>
			</view>
		</block>

	</view>
</template>

<script>
	import request from "../../../App.vue"
	export default {
		data() {
			return {
				list:['预约维修','历史工单'],
				current:0,
				list2:'',
				listSelect:['dnkmsqjodjioqw','fjiwjio'],
				value_:'',
				user_address:'',
				care_package_list:''
			};
		},
		methods:{
			change(e){
				this.value_ = this.listSelect[e.detail.value]
			},
			toMsg(e){
				uni.navigateTo({
					url:`/pages/after/installDetails/installDetails?id=${e}`
				})
			},
			changeIndex(e){
			this.current = parseInt(e.currentTarget.dataset.index)
			 if(this.current === 1){
				 // const data = {
					//  page:0
				 // }
				 request.post('/api/aftersale/installList').then(r=>{
				 	if(r.code == 1){
						console.log(r)
				 		this.list2 = r.data.data
				 	}
				 })
			 }
			}
		},
		onLoad:function(option){
			const data = {
				user_address_id : option.id
			}
			request.post('api/aftersale/careView').then(r=>{
				if(r.code === 1){
					this.user_address = r.data.user_address
					this.care_package_list = r.data.care_package_list
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.dol::before{
		content: '￥';
		font-size: 22rpx;
		display: inline-block;
	}
	.equipment{
		background-color: white;
		border-radius: 16rpx;
		width: 686rpx;
		margin: 0 auto;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.equipment-wrp{
		display: flex;
		align-items: center;
		// justify-content: space-between;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		>image{
			width: 110rpx;
			height: 110rpx;
			margin: 0 24rpx;
		}
		>view{
			display: flex;
			flex-direction: column;
			>text:first-child{
				margin-bottom:38rpx;
			}
			>text:last-child{
				color: #EE0A24;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
	
	.bottom-wrp{
		width: 686rpx;
		text-align: center;
		>text{
			color: #576B95;
			text-decoration: underline;
			font-size: 24rpx;
		}
		>view{
			margin-top: 32rpx;
			background: linear-gradient(135deg,#08a3e3, #0ac6d2);
			border-radius: 16rpx;
			color: white;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
		}
	}
	.all{
		display: flex;
		justify-content: space-around;
		color:#323233 ;
		font-size: 28rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background-color: white;
		position: relative;
		margin-bottom: 48rpx;
		>view{
			display: flex;
			justify-content: center;
		}
		>.Tong::after{
			bottom: 0rpx;
			content: '';
			display: block;
			width: 25rpx;
			height: 7rpx;
			background: linear-gradient(135deg,#0cdbc7, #06c3d9);
			border-radius: 200rpx;
			position: absolute;	
		}
	}
	
	.home{	
		background-image:url("../../../static/border.png");
		background-size: contain;
		width: 686rpx;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		background-color: white;
		border-radius: 16rpx;
		margin: 0 auto;
		display: flex;
		padding-left: 16rpx;
		// justify-content:space-between;
		align-items: center;
		>image{
			width: 48rpx;
			height: 48rpx;
		}
		>view{
			display: flex;
			flex-direction: column;
			margin-left: 27rpx;
		}
	}
	
	.title-wrp{
		display: flex;
		align-items: center;
		width: 686rpx;
		padding-top: 32rpx;
		padding-bottom: 32rpx;
		margin: 0 auto;
		>image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
		>text{
			font-size: 28rpx;
			font-weight: 600;
		}
		
	}
	
	.xiangxi{
		background-color: white;
		display: flex;
		align-items: flex-start;
		justify-content:space-between;
		width: 686rpx;
		margin: 0 auto;
		padding: 24rpx 32rpx;
		border-radius: 16rpx;
		>view{
			color: #C8C9CC;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		image{
			width: 32rpx;
			height: 32rpx;
			margin-left: 24rpx;
		}
		}
		
		.No-{
			margin: 0 auto;
			width: 686rpx;
			padding-top: 32rpx;
			padding-bottom: 32rpx;
			background-color: white;
			border-radius: 16rpx;
			padding-right: 24rpx;
			// justify-content:space-around;
			display: flex;
			align-items: flex-start;
			background-image: url("../../../static/installbg.png");
			background-size: cover;
			>image:first-child{
				width: 96rpx;
				height: 176rpx;
			}
			>image:last-child{
				width: 32rpx;
				height: 32rpx;
			}
		
		}
		.msg-wrp{
			width: 486rpx;
			margin: 0 auto;
			padding-left: 20rpx;
			justify-content: space-between;
			display: flex;
			flex-direction: column;
			>text:nth-child(2){
				margin-top: 8rpx;
			}
			.msg{
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				display: flex;
				justify-content: space-between;
				>text:last-child{
					color: #969799;
				}
			}
		}
</style>