<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="pageInfo.reverseReceiveAddress && pageInfo.reverseReceiveAddress.headerImageList? pageInfo.reverseReceiveAddress.headerImageList[0]:'/static/index/def_home_shop.png'" width="172" height="172" ></u-image>
					<text v-if="isHasRider.haveBindRider && pageInfo.name">{{pageInfo.name}}</text>
					<text v-else>{{mobile}}</text>
				</view>
				
				<!-- 表单 -->
				<view v-if="!isHasOrder">
					<view class="list-container" v-if="!isBindRider">
						<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.mobile" 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="reverseReceiveAddress.receiveAreasName" @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="reverseReceiveAddress.receiveAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
						    </view>
						</view>
					</view>
					<!-- 一键预约 -->
					<view class="flex flex_column justify_center align_center yuyueBtn">
						<view v-if="isBindRider && isHasRider" class="title">暂无可上门骑手，不能下单</view>
						<view class="haveRiderStyle" @click="submit" v-if="!isBindRider ||  !isHasRider">一键预约</view>
						<view class="noRiderStyle" v-if="isBindRider && isHasRider">一键预约</view>
						<!-- <u-button :custom-style="yuYueBtn" :hair-line="false" >一键预约</u-button> -->
					</view>
					
					<!-- 今日上门回收价格 -->
					<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 v-if="isHasOrder">
						<view class="body-state">
							<!-- <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>
							</view> -->
							<view class="result">
								您于<text>{{orderCreateTime|| '--'}}</text>下单成功, 点击<text style="color:#1995FF" @click="checkOrderDetail">查看详情</text>
							</view>
						</view>
						<view class="content-footer" @itemChange="chooseReason">
							<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason" ></v-select>
						</view>
					</view>
			</view>
			<!-- 取消订单弹窗 -->
			<uni-popup ref="openModal" type="center">
				<uni-popup-dialog content="您确定要取消此订单吗？" @confirm="onOk" title="取消订单"></uni-popup-dialog>
			</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {geRubbishType} from '@/api/index'
	import {orderInfoSave,searchRider} from '@/api/data.js'
	import { checkLogin } from '@/api/login.js' 
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {cancelOrder,saomaOrder,hasOrder} from '@/api/order.js'
	import vSelect  from  '@/components/select/v-select.vue'
	export default{
		components: {uniPopup,uniPopupDialog,vSelect,uniNavBar},
		data(){
			return{
				yuYueBtn:{
					width:'100%',
					background: "#1995FF",
					borderRadius: "8px",
					color:'#fff',
				},
				rubbishPaperName:"",
				rubbishSLName:"",
				rubbishYWName:"",
				rubbishJSName:"",
				rubbishPaperList:[],
				rubbishSLList:[],
				rubbishYWList:[],
				rubbishJSList:[],
				rubbishPriceList:[],
				form:{
					mobile:'', // 手机号码
				},
				reverseReceiveAddress: {
				  receiveAddress: '',// 详细地址
				  receiveAreasName:'',
				  lat:'',
				  lng:''
				},
				area:{},
				statusBarHeight:20,
				toBarHeight:44,
				pageInfo:null,
				isHasRider:false ,// 是否有绑定的骑手或3公里有可分配的骑手
				isBindRider:false,
				isHasOrder:false,
				sourceTypeReserve:'',
				orderCreateTime:'',
				orderId:'',
				imageHeader:'', // 门头照
			}
		},
		onLoad() {
			console.log(this.$store.state.vuex_orderInfo,'===============时间id')
			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.loginModal()
				}
			})
		},
		computed: {
			mobile(){
				return this.$store.state.vuex_userInfoData.contactMobile
			},
			// orderId(){
			// 	return this.$store.state.vuex_orderInfo.id
			// },
			// createDate(){
			// 	return this.$store.state.vuex_orderInfo.createDate
			// }
		},
		methods:{
			pageInit() {
				this.geRubbishTypeList()
				this.getSaomaInfo()
				this.getHasRider()
				this.getOrderNum()
				// this.checkUpdate()
			},
			// 查看是否有待完成订单
			getOrderNum(){
				hasOrder().then(res=>{
					if(res.status==200){
						this.isHasOrder=res.data.unfinishedNum>0
						this.orderId=res.data.id || ''
						this.orderCreateTime=res.data.createDate || ''
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 查看订单详情
			checkOrderDetail(){
				uni.navigateTo({
					url:`/pages/order/orderDetails?id=${this.orderId}`
				})
			},
			// 取消订单
			chooseReason(e){
				console.log(e,'-------取消订单')
				cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
					if(res.status==200){
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.getOrderNum()
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},200)
					}
				})
				
			},
			// 返回
			onClickBack(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			// 未绑定骑手 校验3公里是否有启用的骑手
			getHasRider(){
				searchRider().then(res=>{
					console.log(res,'==================')
					if(res.status==200){
						this.isBindRider=res.data.haveBindRider
						this.isHasRider=res.data.haveTempRider
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
					
				})
			},
			// 选择通信地址
			selectAddress(){
				wx.chooseLocation({
					success:(res)=>{
						if(res){
							this.getArea(res.address)
							this.reverseReceiveAddress.lat=res.latitude
							this.reverseReceiveAddress.lng=res.longitude
							this.reverseReceiveAddress.receiveAreasName= res.address
						}
					}
				})
			},
			// 扫码下单
			getSaomaInfo(){
				saomaOrder().then(res=>{
					if(res.status==200){
						this.pageInfo=res.data
						this.form.mobile=res.data.mobile
						this.reverseReceiveAddress=Object.assign(this.reverseReceiveAddress,res.data.reverseReceiveAddress||{})
						this.sourceTypeReserve=res.data.sourceTypeReserve
						if(res.data.reverseReceiveAddress && res.data.reverseReceiveAddress.headerImageList){
							this.imageHeader=res.data.reverseReceiveAddress.headerImageList.join()
						}
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			getArea(str) {
			    // let area = {}
			    let index11 = 0
			    let index1 = str.indexOf("省")
			    if (index1 == -1) {
			      index11 = str.indexOf("自治区")
			      if (index11 != -1) {
			        this.reverseReceiveAddress.provinceName = str.substring(0, index11 + 3)
			      } else {
			        this.reverseReceiveAddress.provinceName= str.substring(0, 0)
			      }
			    } else {
			      this.reverseReceiveAddress.provinceName = str.substring(0, index1 + 1)
			    }
			 
			    let index2 = str.indexOf("市")
			    if (index11 == -1) {
			      this.reverseReceiveAddress.cityName = str.substring(index11 + 1, index2 + 1)
			    } else {
			      if (index11 == 0) {
			       this.reverseReceiveAddress.cityName = str.substring(index1 + 1, index2 + 1)
			      } else {
			        this.reverseReceiveAddress.cityName = str.substring(index11 + 3, index2 + 1)
			      }
			    }
			 
			    let index3 = str.lastIndexOf("区")
			    if (index3 == -1) {
			      index3 = str.indexOf("县")
			      this.reverseReceiveAddress.districtName = str.substring(index2 + 1, index3 + 1)
			    } else {
			      this.reverseReceiveAddress.districtName = str.substring(index2 + 1, index3 + 1)
			    }
			    // return this.area;
				if(this.reverseReceiveAddress.provinceName==''){
					this.reverseReceiveAddress.provinceName=this.reverseReceiveAddress.cityName
				}
			  },
			// 获取垃圾分类
			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(){
				const testVal=/^1[34578]\d{9}$/
				if (!testVal.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的联系电话',
						icon: 'none'
					})
					return false
				}
				const params=this.form
				params.contactMobile=this.form.mobile?this.form.mobile:''
				params.contactAddress=this.reverseReceiveAddress.receiveAreasName?this.reverseReceiveAddress.receiveAreasName:''
				params.houseAddress=this.reverseReceiveAddress.receiveAddress?this.reverseReceiveAddress.receiveAddress:''
				params.lat=this.reverseReceiveAddress.lat?this.reverseReceiveAddress.lat:''
				params.lng=this.reverseReceiveAddress.lng?this.reverseReceiveAddress.lng:''
				params.imageHeader=this.imageHeader?this.imageHeader:''
				orderInfoSave(params).then(res=>{
					if(res.status==200){
						this.getOrderNum()
						// this.$store.state.vuex_orderInfo=res.data
						// this.$u.vuex('vuex_orderInfo',res.data)
						// console.log(this.$store.state.vuex_orderInfo,'===============时间id')
						// this.orderId=res.data?res.data.id:''
						// this.orderCreateTime=res.data? res.data.createDate:""
						// setTimeout(()=>{
						// 	uni.navigateTo({
						// 		url:`/pages/index/yuyueResult?id=${id}`
						// 	})
						// },300)
					}
				})
			},
			// 未登录弹窗
			loginModal(){
				uni.showModal({
				  title: '提示',
				  content: '您尚未登录或登录已过期，请登录后使用',
				  success: (res)=> {
				    if (res.confirm) {
				     uni.navigateTo({
				         url: '/pages/login/login?pageType=order'
				     })
				    } 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;
				}
			}
			.body-state{
				flex: 1;
				overflow-y:scroll;
				padding: 0 26rpx 30rpx;
			}
			// .store-image{
			// 	// display:table-cell;
			// 	padding:60upx 0;
			// 	text-align: center;
			// }
			.result{
				background-color: #FFFFFF;
				padding: 30upx;
				border-radius: 8px;
			}
			.content-footer{
				width: 100%;
				padding: 12upx 32upx 32upx;
				background: #FFFFFF;
				position: fixed;
				bottom: 0;
				left: 0;
				.cancelBtn{
					width: 100%;
					height: 84upx;
					display: flex;
					justify-content: center;
					align-items: center;
					// background: #E5E5E5;
					color: #666;
					border-radius: 16upx;
					font-size: 36upx;
					font-weight: 500;
				}
			}
			.yuyueBtn{
				width: 100%;
				.title{
					color: red;
					margin-bottom: 15rpx;
				}
				.haveRiderStyle{
					width: 100%;
					background: #1995FF;
					height: 84rpx;
					border-radius: 16rpx;
					color:#fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.noRiderStyle{
					width: 100%;
					height: 84rpx;
					background: rgba(25, 149, 255, 0.6);
					color:#fff;
					font-weight: 500;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.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>
