<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">
				<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="statistics-title">今日上门回收价格</view>
			<view class="bottom-statistics">
				<view class="statistics-rubbishType">
					<view class="statistics-box" v-if="rubbishPaperList.length">
						<view class="rubbishType-type"><u-icon class="icon" name="home_icon_paper" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishPaperName ? rubbishPaperName :''}}</span></view>
						<view v-for="item in rubbishPaperList" class="rubbishType-item">
							<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? '：'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
						</view>
					</view>
					<view class="statistics-box" v-if="rubbishYWList.length">
						<view class="rubbishType-type"><u-icon class="icon" name="home_icon_clothing" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishYWName ? rubbishYWName :''}}</span></view>
						<view v-for="item in rubbishYWList" class="rubbishType-item">
							<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? '：'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
						</view>
					</view>
				</view>
				<view class="statistics-rubbishType">
					<view class="statistics-box" v-if="rubbishSLList.length">
						<view class="rubbishType-type"><u-icon class="icon" name="home_icon_plastic" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishSLName ? rubbishSLName :''}}</span></view>
						<view v-for="item in rubbishSLList" class="rubbishType-item">
							<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? '：'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
						</view>
					</view>
					<view class="statistics-box" v-if="rubbishJSList.length">
						<view class="rubbishType-type"><u-icon class="icon" name="home_icon_metal" custom-prefix="custom-icon" size="36" color="#333"></u-icon><span style="display:in;ine-block; margin-left:10upx">{{rubbishJSName ? rubbishJSName :''}}</span></view>
						<view v-for="item in rubbishJSList" class="rubbishType-item">
							<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? '：'+(item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
						</view>
					</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>
</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,'----------订单状态')
					}
				})
			},
			// 获取垃圾分类
			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.rubbishSLList=b.rubbishTypeVOList
						this.rubbishYWList=c.rubbishTypeVOList
						this.rubbishJSList=d.rubbishTypeVOList
						this.rubbishPaperName=a.name
						this.rubbishSLName=b.name
						this.rubbishYWName=c.name
						this.rubbishJSName=d.name
					}
				})
			},
			gotoYueYu(){
				if(this.hasLogin){
					uni.navigateTo({
					    url: '/pages/index/yuyue'
					})
				}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: 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;
				}
				.statistics-title{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #191919;
					opacity: 1;
					margin-bottom: 30upx;
				}
				.bottom-statistics{
					display: flex;
					width: 100%;
					justify-content: space-between;
					.statistics-rubbishType{
						width: 48%;
						.statistics-box{
							margin-bottom:30upx ;
							background-color: #fff;
							padding: 20upx 10upx 20upx 20upx;
							border-radius:16upx;
						}
						.statistics-box:last-child{
							margin-bottom:0 ;
						}
					}
					.rubbishType-type{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					.rubbishType-item{
						display: flex;
						justify-content: flex-start;
						margin:10upx 0 ;
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #444444;
					}
				}
			}
		}
</style>
