<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 @click="toadd" class="home">
			<image src="../../../static/address.png"></image>
			<view>
				<text v-if="user_address_id === ''">点击选择地址</text>
				<block v-else>
				<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>
				</block>
				
			</view>
		</view>
		
		<!-- 设备 -->
		<view class="title-wrp">
			<image src="../../../static/style1.png" mode=""></image>
			<text>设备</text>
		</view>
		
		<!-- 设备详情 -->
		<view class="xiangxi">
			<image :src="equipment.quipment_image" mode=""></image>
			<text>{{equipment.equipment_name}}</text>
		</view>
		
		<view class="bottom-wrp">
			<text @click="callPhone">联系电话: {{number || '扫描后机器后获得'}}</text>
			<view @click="serive">维修</view>
		</view>
		</block>
		
		<block v-else>
			<view v-if="his.length === 0">暂无工单</view>
			<view @click="toMsg(item.id)" class="No-" v-for="(item,index) in his">
				<!-- <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"
	import camera from '../../../common/wechat/sdk.js'
	export default {
		data() {
			return {
				list:['预约安装','历史工单'],
				current:0,
				his:'',
				equipment_id:'',
				user_address_id:'',
				user_address:'',
				address: {
					is_default: 0
				},
				equipment:'',
				page:1
			};
		},
		onReachBottom(){
			if(this.current === 1){
				const data = {
					page:this.page + 1
				}
				this.page = this.page + 1
				request.post('api/aftersale/installList',data).then(r=>{
					if(r.code == 1){
						let a = r.data.data
						a = this.his.concat(a)
						this.his = a
					}
				})
			}
		},
		watch:{
			address(val, oldVal) {
				console.log(val)
				this.user_address = val
				this.user_address_id = val.id
				const data = {
					equipment_id: this.equipment_id,
					user_address_id : this.user_address_id
				}
				request.post('api/aftersale/installView',data).then(r=>{
					if(r.code === 1){
						this.equipment = r.data.equipment
					}
				})
			}
		},
		methods:{

			toadd(){
				uni.navigateTo({
					url:'/pages/user/address/list'
				})
			},
			serive(){
				const data = {
					equipment_id:this.equipment_id,
					user_address_id:this.user_address_id
				}
				if(this.equipment_id !== '' && this.user_address_id !== ''){
					request.post('api/aftersale/repair',data,'POST').then(r=>{
							uni.showToast({
								title:r.msg,
								icon:'none'
							})
					})
				}else{
					uni.showToast({
						title:'内容不能为空 请重试',
						icon:'none',
						success() {
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/index/view?id=13'
									
								})
							},500)
						}
					})
				}
			
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.number
				})
			},
			toMsg(e){
				uni.navigateTo({
					url:`/pages/after/installDetails/installDetails?id=${e}`
				})
			},
			changeIndex(e){
			this.current = parseInt(e.currentTarget.dataset.index)
			 if(this.current === 1){
				 request.post('api/aftersale/installList').then(r=>{
				 	if(r.code == 1){
						this.his = r.data.data
				 	}
				 })
			 }
			}
		},
		onLoad:function(){
					this.$wxsdk.scanQRCode(res => {
						this.equipment_id = res.resultStr
					});
		},
	}
</script>

<style lang="scss" scoped>
	.bottom-wrp{
		width: 686rpx;
		text-align: center;
		position: absolute;
		bottom: 64rpx;
		 // top:50%;
		left:50%;
		  transform:translate(-50%, -50%);
		>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{
		>image{
			width: 110rpx;
			height: 110rpx;
			margin-right: 49rpx;
		}
		background-color: white;
		display: flex;
		align-items: flex-start;
		justify-content: space-around;
		width: 686rpx;
		padding-right: 32rpx;
		padding-left: 56rpx;
		margin: 0 auto;
		padding-top: 24rpx;
		padding-bottom: 47rpx;
		border-radius: 16rpx;
		}
		
		.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>