<template>
	<view class="content">
		<view class="content-top">
			<view class="top-banner">
				<u-swiper :list="bannerList" class="banner"></u-swiper>
			</view>
		</view>
		<view class="content-bottom">
			<!-- 预约 -->
			<!-- <u-button :custom-style="yuYueBtn" :hair-line="false" @click="gotoYueYu">一键预约</u-button> -->
			<!-- 接单信息 -->
			<view class="bottom-new-notice" v-if="orderStatusText" @click="checkOrderDetail()">
				<view class="notice-content">
					<view class="notice-content-item"><u-icon class="icon" name="home_icon_bells" custom-prefix="custom-icon" size="38" color="#333"></u-icon></span><span class="item-title">最新通知</span></view>
					<view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">订单<span>{{orderStatusText ? orderStatusText :''}}，</span>请耐心等待</view>
					<view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">{{orderTime ? orderTime :''}}</view>
					<view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">订单<span>{{orderStatusText ? orderStatusText :''}}，</span>欢迎再次下单</view>
					<view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">{{finishTime ? finishTime :''}}</view>
				</view>
				<view class="notice-static">
					<span class="notice-static-text">{{orderStatusText ? orderStatusText :''}}</span>
				</view>
			</view>
			<!-- 回收指引 -->
			<!-- <view class="bottom-zhiyin" @click="toZY">
				<u-image src="/static/houme_bg_guide.png" mode="" height="160"></u-image>
			</view> -->
			<!-- 下单 -->
			<view class="bottom-order flex justify_between align_center">
				<view class="order-type flex flex_column justify_center" @click="gotoSaoMa">
					<u-image src="/static/index/home_icon_code.png" width="186rpx" height="144rpx"></u-image>
					<view class="type type-saoma">扫码下单</view>
					<view class="type-info">在线下单</view>
				</view>
				<view class="order-type flex flex_column justify_center"  @click="gotoYueYu">
					<u-image src="/static/index/home_icon.png" width="176rpx" height="164rpx"></u-image>
					<view  class="type">自主下单</view>
					<view class="type-info">免费上门回收</view>
				</view>
			</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>
</template>

