<template>
	<view class="content-yy">
		<view class="content-nav">
		    <view :style="{height: statusBarHeight+'px'}"></view>
			<view class="tobar" :style="{height: toBarHeight+'px'}">
		        <view class="title" :style="{height: toBarHeight+'px',lineHeight: toBarHeight+'px',color:'#fff'}">
					<text>下单</text>
		        </view>
		        <view class="back" @tap="onClickBack">
					<u-icon :custom-style="{height: toBarHeight+'px',lineHeight: toBarHeight+'px',color:'#fff',fontSize:'17px'}"  name="arrow-left"/>
		        </view>
			</view>
		</view>
			<view class="content-body">
				<view class="store-image flex flex_column justify_center align_center">
					<u-image src="/static/index/def_home_shop.png" width="172" height="172" ></u-image>
					<text>骑手张三的店铺</text>
				</view>
				<!-- 表单 -->
				<view class="list-container">
					<view class="list-item">
						<view class="list-item-left phone flex align_center">
							<text>联系电话</text>
							<u-image src="/static/billing_icon.png" width="24" height="24" style="margin:0 0 16rpx 10rpx;"></u-image>
						</view>
					    <view class="list-item-right flex_1">
							<u-input class="flex_1" :custom-style="inputClass" v-model="form.contactMobile" placeholder="请输入车牌号码" placeholder-style="color:'#bbb';font-size:18px"/>
					    </view>
					</view>
					<view class="list-item">
						<view class="list-item-left">
							<text>通信地址</text>
						</view>
					    <view class="list-item-right flex_1">
							<u-input class="flex_1" :custom-style="inputClass" v-model="form.contactAddress" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
							<u-icon class="back-img" name="arrow-right" color="#9DA8B5"  @click="selectAddress"></u-icon>
					    </view>
					</view>
					<view class="list-item">
						<view class="list-item-left">
							<text>详细地址</text>
						</view>
					    <view class="list-item-right flex_1">
							<u-input class="flex_1" :custom-style="inputClass"  v-model="form.houseAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
					    </view>
					</view>
				</view>
				<!-- 一键预约 -->
				<u-button :custom-style="yuYueBtn" :hair-line="false" @click="submit">一键预约</u-button>
				<!-- 今日上门回收价格 -->
				<view class="statistics-title">今日上门回收价格</view>
				<view>
					<!-- 纸张类 -->
					<view class="statistics-box" v-if="rubbishPaperList.length">
						<view class="rubbishType-type">
							{{rubbishPaperName ? rubbishPaperName :''}}
						</view>
						<view class="flex rubbish">
							<view v-for="item in rubbishPaperList" class="rubbishType-item">
								<u-image :src="item.image" width="92" height="92"></u-image>
								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
							</view>
						</view>
					</view>
					<!-- 塑料类 -->
					<view class="statistics-box" v-if="rubbishSLList.length">
						<view class="rubbishType-type">
							{{rubbishSLName ? rubbishSLName :''}}
						</view>
						<view class="flex rubbish">
							<view v-for="item in rubbishSLList" class="rubbishType-item">
								<u-image :src="item.image" width="92" height="92"></u-image>
								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
							</view>
						</view>
					</view>
					<!-- 金属类 -->
					<view class="statistics-box" v-if="rubbishJSList.length">
						<view class="rubbishType-type">
							{{rubbishJSName ? rubbishJSName :''}}
						</view>
						<view class="flex rubbish">
							<view v-for="item in rubbishJSList" class="rubbishType-item">
								<u-image :src="item.image" width="92" height="92"></u-image>
								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
							</view>
						</view>
					</view>
					<!-- 衣物类 -->
					<view class="statistics-box" v-if="rubbishYWList.length">
						<view class="rubbishType-type">
							{{rubbishYWName ? rubbishYWName :''}}
						</view>
						<view class="flex rubbish">
							<view v-for="item in rubbishYWList" class="rubbishType-item">
								<u-image :src="item.image" width="92" height="92"></u-image>
								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
							</view>
						</view>
					</view>
					<view class="nodata" v-if="rubbishPriceList.length==0">
						<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {geRubbishType} from '@/api/index'
	import {userInfoSave} from '@/api/data.js'
	import { checkLogin } from '@/api/login.js' 
	export default{
		components: {uniNavBar},
		data(){
			return{
				yuYueBtn:{
					background: "#1995FF",
					borderRadius: "8px",
					color:'#fff',
				},
				rubbishPaperName:"",
				rubbishSLName:"",
				rubbishYWName:"",
				rubbishJSName:"",
				rubbishPaperList:[],
				rubbishSLList:[],
				rubbishYWList:[],
				rubbishJSList:[],
				rubbishPriceList:[],
				form: {
					contactMobile: '', //联系人手机
					contactAddress:'' ,// 通讯地址
					lat:'', // 通讯地址的经度
					lng:'', // 通讯地址的纬度
					houseAddress:'', // 详细地址
				},
				area:{},
				statusBarHeight:0,
				// toBar:44
				// statusBarHeight:20,
				toBarHeight:44
			}
		},
		onLoad() {
			this.pageInit()
			wx.getSystemInfo({success: (res)=>{
				if(res.statusBarHeight){
					console.log(res.statusBarHeight,'--------res.statusBarHeight')
					this.statusBarHeight=res.statusBarHeight  
				}
				if(res.platform=="ios"){
				  this.toBarHeight=44;
				}else if(res.platform=="android"){
				  this.toBarHeight=48;
				}else{
				   this.toBarHeight=44;
				}
			  } 
			})
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin=res.status==200
				if(this.hasLogin){
					this.pageInit()
				}else{
					this.noDataText="您尚未登录或登录已过期，完成登录后可进行下单操作！"
				}
			})
		},
		methods:{
			pageInit() {
				this.geRubbishTypeList()
				// this.checkUpdate()
			},
			// 返回
			onClickBack(){
				uni.navigateBack({
					
				})
			},
			//截取省市区
			getArea(str) {
			    // let area = {}
			    let index11 = 0
			    let index1 = str.indexOf("省")
			    if (index1 == -1) {
			      index11 = str.indexOf("自治区")
			      if (index11 != -1) {
			        this.area.Province = str.substring(0, index11 + 3)
			      } else {
			        this.area.Province = str.substring(0, 0)
			      }
			    } else {
			      this.area.Province = str.substring(0, index1 + 1)
			    }
			 
			    let index2 = str.indexOf("市")
			    if (index11 == -1) {
			      this.area.City = str.substring(index11 + 1, index2 + 1)
			    } else {
			      if (index11 == 0) {
			        this.area.City = str.substring(index1 + 1, index2 + 1)
			      } else {
			        this.area.City = str.substring(index11 + 3, index2 + 1)
			      }
			    }
			 
			    let index3 = str.lastIndexOf("区")
			    if (index3 == -1) {
			      index3 = str.indexOf("县")
			      this.area.Country = str.substring(index2 + 1, index3 + 1)
			    } else {
			      this.area.Country = str.substring(index2 + 1, index3 + 1)
			    }
			    // return this.area;
				if(this.area.Province==''){
					this.area.Province=this.area.City
				}
				console.log(this.area,'---------------省市区')
			  },
			// 选择通信地址
			selectAddress(){
				wx.chooseLocation({
					success:(res)=>{
						if(res){
							this.getArea(res.address)
							console.log(res,'------------------地址信息',this.getArea(res.address))
							// this.form.contactAddress=res.address
							this.form.lat=res.latitude
							this.form.lng=res.longitude
							this.form.contactAddress=this.area.Province+this.area.City+this.area.Country
							
						}
					}
				})
			},
			// 获取垃圾分类
			geRubbishTypeList(){
				geRubbishType().then(res=>{
					if(res.status==200){
						console.log(res,'---------垃圾类型')
						this.rubbishPriceList=res.data
						const a= res.data.find(item=>item.code=='PAPER')
						const b= res.data.find(item=>item.code=='PLASTIC')
						const c= res.data.find(item=>item.code=='CLOTHES')
						const d= res.data.find(item=>item.code=='METAL')
						/* 纸张类 */
						this.rubbishPaperList=a.rubbishTypeVOList
						this.rubbishPaperList.map(item=>{
							if(item.code=='YELLOW_PAPER'){
								item.image='/static/index/icon_aper_yellow.png'
							}
							if(item.code=='COLOUR_PAPER'){
								item.image='/static/index/icon_aper_flower.png'
							}
							if(item.code=='BOOK_PAPER'){
								item.image='/static/index/icon_book.png'
							}
							if(item.code=='MAGAZINE'){
								item.image='/static/index/icon_magazine.png'
							}
							if(item.code=='OTHER_PAPER'){
								item.image='/static/index/icon_aper_miscellaneous.png'
							}
							if(item.code=='NEWS_PAPER'){
								item.image='/static/index/icon_newspaper.png'
							}
						})
						// 塑料类
						this.rubbishSLList=b.rubbishTypeVOList
						this.rubbishSLList.map(item=>{
							if(item.code=='PLASTIC_WHITE'){
								item.image='/static/index/icon_frame_white.png'
							}
							if(item.code=='PLASTIC_BLACK'){
								item.image='/static/index/icon_frame_black.png'
							}
							if(item.code=='PMMA'){
								item.image='/static/index/icon_acrylic.png'
							}
							if(item.code=='PLASTIC_LUCENCY'){
								item.image='/static/index/icon_bottle.png'
							}
						})
						// 衣物
						this.rubbishYWList=c.rubbishTypeVOList
						this.rubbishYWList.map(item=>{
							if(item.code=='SIMPLE_CLOTHES'){
								item.image='/static/index/icon_clothes.png'
							}
						})
						// 金属
						this.rubbishJSList=d.rubbishTypeVOList
						this.rubbishJSList.map(item=>{
							if(item.code=='THIN_IRON'){
								item.image='/static/index/icon_iron_thin.png'
							}
							if(item.code=='THICK_IRON'){
								item.image='/static/index/icon_iron_thick.png'
							}
							if(item.code=='STAINLESS_IRON'){
								item.image='/static/index/icon_steel.png'
							}
						})
						this.rubbishPaperName=a.name
						this.rubbishSLName=b.name
						this.rubbishYWName=c.name
						this.rubbishJSName=d.name
					}
				})
			},
			// 预约
			submit(){
				uni.navigateTo({
					url:'/pages/index/yuyueResult'
				})
				// const testVal=/^1[34578]\d{9}$/
				// if (!testVal.test(this.form.contactMobile)) {
				// 	uni.showToast({
				// 		title: '请输入正确的联系电话',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				// const params=Object.assign(this.form,{lat:this.form.lat,lng:this.form.lng})
				// userInfoSave(params).then(res=>{
				// 	if(res.status==200){
				// 		uni.$emit('pageType', {data: 'userInfo' })
				// 		setTimeout(()=>{
				// 			uni.navigateBack({
								
				// 			})
				// 		},300)
				// 	}
				// })
			},
			// 未登录弹窗
			loginModal(){
				uni.showModal({
				  title: '提示',
				  content: '您尚未登录或登录已过期，请登录后使用',
				  success: (res)=> {
				    if (res.confirm) {
				     uni.navigateTo({
				         url: '/pages/login/login'
				     })
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			},
		},
		
		onLaunch(){
			
		},
		
	}
</script>

<style lang="scss">
	.content-yy{
			width: 100%;
			height: 100vh;
			display: flex;
			flex-direction: column;
			position: absolute;
		.content-nav{
			width: 750upx;
			height: 396upx ;
			background-image: url("data:image/png;base64,[encoded data, 133888 characters]");
			background-size: 100% 100%;
			.tobar{
			  position:relative;
			  .back {
			    position: absolute;
			    left: 0;
			    top: 0;
			    bottom: 0;
			    padding-left: 15rpx;
			    padding-right: 15rpx;
			    .left_custom_class {
			      font-weight: 700;
			      height: 100%;
			      font-size: 36rpx;
			    }
			  }
			  .title {
				color: #fff;
			    text-align: center;
			    font-size: 36rpx;
			  }
			}
			}
		.content-body{
			width: 750upx;
			max-height: 100vh;
			padding: 0 26upx 30upx;
			flex:1;
			overflow-y: scroll;
			background: #f5f5f5;
			border-radius: 24px 24px 0px 0px;
			margin-top: -55rpx;
			.store-image{
				padding:60upx 0;
				text-align: center;
			}
			.list-container{
				width: 100%;
				background: #FFFFFF;
				border-radius: 24upx;
				margin-bottom: 40upx;
				box-sizing:border-box;
				.border-bottom{
					padding-left: 32rpx;
					border-bottom: 1px solid #E5E5E5;
				}
				.margin-bot{
					margin-bottom: 20rpx;
				}
				.list-item{
					// width: 100%;
					background-color: #fff;
					// display: flex;
					margin: 0 32upx;
					padding: 30rpx 0;
					// justify-content: space-between;
					// align-items:center;
					border-bottom: 1px solid #E5E5E5;
					.user-photo{
						display: block;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
					}
					.list-item-left{
						font-size: 30upx;
						margin-bottom: 10upx;
						color: #666E75;
					}
					// .phone:after {
					//     content: '*';
					//     color: red;
					//     font-size: 30upx;
					// 	line-height: 30upx;
					// }
					.list-item-right{
						font-size: 30rpx;
						color: #666666;
						display: flex;
						align-items: center;
						// margin-left: 20rpx;
						.back-img{
							width: 18rpx;
							height: 34rpx;
							margin-left: 20rpx;
						}
						.input-box{
							text-align: right;
						}
					}
					
				}
				.list-item:last-child{
					border-bottom: none;
				}
			}
			.statistics-title{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #191919;
				opacity: 1;
				margin: 46upx 0 24upx;
			}
			.statistics-box{
				padding: 20upx 30upx;
				margin-bottom: 30upx;
				background-color: #FFFFFF;
				border-radius: 12px;
				.rubbishType-type{
					margin-bottom: 36upx;
					font-size: 28upx;
					font-weight: 400;
					color: #000000;
				}
				.rubbish{
					font-size:24upx;
					overflow-x: scroll;
					.rubbishType-item{
						display: flex;
						flex-direction: column;
						align-items: center;
						min-width: 24.5%;
					}
				}
				
			}
			.statistics-box:last-child{
				margin-bottom:0 ;
			}
		}
	}
</style>
