<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<view class="switch_item" v-for="(item, index) in datasList" @click="toSet(item.id)">
				<view class="icon_new"><image :src="item.cover_image" mode="aspectFill"></image></view>
				<view style="flex:1;">
					<view class=""><text>面值：</text>{{item.price}}</view>
					<view style="font-size: 12px;"><text>最高中奖金额：</text>{{item.max_awards_amount | formatAmount}}</view>
				</view>
				<switch :checked="item.status==1" @change="clickSwitch($event, index)" color="#00E266" @click.stop="" />
			</view>
			<view class="" v-if="datasList.length===0" style="color: #999;text-align: center;padding: 40rpx;">
				- 暂无记录 -
			</view>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				id: '',
				datasList: [
					// {price: '20',status: true,max_awards_amount: '20万'},
					// {price: '20',status: true,max_awards_amount: '20万'},
					// {price: '20',status: true,max_awards_amount: '20万'}
				],
				noMore: false,
				page: 1,
				
			}
		},
		filters: {
			formatAmount(item){
				// if(item>999999 && item==1000000){
				// 	return '一百万元'
				// }
				// if(item.split('.')[1].length>2){
				// 	return (+item).toFixed(2);
				// }
				return item;
			}
		},
		methods: {
			toSet(id){
				uni.navigateTo({
					url: '/pages/about/bonusSet/bonusSet?id='+id
				})
			},
			getList(){
				API.request('/adminZoneManage/zoneGoodsList', {zone_id: this.id}, res=>{
					if(res.data && res.data.length<10){
						this.noMore = true;
					}
					if(this.page>1){
						this.datasList = this.datasList.concat(res.data);
					}else{
						this.datasList = res.data;
					}
					
				})
			},
			clickSwitch(e, i){
				// console.log(e.detail.value,i);
				this.datasList[i].status = e.detail.value?'1':'0';
				API.request('/adminZoneManage/zoneGoodsChangeStatus', {
					zone_goods_id: this.datasList[i].id, 
					status: this.datasList[i].status,
				}, res=>{
					uni.showToast({
						title: res.msg
					})
				})
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.title
			})
			this.amount = e.title.split('专区')[0];
			this.id = e.id;
		},
		onShow() {
			this.getList();
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				this.getList();
			}else{
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		padding: 0px 25rpx;
		/*  #ifdef H5  */
		height: 88rpx;padding-top: var(--status-bar-height);
		/*  #endif  */
		/*  #ifdef APP-PLUS  */
		height: 2px;
		/*  #endif  */
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 40rpx;
		font-size: 14px;
		color: #444;
	}
	.switch_item{
		height: 132rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
		line-height: 60rpx;
		
		.icon_new{
			width: 240rpx;
			height: 132rpx;
			margin-right: 20rpx;
			image{
				width: 240rpx;
				height: 132rpx;
				border-radius: 5px;
				background-color: #000;
			}
		}
		text{
			color: #999;
		}
		switch{
			scale: (0.8);
			transform-origin: 100% 50%;//垂直居中、靠右
		}
	}
	
	
	
</style>
