<template>
	<view class="content addFood">
		<!-- 菜谱介绍 -->
		<view class="topimg" @click="handleFMimg(0)">
			<image :src="FMimg" mode="aspectFill" v-if="FMimg" />
			<icon class="iconfont icon-add"></icon>
			<text class="text">上传封面</text>
			<text>(单张图片)</text>
		</view>
		<view class="title">
			<input type="text" v-model="info.title" placeholder="输入菜谱标题" />
		</view>
		<view class="title title2">
			<view class="">菜谱类型：</view>
			<picker mode="selector" :range="menu" range-key="name" :value="cookIndex" @change="changeMenuList">
				<view class="uni-input">
					{{cookIndex!=null?menu[cookIndex].name:"请选择"}}
					<uni-icons type="forward" size="20" color="#999"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="textarea">
			<textarea v-model="info.description" name="content" placeholder="输入菜谱简介" maxlength="100" />
		</view>
		<!-- 添加食材 -->
		<view class="food" v-if="isFood">
			<view class="h4">
				添加食材
				<text class="close" @click="handleClose" v-if="info.food_list.length">清空</text>
			</view>
			<view class="foodlist" v-for="(ite,ind) in info.food_list" :key="ind" v-if="info.food_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="step_list" v-for="(ite,ind) in info.step_list" :key="ind" v-if="info.step_list.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" @click="handleBZimage(ite,ind)">
						<image :src="img" mode="aspectFill" v-if="ite.pic_list.length"
							v-for="(img,id) in ite.pic_img" />
						<icon class="iconfont icon-add"></icon>
						<text class="text">上传封面</text>
					</view>
					<view class="textarea">
						<textarea v-model="ite.description" name="content" placeholder="输入步骤说明" maxlength="100" />
					</view>
				</view>
			</view>
			<view class="add" @click="handleAddstep">+添加步骤</view>
		</view>
		<!-- 保存 -->
		<view class="groupbtn">
			<view @click="handleLook(1)"> 预览</view>
			<view class="subbtn" @click="handleLook(2)"> 保存</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				isFood: true,
				info: {
					cook_label: null,
					title: "",
					description: "",
					food_list: [],
					cover: null, //封面id
					step_list: []
				},
				FMimg: "",
				cookIndex: null,
			}
		},
		computed: {
			...mapState(["configInfo"]),
			menu() {
				return this.configInfo.cookbook_label
			},
		},
		onLoad() {},
		onShow() {},
		methods: {
			// 
			getAddFood(list) {
				let that = this
				list.forEach(ite => {
					ite.weight = null
				})
				that.info.food_list = that.$tools.mergeAndDeduplicate(that.info.food_list, list, 'name')
			},
			// 清空食材
			handleClose() {
				let that = this
				that.info.food_list = []
			},
			// 添加食材
			handleAddfood() {
				let that = this
				uni.navigateTo({
					url: "/pageTwo/me/foodlist?list=" + JSON.stringify(that.info.food_list)
				})
			},
			// 删除指定食材/菜谱
			handledel(id, type) {
				let that = this
				let name = type == 'step' ? '步骤' : '食材'
				let list = type == 'step' ? that.info.step_list : that.info.food_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.step_list : that.info.food_list
				let moveComm = (curIndex, nextIndex) => {
					let arr = type == 'step' ? that.info.step_list : that.info.food_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
				})
			},
			// 上传封面
			handleFMimg(ind) {
				let that = this
				uni.authorize({
					scope: 'scope.camera', // 根据需要选择相应的权限范围
					success() {
						// 用户已经同意小程序使用相册，后续调用 uni.chooseMedia 等 API不会有问题
						uni.chooseMedia({
							count: 1,
							sourceType: ['album', 'camera'],
							success(res) {
								that.$model.getUploadImg({
									uploadpath: res.tempFiles[0]
								}).then(res2 => {
									if (res2.code == 0) {
										that.FMimg = res2.data.pic_url
										that.info.cover = res2.data.id
									}
								})
							}
						})
					},
					fail() {
						// 用户拒绝授权，可以引导用户手动去授权设置页面进行授权
						uni.showModal({
							title: '授权失败',
							content: '请在设置中开启权限',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									// 跳转到设置页面，引导用户开启权限
									uni.openSetting();
								}
							}
						});
					}
				});

			},
			changeMenuList(e) {
				this.cookIndex = e.target.value
				this.info.cook_label = this.menu[e.target.value].id
			},
			// 添加步骤
			handleAddstep() {
				let that = this
				that.info.step_list.push({
					pic_list: [],
					pic_img: [],
					description: null,
				})
			},
			// 上传步骤图
			handleBZimage(ite, ind) {
				let that = this
				ite.pic_list = []
				ite.pic_img = []
				uni.authorize({
					scope: 'scope.camera', // 根据需要选择相应的权限范围
					success() {
						// 用户已经同意小程序使用相册，后续调用 uni.chooseMedia 等 API不会有问题
						uni.chooseMedia({
							count: 1,
							sourceType: ['album', 'camera'],
							success(res) {
								that.$model.getUploadImg({
									uploadpath: res.tempFiles[0]
								}).then(res2 => {
									if (res2.code == 0) {
										ite.pic_list.push(res2.data.id)
										ite.pic_img.push(res2.data.pic_url)
									}
									console.log("11111111", res2, ite)
								})
							}
						})
					},
					fail() {
						// 用户拒绝授权，可以引导用户手动去授权设置页面进行授权
						uni.showModal({
							title: '授权失败',
							content: '请在设置中开启权限',
							showCancel: false,
							confirmText: '去设置',
							success: function(res) {
								if (res.confirm) {
									// 跳转到设置页面，引导用户开启权限
									uni.openSetting();
								}
							}
						});
					}
				});
			},
			handleLook(ind) {
				let that = this
				if (!uni.getStorageSync('token')) {
					that.$tools.msg("登录后查看等多！")
					return
				}
				if (!that.info.cover) {
					that.$tools.msg("请上传封面图！")
					return
				}
				if (!that.info.title) {
					that.$tools.msg("请输入菜谱标题！")
					return
				}
				if (!that.info.cook_label) {
					that.$tools.msg("请选择菜谱类型！")
					return
				}
				if (!that.info.description) {
					that.$tools.msg("请输入菜谱简介！")
					return
				}
				if (!that.info.food_list.length) {
					that.$tools.msg("请添加食材！")
					return
				}
				let array = []
				that.info.food_list.forEach(ite => {
					if (ite.weight != null || ite.weight > 0) {
						array.push(ite.weight)
					}
				})
				if (array.length != that.info.food_list.length) {
					that.$tools.msg("请输入食材重量！")
					return
				}
				if (!that.info.step_list.length) {
					that.$tools.msg("请添加步骤！")
					return
				}
				if (that.info.step_list.length) {
					let array = []
					that.info.step_list.forEach(ite => {
						if (ite.pic_list != null && ite.description != null) {
							array.push(ite.pic_list)
							return
						}
					})
					if (array.length != that.info.step_list.length) {
						that.$tools.msg("请完善步骤！")
						return
					}
				}
				if (ind == 2) {
					that.info.token = uni.getStorageSync('token')
					that.$model.getAddCookbook(that.info).then(res2 => {
						if (res2.code == 0) {
							that.$tools.msg("添加成功")
							that.isFood = true
							that.info = {
								cook_label: null,
								title: "",
								description: "",
								food_list: [],
								cover: null, //封面id
								step_list: []
							}
							that.FMimg = ""
							that.cookIndex = null
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/menu/menu"
								})
							}, 1000)
						}
					})
				}
				if (ind == 1) {
					that.info.FMimg = that.FMimg
					console.log("预览info", that.info)
					uni.navigateTo({
						url: "/pages/add/Preview?info=" + JSON.stringify(that.info)
					})
				}
			}
		}
	}
</script>

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

	.topimg {
		width: 100%;
		height: 340rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		margin-top: 30rpx;

		.iconfont {
			font-size: 60rpx;
			color: $maincolor;
		}

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

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

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

	.step {
		.image {
			height: 340rpx;
			margin: auto;
			background: #f7f7f7;
			border-radius: 20rpx;
			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: 60rpx;
				color: #ff4c4f;
				margin-bottom: 5px;
			}
		}
	}

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

	.title,
	.textarea {
		/deep/input {
			height: 80rpx;
			line-height: 80rpx;
		}

		/deep/textarea {
			width: 100%;
			height: 6rem;
			line-height: 40rpx;
			background: none;
			border: none;
			font-size: 14px;
			padding: 20rpx 0;
		}
	}

	/deep/picker {
		height: 100rpx;
		line-height: 100rpx;

		.uni-input {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.title2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>