<script>
	import {getBannerList,geRubbishType,orderStatus} from '@/api/index'
	import { checkLogin } from '@/api/login.js' 
	export default {
		components: {  },
		data() {
			return {
				yuYueBtn:{
					background: "#4F88F7",
					borderRadius: "12px",
					color:'#fff',
				},
				hasLogin:false, // 是否登录
				noDataText:"", // 未登录提示文字
				itemOrderStatus:'', // 
				orderStatusText:'', // 订单状态
				orderTime:'', // 
				finishTime:'', // 订单完成时间
				bannerList:[],
				rubbishPaperName:"",
				rubbishSLName:"",
				rubbishYWName:"",
				rubbishJSName:"",
				rubbishPaperList:[],
				rubbishSLList:[],
				rubbishYWList:[],
				rubbishJSList:[],
				rubbishPriceList:[]
			}
		},
		onLoad() {
			this.pageInit()
		},
		onUnload() {
			
		},
		onShareAppMessage(res) {
		},
		onShareTimeline(res) {
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin=res.status==200
				if(this.hasLogin){
					this.pageInit()
				}else{
					this.noDataText="您尚未登录或登录已过期，完成登录后可查看数据信息！"
				}
			})
		},
		methods: {
			pageInit() {
				this.itemOrderStatus=''
				this.orderStatusText=''
				this.orderTime=''
				this.finishTime=''
				this.getBanner()
				this.geRubbishTypeList()
				this.getOrderStatus()
				this.checkUpdate()
			},
			// 获取banner图
			getBanner(){
				getBannerList().then(res=>{
					if(res.status==200){
						this.bannerList=res.data || []
					}
					console.log(res,'-----banner')
				})
			},
			// 获取订单状态
			getOrderStatus(){
				orderStatus().then(res=>{
					if(res.status==200){
						this.itemOrderStatus=res.data.orderStatus
						this.orderStatusText=res.data.orderStatusDictValue
						this.orderTime=res.data.reserveDateBegin.substring(0,10)+' '+res.data.reserveTimeTypeDictValue
						this.finishTime=res.data.finishDate
						console.log(res,'----------订单状态')
					}
				})
			},
			// 查看订单详情
			checkOrderDetail(){
				uni.navigateTo({
					url:'/pages/order/orderDetails'
				})
			},
			// 获取垃圾分类
			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
					}
				})
			},
			// 扫码下单
			gotoSaoMa(){
				// if(this.hasLogin){
					wx.scanCode({
					  success: (res)=> {
						  uni.navigateTo({
						      url: '/pages/index/order'
						  })
					    console.log(res,'----------------res===================')
					  }
					})
				// }else{
				// 	this.loginModal()
				// }
			},
			// 自主下单
			gotoYueYu(){
				if(this.hasLogin){
					uni.navigateTo({
					    url: '/pages/index/order'
					})
				}else{
					this.loginModal()
				}
			},
			// 回收指引
			toZY(){
				uni.navigateTo({
				    url: '/pages/index/zhiyin'
				})
			},
			// 未登录弹窗
			loginModal(){
				uni.showModal({
				  title: '提示',
				  content: '您尚未登录或登录已过期，请登录后使用',
				  success: (res)=> {
				    if (res.confirm) {
				     uni.navigateTo({
				         url: '/pages/login/login'
				     })
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			},
			// 检查更新
			checkUpdate(){
				if (uni.canIUse('getUpdateManager')) {
				      const updateManager = uni.getUpdateManager()
				      updateManager.onCheckForUpdate(function (res) {
				        console.log('onCheckForUpdate====', res)
				        // 请求完新版本信息的回调
				        if (res.hasUpdate) {
				          console.log('res.hasUpdate====')
				          updateManager.onUpdateReady(function () {
				            uni.showModal({
				              title: '更新提示',
				              content: '新版本已经准备好，是否重启应用？',
				              success: function (res) {
				                console.log('success====', res)
				                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
				                if (res.confirm) {
				                  // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
				                  updateManager.applyUpdate()
				                }
				              }
				            })
				          })
				          updateManager.onUpdateFailed(function () {
				            // 新的版本下载失败
				            uni.showModal({
				              title: '已经有新版本了哟~',
				              content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
				            })
				          })
				        }
				      })
				    }
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		padding: 0;
			.content-top{
				// width: 100%;
				// height:260upx ;
				// background-color: #4F88F7;
				// border-bottom-left-radius: 50%;  /* 左下角 */
				// border-bottom-right-radius:50%; /* 右下角 */
				// opacity: 1;
				.top-banner{
					padding: 20upx 30upx 0;
					.banner{
						width:100%;
						height: 140px;
					}
				}
			}
			.content-bottom{
				padding: 0 30upx 30upx;
				background-color: #f5f5f5;
				.bottom-new-notice{
					background-image: url('../../static/home_bg_expressage.png');
					background-size: 100% 100%;
					height:220upx;
					margin-top: 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 30upx;
					.notice-content{
						.notice-content-item{
							margin: 15upx 0;
							display: flex;
							align-items: center;
							.item-title{
								display: inline-block;
								margin-left: 20upx;
							}
						}
						.notice-content-item:last-child{
							font-size: 26upx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #7C7D7E;
						}
					}
					.notice-static{
						width:186upx;
						height: 108upx;
						background-image: url('../../static/home_sign_rider.png');
						background-size:100% 100%;
						.notice-static-text{
							position: relative;
							top:21upx;
							left:85upx
						}
					}
				}
				.bottom-zhiyin{
					margin: 30upx 0;
				}
				.bottom-order{
					padding: 50upx 86upx;
					margin:30upx 0 56upx;
					background: #FFFFFF;
					box-shadow: 0px 18px 35px rgba(1, 136, 209, 0.1);
					opacity: 1;
					border-radius: 12px;
					.order-type{
						text-align: center;
						.type{
							font-size: 42upx;
							font-weight: bold;
							color: #000000;
							margin-top: 10upx;
						}	
						.type-saoma{
							margin-top: 35upx;
						}
						.type-info{
							color:#999999;
							font-size: 24upx;
							font-weight: 400;
							margin-top: 10upx;
						}
					}
				}
				.statistics-title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #191919;
					opacity: 1;
					margin-bottom: 30upx;
				}
				.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>
