<template>
	<view class="pagesCons">
		<view class="tab-body">
			<view class="uTabs">
				<u-tabs-swiper ref="uTabs" bar-width="80" :list="tabList" inactive-color="#9DA8B5" name="dispName" active-color="#4F88F7" :current="current" @change="tabsChange" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
				<swiper-item class="swiper-item flex" v-for="(tabs, index) in tabList" :key="index">
					<!-- 左侧 -->
					<scroll-view scroll-y v-if="index==current" class="nav-left">
						<view :class="['nav-left-item', curType == item.code ? 'active' : '']" v-for="(item, index) in typeData" :key="index" @click="selType(item.code)">
							{{item.dispName}}
						</view>
					</scroll-view>
					<!-- 右侧 -->
					<scroll-view scroll-y class="nav-right flex_1" v-if="index==current" >
						<view class="check-order-list" 
						 >
							<view v-for="item in list" :key="item.id" class="list-item flex align_center">
								<u-image width="36" height="36" :src="item.icon" ></u-image>
								<view class="item-cont">
									<view>{{item.name}}</view>
									<view>{{index==0?item.customerPrice:item.factoryPrice}}元/kg</view>
								</view>
							</view>
						</view>
						<u-empty style="padding-top: 10vh;height: auto;" src="/static/img/def_result.png" :text="noDataText" img-width="252" img-height="176" v-if="list.length==0 && status!='loading'"
						 mode="list"></u-empty>
						<view v-if="index==current" style="padding: 20upx;">
							<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	// import md5 from 'md5'
	import { getLookUpDatas } from '@/api/data.js'
	import { reservePriceFind } from '@/api/index.js'
	export default {
		data() {
			return {
				status: 'loadmore',
				noDataText: '暂无数据',
				tabList: [
					{
						dispName: '上门回收价格',
						typeId: 1,
						queryLabel: ['WAIT_PAY'] // tab参数
					},
					{
						dispName: '工厂回收价格',
						typeId: 3,
						queryLabel: ['WAIT_SEND'] // tab参数
					},
				],
				typeData: [], // 左侧类型数据
				curType: '', // 当前类型
				current: 0,
				swiperCurrent: 0,
				pageNo: 1,
				pageSize: 10,
				list: [], // 类型list
			}
		},
		onLoad() {
			// this.pageInit()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// 获取垃圾类型
			this.getRubbishType()
		},
		onUnload() {
		},
		onShow() {
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh')
			this.pageNo = 1
			this.getRow()
			setTimeout(function () {
				uni.stopPullDownRefresh()
			}, 200)
		},
		methods: {
			pageInit() {
				this.sortIndex = 1
				this.pageNo = 1
				this.getRow()
			},
			// 获取垃圾类型数据
			getRubbishType() {
				getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
					console.log(res,'------rrrrrr')
					if(res.status == 200) {
						this.typeData = res.data || []
						this.curType = this.typeData.length ? this.typeData[0].code : ''
						this.getRow()
					} else {
						this.typeData = []
					}
				})
			},
			handleRefresh() {
				this.getRow()
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			swiperChange(event) {
				this.action = 'swiperChange'
				this.status = 'loading'
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				let isCurtab = this.current == current
				if (this.status != "nomore") {
					let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
					if (loadData) {
						this.$refs.uTabs.setFinishCurrent(current);
						this.swiperCurrent = current;
						this.current = current;
						this.resetPage();
					}
				}
			},
			// 单击左侧菜单
			selType (v) {
				this.typeList = []
				this.curType = v
				this.getRow()
			},
			// scroll-view到底部加载更多
			// onreachBottom() {
			// 	this.action = 'onreachBottom'
			// 	if (this.list.length < this.total) {
			// 		this.pageNo += 1
			// 		this.getRow()
			// 	} else {
			// 		if(this.list.length) {
			// 			uni.showToast({
			// 				title: '已经到底了',
			// 				icon: 'none'
			// 			});
			// 		}
			// 		this.status = "nomore"
			// 	}
			// },
			// 查询列表
			getRow() {
				this.status = "loading"
				reservePriceFind({code:this.curType}).then(res => {
					if (res.status == 200) {
						this.list = res.data
						// 纸质
						if(this.curType == 'PAPER'){
							this.list[0].icon = '/static/price/icon_aper_yellow.png'
							this.list[1].icon = '/static/price/icon_aper_flower.png'
							this.list[2].icon = '/static/price/icon_book.png'
							this.list[3].icon = '/static/price/icon_magazine.png'
							this.list[4].icon = '/static/price/icon_aper_miscellaneous.png'
							this.list[5].icon = '/static/price/icon_newspaper.png'
						}
						// 衣物
						if(this.curType == 'CLOTHES'){
							this.list[0].icon = '/static/price/icon_clothes.png'
						}
						// 金属
						if(this.curType == 'METAL'){
							this.list[0].icon = '/static/price/icon_iron_thin.png'
							this.list[1].icon = '/static/price/icon_iron_thick.png'
							this.list[2].icon = '/static/price/icon_steel.png'
						}
						// 塑料类
						if(this.curType == 'PLASTIC'){
							this.list[0].icon = '/static/price/icon_frame_white.png'
							this.list[1].icon = '/static/price/icon_frame_black.png'
							this.list[2].icon = '/static/price/icon_acrylic.png'
							this.list[3].icon = '/static/price/icon_bottle.png'
						}
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
					this.status = "loadmore"
				})
			},
			resetPage() {
				this.status = 'loading';
				this.curType = this.typeData[0].code
				// 上划分页
				if (this.action == 'onreachBottom') {
					this.getRow();
				}
				// 左右切换tab
				if (this.action == 'swiperChange') {
					this.list = [];
					this.getRow();
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.pagesCons {
		height: 100vh;
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
		.text-right {
			float: right;
		}

		.tab-body {
			flex: 1;
			display: flex;
			flex-direction: column;
			.uTabs {
				border-bottom: 1px solid #EEEEEE;
				box-shadow: 1px 1px 3px #eeeeee;
			}

			.check-list {
				flex: 1;
				overflow-y: scroll;

				.swiper-item {
					width: 100%;
					height: 100%;
					overflow: hidden;

					.scroll-view {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
					.nav-left{
						width: 220rpx;
						height: 100%;
						background-color: #F5F6F7;
						.nav-left-item{
							color: #303133;
							padding: 26upx 32upx;
							position: relative;
							font-size: 34rpx;
							color: #666E75;
						}
						.nav-left-item.active{
							color: #4F88F7;
							background: #fff;
						}
						.nav-left-item.active:after{
							content: '';
							display: block;
							width: 2px;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							background: #4F88F7;
						}
					}
					.nav-right{
						.check-order-list{
							width: 100%;
							height: 100%;
							padding: 30rpx 10rpx 30rpx 32rpx;
							.list-item{
								float: left;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
								width: 45%;
								height: 120rpx;
								border-radius: 12rpx;
								background-image: url(../../static/price/bg__book.png);
								background-repeat: no-repeat;
								padding-left: 20rpx;
								color: #fff;
								font-size: 24rpx;
								.item-cont{
									margin-left: 12rpx;
									view{
										line-height: 32rpx;
									}
								}
							}
						}
					}
				}
			}

		}
	}
</style>
