<template>
	<view class="container">
	    <view style="display:flex;align-items:center;justify-content:space-between;font-size:40rpx;border-bottom:1px solid #e0e0e0;padding-bottom:10px;background-color:white;padding:20rpx;">
	        <view  :class="num==1?'btn':''" @click="change(1)">商品</view>
	        <view  @click="ChangeInfo" style="font-size:25rpx;">{{IsStyle==false?'管理':'完成'}}</view>
	    </view>
	    <view v-if="num==1">
	        <view style="margin-top:20rpx;">
	            <view style="width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;" v-if="list.length==0">
	                <image mode="aspectFit" :src="BASE_URL+'/api/File/Image/annexpic/nullImg.png'" style="width:400rpx;height:400rpx;"></image>
	                <text style="color:gray;font-size:30rpx;">暂无数据</text>
	            </view>
	            <block v-else>
	                <view style="display:flex;align-items:center;background-color:white;padding:10rpx;margin:20rpx 0rpx 20rpx 0rpx;" v-for="(item,index) in list" :key="index">
	                    <view v-if="IsStyle">
	                        <checkbox-group @change="changeitem(item)" style="margin:0 auto;">
	                            <checkbox :checked="item.checked" style="transform:scale(0.8);" ></checkbox>
	                        </checkbox-group>
	                    </view>
	                    <view @click="RedirectDetail(item)" style="display:flex;align-items:center;">
	                        <view>
	                            <image :src="item.goods!=null?BASE_URL+item.goods.Banner[0].url:''" style="width:200rpx;height:200rpx;"></image>
	                        </view>
	                        <view style="margin-left:20rpx;display:flex;flex-direction:column;height:200rpx;justify-content:space-evenly;">
	                            <view>{{item.goods&&item.goods.Title}}</view>
	                            <view>
	                                <text style="color:red;font-size:20rpx;">￥</text>
	                                <text style="color:red;font-weight:bold;">{{item.goods&&item.goods.StartMoneys}}</text>
	                            </view>
	                        </view>
	                    </view>
	                </view>
	            </block>
	        </view>
	    </view>
	    <view style="background-color:white;padding:20rpx;display:flex;align-items:center;position:fixed;bottom:0px;width:100%;border-top:1px solid #e0e0e0;" v-if="IsStyle">
	        <view style="width:50%;">
	            <label>
	                <checkbox-group @change="selectAll" style="margin:0 auto;">
	                    <checkbox :checked="allChecked" style="transform:scale(0.8);" ></checkbox>
	                    <text style="margin-top:5rpx;font-size:25rpx;">全选</text>
	                </checkbox-group>
	            </label>
	        </view>
	        <view style="width:50%;">
	            <view @click="DelCollectGoods" style="padding:20rpx;border-radius:20rpx;border:1px solid #e0e0e0;width:30%;text-align:center;margin:0 auto;">
	                <text>删除</text>
	            </view>
	        </view>
	    </view>
	</view>

</template>

<script>
	import BASE_URL from '../../common/config.js'
	import service from '../../service/service.js'
export default{
	data(){
		return{
			BASE_URL,
			num:1,
			list:[],
			
			IsStyle:false,
			allChecked:false,
			bl:true,
			model:{
				userId:'',
				currentPage:1,
				pageSize:20,
				sidx:'',
				sort:'desc'
			},
			total:0
			
		}
	},
	onLoad() {
		this.ShowList()
	},
	onReachBottom() {
		var _this = this;
		if (_this.bl) {
			_this.bl = false;
			if (_this.model.currentPage <= _this.total / _this.model.pageSize) {
				_this.model.currentPage++;
				_this.ShowList()
			}
		}
	},
	methods:{
		RedirectDetail(item){
			console.log('www',item)
			uni.navigateTo({
				url:'/pages/meansdetail/index?id='+item.goods.Id
			})
		},
		// DelMultipleCollect
		DelCollectGoods(){
			let arr=[]
			let data=this.list.filter(o=>o.checked!=false)
			data.forEach((item,index)=>{
				arr.push(item.id)
			})
			this.API.DelMultipleCollect(arr.toString()).then(res=>{
				console.log('数据',res)
				if(res.code==200){
					uni.showToast({
						title:'删除成功',
						icon:'none'
					})
					this.ShowList()
				}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
				}
			})
		},
		selectAll(){
			// 全选
			this.allChecked=!this.allChecked
			if (this.allChecked) {
				this.list.map(item => {
					item.checked = true
				})
			} else {
				this.list.map(item => {
					item.checked = false
				})
			}
		},
		// 单选
		changeitem(item){
		item.checked=!item.checked
		},
		ChangeInfo(){
			this.IsStyle=!this.IsStyle
		},
		ShowList(){
			this.model.userId=service.getUser().id
			this.API.GetCollectList(this.model).then(res=>{
				res.data.list.forEach((item,index)=>{
					item.checked=false
					if(item.goods){
						item.goods.Banner=JSON.parse(item.goods.Banner)
					}
				})
				if (this.bl) {
					this.list = res.data.list
				} else {
					this.list = this.list.concat(res.data.list)
				}
				this.total = res.data.pagination.total
			})
		}
	}
}
</script>

<style>
</style>