<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<view class="good" v-for="(item,index) in goodList" :key="index">
			<view class="good-check" @click="item.checked=!item.checked">
				<easy-icon v-if="item.checked" name="checked" color="red" size="24"></easy-icon>
				<easy-icon v-else name="circle" size="24"></easy-icon>
			</view>
			<easy-good-card class="good-card" :thumb="cdn(item.image)" :title="item.text" 
				:price="item.price" :num="item.num" @num-change="(num:number)=>{item.num=num}" mode="stepper"></easy-good-card>
		</view>
		<easy-blank></easy-blank>

		<easy-submit-bar class="submit-bar" :price="total" @submit="submit">
			<view class="all-check" >
				<easy-icon v-if="allchecked" name="checked" color="red" size="24" @click="alluncheck"></easy-icon>
				<easy-icon v-else name="circle" size="24" @click="allcheck"></easy-icon>
				<text class="all-check-text">全选</text>
			</view>
		</easy-submit-bar>


	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	type listItem = { text : string, image : string, link ?: string, price : number, num : number, checked : boolean }
	export default {
		data() {
			return {
				goodList: [{ image: '/cate1.jpg', text: "商品名称", price: 2.69, num: 1, checked: true },
				{ image: '/cate2.jpg', text: "商品名称", price: 189.99, num: 1, checked: true },
				{ image: '/cate3.jpg', text: "商品名称", price: 2.25, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate5.jpg', text: "商品名称", price: 0.99, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate4.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },
				{ image: '/cate5.jpg', text: "商品名称", price: 13.88, num: 1, checked: true },] as listItem[],
			};
		},
		methods: {
			submit(price : number) {
				console.log(price)
			},
			cdn(url : String) : string {
				return "https://cdn.mzyun.tech/shop" + url;
			},
			allcheck(){
				this.goodList.map((item : listItem) => {
					item.checked=true		
				})
			},
			alluncheck(){
				this.goodList.map((item : listItem) => {
					item.checked=false		
				})
			}

		},
		computed: {
			total() : number {
				let total = 0;
				this.goodList.map((item : listItem) => {
					if (item.checked) {
						total += item.price * item.num
					}

				})
				total=Math.floor(total*100)/100
				return total;
			},
			allchecked():boolean{
				let checked=true;
				for (let i = 0; i < this.goodList.length; i++) {
					if (!this.goodList[i].checked) {
						checked= false;
						break;
					}
				}
				return checked;
			}
		}
	}
</script>

<style lang="scss">
	.good {
		display: flex;
		flex-direction: row;
		align-items: center;

		.good-check {
			margin: 0 10px;
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.good-card {
			flex: 1
		}
	}

	.submit-bar {
		width: 100%;
		position: fixed;
		bottom: 0;
		.all-check {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex:1;
			
			.all-check-text{
				font-size:12px
			}
		}
	}
</style>