<template>
	<view class="content addFood">
		<!-- 菜谱介绍 -->
		<view class="topimg">
			<uni-file-picker :imageStyles="imageStyles" @select="handleFMimg" file-mediatype="image" disable-preview
				limit="1">
				<icon class="iconfont icon-add"></icon>
				<text class="text">上传封面</text>
				<text>(单张图片)</text>
			</uni-file-picker>
		</view>
		<view class="title">
			<input type="text" v-model="info.title" placeholder="输入菜谱标题" />
		</view>
		<view class="textarea">
			<textarea v-model="info.content" name="content" placeholder="输入菜谱简介" maxlength="100" />
		</view>
		<!-- 添加食材 -->
		<view class="food" v-if="isFood">
			<view class="h4">
				添加食材
				<text class="close" @click="handleClose" v-if="info.list.length">清空</text>
			</view>
			<view class="foodlist" v-for="(ite,ind) in info.list" :key="ind" v-if="info.list.length">
				<view class="item">
					<view class="name">{{ite.name}}</view>
					<view class="input">
						<input class="text" placeholder="请输入用量" v-model="ite.weight" type="digit" />{{ite.unit}}
					</view>
					<view class="edit">
						<icon class="iconfont icon-ashbin" @click="handledel(ind,'food')"></icon>
						<image src="../../static/xia.png" @click="handleMove(ind,0,'food')" class="xia"></image>
						<image src="../../static/xia.png" @click="handleMove(ind,1,'food')" class="shang xia"></image>
					</view>
				</view>

			</view>
			<view class="add" @click="handleAddfood">+添加食材</view>
		</view>
		<!-- 添加步骤 -->
		<view class="step">
			<view class="h4">添加步骤</view>
			<view class="stepList" v-for="(ite,ind) in info.stepList" :key="ind" v-if="info.stepList.length">
				<view class="top">
					<text>步骤{{ind+1}}</text>
					<view class="edit">
						<icon class="iconfont icon-ashbin" @click="handledel(ind,'step')"></icon>
						<image src="../../static/xia.png" @click="handleMove(ind,0,'step')" class="xia"></image>
						<image src="../../static/xia.png" @click="handleMove(ind,1,'step')" class="shang xia"></image>
					</view>
				</view>
				<view class="right">
					<view class="image">
						<uni-file-picker :imageStyles="imageStyles" file-mediatype="image" :index="ind"
							@select="handleBZimage" limit="1">
							<icon class="iconfont icon-add"></icon>
							<text class="text">上传图片</text>
						</uni-file-picker>
					</view>
					<view class="textarea">
						<textarea v-model="ite.content" name="content" placeholder="输入步骤说明" maxlength="100" />
					</view>
				</view>
			</view>
			<view class="add" @click="handleAddstep">+添加步骤</view>
		</view>
		<!-- 保存 -->
		<view class="groupbtn">
			<view @click="handleLook"> 预览</view>
			<view class="subbtn"> 保存</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isFood: true,
				info: {
					FMimg: "",
					title: "",
					content: "",
					list: [],
					stepList: []
				},
				imageStyles: {
					width: '100%',
					height: 331,
				},
			}
		},
		computed: {
			...mapState(["user"])
		},
		onLoad() {},
		methods: {
			// 
			getAddFood(list) {
				let that = this
				list.forEach(ite => {
					ite.weight = null
				})
				that.info.list = list
				console.log("list", list)
			},
			// 清空食材
			handleClose() {
				let that = this
				that.info.list = []
			},
			// 添加食材
			handleAddfood() {
				let that = this
				uni.navigateTo({
					url: "/pageTwo/me/foodlist"
				})
			},
			// 删除指定食材/菜谱
			handledel(id, type) {
				let that = this
				let name = type == 'step' ? '步骤' : '食材'
				let list = type == 'step' ? that.info.stepList : that.info.list
				uni.showModal({
					title: '友情提示',
					content: '是否删除当前' + name,
					success: function(res) {
						if (res.confirm) {
							list.splice(list.findIndex((ite, ind) => ind === id), 1)
						} else if (res.cancel) {
							that.$tools.msg("您已取消操作！");
						}
					},
				})
			},
			// 上下移动食材
			handleMove(ind, dir, type) {
				let that = this
				let list = type == 'step' ? that.info.stepList : that.info.list
				let moveComm = (curIndex, nextIndex) => {
					let arr = type == 'step' ? that.info.stepList : that.info.list
					arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]
					return arr
				}
				list.some((val, index) => {
					if (index === ind) {
						if (dir === 1 && index === 0) {
							this.$tools.msg('已在顶部！')
						} else if (dir === 0 && index === list.length - 1) {
							this.$tools.msg('已在底部！')
						} else {
							let nextIndex = dir === 1 ? index - 1 : index + 1
							list = moveComm(index, nextIndex)
						}
						return true
					}
					return false
				})
			},
			// 添加步骤
			handleAddstep() {
				let that = this
				that.info.stepList.push({
					image: null,
					content: null,
				})
			},
			// 上传封面
			handleFMimg(e) {
				let that = this
				that.info.FMimg = e.tempFilePaths[0]
				console.log('选择文件：', e.tempFilePaths[0])
			},
			// 上传步骤图
			handleBZimage(e) {
				let that = this
				that.info.stepList[e.index].image = e.tempFilePaths[0]
				console.log('选择文件：', e, that.info.stepList)
			},
			handleLook() {
				let that = this
				if (!that.info.FMimg) {
					that.$tools.msg("请上传封面图！")
					return
				}
				if (!that.info.title) {
					that.$tools.msg("请输入菜谱标题！")
					return
				}
				if (!that.info.content) {
					that.$tools.msg("请输入菜谱简介！")
					return
				}
				if (!that.info.list.length) {
					that.$tools.msg("请添加食材！")
					return
				}
				let array = []
				that.info.list.forEach(ite => {
					if (ite.weight != null || ite.weight > 0) {
						array.push(ite.weight)
					}
				})
				if (array.length != that.info.list.length) {
					that.$tools.msg("请输入食材重量！")
					return
				}
				if (!that.info.stepList.length) {
					that.$tools.msg("请添加步骤！")
					return
				}
				if (that.info.stepList.length) {
					let array = []
					that.info.stepList.forEach(ite => {
						if (ite.image != null && ite.content != null) {
							array.push(ite.image)
							return
						}
					})
					if (array.length != that.info.stepList.length) {
						that.$tools.msg("请完善步骤！")
						return
					}
				}
				that.info.pageName = "菜谱预览"
				that.info.user = that.user
				console.log("预览info", that.info)
				uni.navigateTo({
					url: "/pageTwo/me/menudetail?info=" + JSON.stringify(that.info)
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 15px;
	}

	.topimg {
		width: 100%;
		height: 320px;
		background: #fff;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		margin-bottom: 10px;
		overflow: hidden;
		position: relative;

		.iconfont {
			font-size: 30px;
			color: $mainColor;
		}

		text {
			display: inline-block;
			width: 100%;
			text-align: center;
			font-size: 12px;
			color: #999;
		}

		.text {
			font-size: 16px;
			color: #666;
			margin-bottom: 3px;
		}

		image {
			width: 100%;
			height: inherit;
		}
	}

	.step {
		.image {
			height: 320px;
			margin: auto;
			background: #f7f7f7;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-direction: column;
			overflow: hidden;

			image {
				width: 100%;
				height: inherit;
				display: inline-table;
			}

			icon {
				font-size: 30px;
				color: #ff4c4f;
				margin-bottom: 5px;
			}
		}
	}

	/deep/.is-add {
		flex-wrap: wrap;
		flex-direction: column;
	}

	.title,
	.textarea {
		/deep/input {
			height: 40px;
			line-height: 40px;
		}

		/deep/textarea {
			width: 100%;
			height: 6rem;
			line-height: 20px;
			background: none;
			border: none;
			font-size: 14px;
			padding-top: 10px;
		}
	}
</style>
