<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<u-loading-page :loading="showLoading" loading-text="加载中..."></u-loading-page>
	<view style="background-color: #fff;min-height: 95vh;">
		<view class="top-bar">
			<view style="font-size: 28rpx;font-weight: bold;">共{{collectData.length}}个菜品</view>
			<view style="color: red;" @click="isShowBtn=!isShowBtn">管理</view>
		</view>
		<view class="dataInfo">
			<view class="dataList" v-for="(item,index) in collectData" :key="index">
				<checkbox-group @change="checkClick(item)" style="width: 30px;">
					<checkbox :checked="item.checked" v-show="isShowBtn"/>
				</checkbox-group>
				<view class="details">
					<view class="img">
						<image :src="item.imageUrl"></image>
					</view>
					<view class="text">
						<text style="font-weight: bold;font-size: 24rpx;">{{item.dishesName}}</text>
						<text>月售：{{item.saleNum}}</text>
						<text>￥{{ (item.price/100).toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="buy" v-show="isShowBtn">
			<view class="checked">
				<checkbox-group @tap="checkAll">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="total">
				<!-- {{ totalNum }} -->
				<view class="bill" @click="confirm">
					<text>删除</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	import { getCollectionDishesAPI,delCollectionDishesAPI } from "@/api/week-menu/index.js"
	export default {
		data() {
			return {
				fontValue:uni.getStorageSync('fontSize') || 8,
				collectData:[],
				allChecked: false,
				isShowBtn:false,
				confirmList:[],
				list: [],
				totalFine: '',
				showLoading:false,
			}
		},
		onLoad() {
			this.getCollectData()
		},
		methods: {
			async getCollectData() {
			  try {
				this.showLoading=true
			    const res = await getCollectionDishesAPI({"userId":uni.getStorageSync('userId')})
			    console.log('?? ~ getList ~ res:', res)
				this.collectData=res.rows;
				this.collectData.forEach(item=>{
					item.checked=false	
				})
				this.showLoading=false
			  } catch (error) {
			    console.log(error)
				this.showLoading=false
			  }
			},
			// 单个商品的选择
			checkClick(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.collectData.every(item => {
						return item.checked === true
					})
					if (goods) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			checkAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.collectData.map(item => {
						item.checked = true
					})
				} else {
					this.collectData.map(item => {
						item.checked = false
					})
				}
			},
			async confirm () {
				let that = this
				that.confirmList = that.collectData.filter((item) => {
					return item.checked == true
				})
				console.log(this.confirmList);
				if (that.confirmList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择要删除的商品！'
					})
				} else {
					// console.log(that.confirmList)
					let arr = that.confirmList.map(item=>item.dishesId)
					// console.log(arr)
					let param = {
						"dishesIds":arr,
						// "userId":uni.getStorageSync('userId'),
						// "shopstallId":this.menuData.stallId
					}
					const res = await delCollectionDishesAPI(param)
					if(res.code==200){
						// this.$modal.msgError("收藏成功")
						uni.$u.toast('取消藏成功')
						this.getCollectData()
						this.allChecked = false
					}
					 
				}
			}
		},

	}
</script>
 
 
<style>
	.top-bar{
		width: 95%;
		margin: 0rpx auto;
		padding-bottom: 20px;
		display: flex;justify-content: space-between;
	}
	
	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}
 
	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: #ddd;
		color: #fff !important;
		background-color: #2DCF8C !important;
	}
 
	/deep/uni-checkbox .uni-checkbox-input {
		border-color: #ddd;
	}
 
	/deep/uni-checkbox .uni-checkbox-input:hover {
		border-color: #ddd;
	}
 
	.search {
		padding-top: 20rpx;
	}
 
	.search .searchIput {
		background-color: #e6e6e6;
		width: 95%;
		margin: 0 auto;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 50rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
 
	.search .searchIput input {
		font-size: 26rpx;
		width: 100%;
		color: grey;
	}
 
	.search .searchIput image {
		width: 34rpx;
		height: 34rpx;
	}
 
 
 
	.dataInfo {
		width: 95%;
		height: 80vh;
		overflow-y: auto;
		margin: 0 auto;
	}
 
	.dataInfo .dataList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #F1F1F1;
		padding: 25rpx 0;
	}
 
	.dataInfo .dataList .details {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 0;
		margin-left: 20rpx;
	}
 
	.dataInfo .dataList .details .img image {
		width: 200rpx;
		height: 140rpx;
		padding: 0 20rpx;
	}
 
	.dataInfo .dataList .details .text text {
		color: #000;
		font-size: 23rpx;
		display: block;
		padding: 10rpx 0;
	}
 
	.dataInfo .dataList .details .text {
		color: red;
		font-size: 25rpx;
	}
 
	.dataInfo .dataList .action text {
		font-size: 25rpx;
		color: #000;
		border: 1px solid #C8C7CC;
		display: inline-block;
		line-height: 50rpx;
		width: 60rpx;
		text-align: center;
		box-sizing: border-box;
	}
 
	.dataInfo .dataList .action text:nth-child(2) {
		border-left: none;
		border-right: none;
	}
 
	.buy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 50%;
		bottom: 20px;
		width: 95%;
		transform: translate(-50%, 0);
		background-color: #fff;
	}
 
	.buy .checked {
		display: flex;
		align-items: center;
	}
 
	.buy .checked text {
		font-size: 25rpx;
		color: #000;
		padding: 0 12rpx;
	}
 
	.buy .total {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
 
	.buy .total .price {
		padding-right: 20rpx;
 
	}
 
	.buy .total .price text {
		font-size: 27rpx;
		color: #C8C7CC;
		display: inline-block;
	}
 
	.buy .total .price text:last-child {
		color: red;
		font-weight: bold;
	}
 
	.buy .total .bill text {
		font-size: 25rpx;
		color: #fff;
		display: inline-block;
		/* background-color: red; */
		border: 2rpx solid red;
		border-radius: 10rpx;
		color: red;
		height: 60rpx;
		line-height: 60rpx;
		width: 120rpx;
		text-align: center;
		margin: 20rpx;
	}
</style>