<template>
	<view>
		<view class="uni-list">
			<view class="list-item" v-for="(item, index) in voteDte" :key="item.id">
				<view class="content">
					<view class="image-box" >
						<image mode="" :src="item.picture" />
					</view>
					<view class="fr-content">
						<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
						<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
						<view class="text"><text>推荐理由:</text> {{item.reason}}</view>
					</view>
				</view>
				<view class="bottom">
					<view class="num-box">票数: <text class="num">{{item.vote_no}}</text></view>
					<view class="vote-btn" @click="vote(index)">投票</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {alertTip} from '@/common/util.js';
 	export default {
		data() {
			return {
				voteDte : [
					{
						id:'11',
						food_name:'西红柿炒鸡蛋',
						picture : '../../static/food/33.jpg',
						kinds : '蔬菜',
						reason : '有多种维生素，营养丰富有多种维生素',
						vote_no : 11
					},
					{
						id:'22',
						food_name:'鱼香茄子',
						picture : '../../static/food/44.jpg',
						kinds : '蔬菜',
						reason : '有多种维生素，营养丰富',
						vote_no : 11
					}
				]
			}
		},
		methods: {
			vote(index){
				uni.showModal({
					content:'确认投票？',
					success:res => {
						if(res.confirm){
							this.voteDte[index].vote_no++;
							alertTip('投票成功','success',2000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.uni-list{
	.list-item{
		border-bottom:10upx solid #f8f8f8;
		padding:30upx 20upx;
		.content{
			overflow:hidden;
			.image-box{
				float:left;
				width:200upx;
				height:200upx;
				image{
					display:block;
					width:100%;
					height:100%;
				}
			}
			.fr-content{
				margin-left:220upx;
				.text{
					font-size:26upx;
					color:#666;
					line-height:40upx;
					margin-bottom:10upx;
					text{
						float:left;
						color:#333;
						padding-right:10upx;
					}
				}
			}
		}
		.bottom{
			overflow:hidden;
			padding:10upx 20upx 0;
			.num-box{
				float:left;
				font-size:28upx;
				color:#333;
				line-height:40upx;
				padding-top:20upx;
				text{
					color:#5fbf3d;
					padding-left:4upx;
				}
			}
			.vote-btn{
				float:right;
				width:160upx;
				height:60upx;
				background: #5fbf3d;
				font-size:26upx;
				color:#fff;
				text-align:center;
				line-height:60upx;
				border-radius:4upx;
			}
		}
	}
}
</style>
