<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-bottom-25">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-e62 text-bold">*</text>
					<text class="text-30 text-bold text-33">添加商品封面图</text>
					<text class="text-24 text-aa">（一张建议尺寸300*300）</text>
				</view>
				<ty-image-images-upload :count="1" :video-count="0" @imageChange="coverImgChange"
					:image_list="coverImg">
				</ty-image-images-upload>
			</view>
			<view class="padding-bottom-25">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-bold text-33">添加商品展示图</text>
					<text class="text-24 text-aa">（最多5张）</text>
				</view>
				<ty-image-images-upload :count="5" :video-count="0" @imageChange="showImgChange"
					:image_list="showImgList">
				</ty-image-images-upload>
			</view>
			<view class="padding-bottom-25">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-bold text-33">添加商品视频</text>
				</view>
				<ty-image-images-upload :count="0" :video-count="1" @videoChange="showVideoChange"
					:video_list="showVideo" @openVideoPop="openVideoPop" @closeVideoPop="closeVideoPop">
				</ty-image-images-upload>
			</view>
			<view class="margin-bottom-10">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-e62 text-bold">*</text>
					<text class="text-30 text-bold text-33">商品标题</text>
				</view>
				<view class="margin-top-25 padding-bottom-30 border-bottom-ed">
					<input placeholder="请输入商品名称" class="line-height-40 text-26" placeholder-class="text-aa"
						v-model="goodsName" maxlength="20" />
				</view>
			</view>
			<view class="border-bottom-ed flex align-center margin-bottom-40">
				<view class="">
					<text class="text-30 text-e62 text-bold">*</text>
					<text class="text-30 text-bold text-33">选择商品分类</text>
				</view>
				<picker :range="cates" range-key="name" :value="cateIndex" @change="changeCate"
					class="flex-one margin-left-30">
					<view class="flex line-height-100 align-center justify-end">
						<view class="text-30" :class="cateIndex == null ? 'text-aa' : ''">
							{{cateIndex == null ? '请选择' : cates[cateIndex].name}}
						</view>
						<view class="tyIcon-huaban text-4d text-32 margin-left-10"></view>
					</view>
				</picker>
			</view>
			<view class="margin-bottom-40">
				<view class="text-30 text-bold margin-bottom-15">
					商品详情-文字
				</view>
				<view class="areaBox">
					<textarea v-model="goodsDetail" placeholder="请输入商品详情" class="text-30 line-45 textareaBox"
						placeholder-class="text-aa" maxlength="500"></textarea>
					<view class="text-right margin-top-20 text-24 text-aa">
						{{goodsDetail.length > 500 ? 500 : goodsDetail.length}}/500
					</view>
				</view>
			</view>
			<view class="padding-bottom-25">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-bold text-33">商品详情-图片</text>
					<text class="text-24 text-aa">（最多9张）</text>
				</view>
				<ty-image-images-upload :count="9" :video-count="0" @imageChange="detailImgListChange"
					:image_list="detailImgList">
				</ty-image-images-upload>
			</view>
			<view class="margin-bottom-40">
				<view class="text-30 text-bold margin-bottom-15">
					商品价格-文字
				</view>
				<view class="areaBox">
					<textarea v-model="goodsPrice" placeholder="请输入商品价格" class="text-30 line-45 textareaBox"
						placeholder-class="text-aa"></textarea>
					<view class="text-right margin-top-20 text-24 text-aa">
						{{goodsPrice.length > 500 ? 500 : goodsPrice.length}}/500
					</view>
				</view>
			</view>
			<view class="padding-bottom-25">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-bold text-33">商品价格-图片</text>
					<text class="text-24 text-aa">（最多5张）</text>
				</view>
				<ty-image-images-upload :count="5" :video-count="0" @imageChange="priceImgListChange"
					:image_list="priceImgList">
				</ty-image-images-upload>
			</view>
			<view class="margin-bottom-40">
				<view class="text-30 text-bold margin-bottom-15">
					消防检测报告-文字
				</view>
				<view class="areaBox">
					<textarea v-model="reportMsg" placeholder="请输入商品检测报告文字" class="text-30 line-45 textareaBox"
						placeholder-class="text-aa"></textarea>
					<view class="text-right margin-top-20 text-24 text-aa">
						{{reportMsg.length > 500 ? 500 : reportMsg.length}}/500
					</view>
				</view>
			</view>
			<view class="padding-bottom-45">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-bold text-33">消防检测报告-图片</text>
					<text class="text-24 text-aa">（最多5张）</text>
				</view>
				<ty-image-images-upload :count="5" :video-count="0" @imageChange="reporImgListChange"
					:image_list="reporImgList">
				</ty-image-images-upload>
			</view>
			<block v-if="status == 5">
				<view class="text-ff85 text-28 text-bold line-40 margin-bottom-15">
					审核意见
				</view>
				<view class="bg-f5 padding-20 text-28 text-33 line-40">
					{{refuseReason}}
				</view>
			</block>
		</view>
		<cover-view class="flex align-center justify-center bottomBox" v-if="showBottomBtn">
			<cover-view class="btn1 margin-right-30 text-30 text-33 text-bold" @click="tapSave(1)">暂存</cover-view>
			<cover-view class="btn2 text-30 text-ff text-bold" @click="tapSave(2)">提交</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				coverImg: [], //封面图
				showImgList: [], //展示图
				showVideo: [], //商品视频
				goodsName: '', //商品名称
				cates: [],
				cateIndex: null,
				goodsDetail: '', //商品详情
				detailImgList: [], //商品详情图片
				goodsPrice: '', //商品价格
				priceImgList: [], //商品价格图片
				reportMsg: '', //消防检测报告
				reporImgList: [], //报告图片
				status: 1, //1-暂存 2-待审核 3-未上架 4-已通过 5-已拒绝
				refuseReason: '',
				showPage: false,
				showBottomBtn:true,
			}
		},

		onLoad(options) {
			this.id = options.id ? options.id : '';
			uni.setNavigationBarTitle({
				title: this.id ? '编辑商品' : '添加商品'
			})
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.rq.getData('fire/api/Supply/getProductData', {
					product_id: this.id ? this.id : 0
				}, {
					loading: 1
				}).then(res => {
					if (res.code == 0) {
						this.cates = res.data.category;
						if (this.id) {
							if (res.data.product_data.cover_img) {
								this.coverImg.push(res.data.product_data.cover_img);
							}
							this.showImgList = res.data.product_data.img_path == '' ? [] : res.data.product_data.img_path;
							if (res.data.product_data.video_url) {
								this.showVideo.push({
									video_url: res.data.product_data.video_url,
									image_url: res.data.product_data.video_cover_img
								});
							}
							this.goodsName = res.data.product_data.name;
							this.cates.forEach((item, index) => {
								if (item.id == res.data.product_data.category_id) {
									this.cateIndex = index;
								}
							})
							this.goodsDetail = res.data.product_data.detail;
							this.detailImgList = res.data.product_data.detail_img == '' ? [] : res.data.product_data.detail_img;
							this.reportMsg = res.data.product_data.report;
							this.reporImgList = res.data.product_data.report_img == '' ? [] : res.data.product_data.report_img;
							this.goodsPrice = res.data.product_data.price;
							this.priceImgList = res.data.product_data.price_img == '' ? [] : res.data.product_data.price_img;
							this.status = res.data.product_data.status;
							this.refuseReason = res.data.product_data.examine_idea;
						}
						this.showPage = true;
					}
				})
			},
			// 上传封面图
			coverImgChange(e) {
				this.coverImg = e.image_list;
			},
			// 展示图
			showImgChange(e) {
				this.showImgList = e.image_list;
			},
			// 视频
			showVideoChange(e) {
				this.showVideo = e.video_list;
			},
			// 选择分类
			changeCate(e) {
				this.cateIndex = e.detail.value;
			},
			// 商品详情图
			detailImgListChange(e) {
				this.detailImgList = e.image_list;
			},
			// 商品价格图片
			priceImgListChange(e) {
				this.priceImgList = e.image_list;
			},
			// 消防检测图片
			reporImgListChange(e) {
				this.reporImgList = e.image_list;
			},
			// 播放视频
			openVideoPop(e){
				this.showBottomBtn = false
			},
			closeVideoPop(e){
				this.showBottomBtn = true
			},
			// 保存
			tapSave(type) {
				//1-暂存 2-提交
				if (type == 1) {
					if (this.goodsName == '') {
						this.cn.alert('请输入商品名称');
						return;
					}
				}
				if (type == 2) {
					if (this.coverImg.length == 0) {
						this.cn.alert('请添加商品封面图');
						return;
					}
					if (this.goodsName == '') {
						this.cn.alert('请输入商品名称');
						return;
					}
					if (this.cateIndex == null) {
						this.cn.alert('请选择商品分类');
						return;
					}
				}
				this.rq.getData('fire/api/Supply/supplyAddProduct', {
					type: type,
					id: this.id ? this.id : 0,
					name: this.goodsName,
					cover_img: this.coverImg.join(','),
					category_id: this.cateIndex == null ? '' : this.cates[this.cateIndex].id,
					img_path: this.showImgList.join(','),
					video_url: this.showVideo.length ? this.showVideo[0].video_url : '',
					detail: this.goodsDetail,
					detail_img: this.detailImgList.join(','),
					report: this.reportMsg,
					report_img: this.reporImgList.join(','),
					price: this.goodsPrice,
					price_img: this.priceImgList.join(','),
				}).then(res => {
					if (res.code == 0) {
						if (type == 1) {
							this.cn.alert('暂存成功')
						} else {
							this.cn.alert('提交成功，请等待后台审核').then(() => {
								uni.navigateBack({
									delta: 1
								})
							})
						}
					}
				})

			}
		}

	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding: 20rpx 30rpx calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.areaBox {
		width: 100%;
		border-radius: 10rpx;
		border: 1rpx solid #DDDDDD;
		padding: 20rpx;
	}

	.textareaBox {
		width: 100%;
		height: 210rpx;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		z-index: 6;
	}

	.btn2,
	.btn1 {
		width: 248rpx;
		line-height: 42rpx;
		padding: 22rpx 0;
		text-align: center;
		border-radius: 10px;
	}

	.btn2 {
		background: #2F97FF;
		border: 2rpx solid #2F97FF;
	}

	.btn1 {
		background: #fff;
		border: 2rpx solid #777777;
	}
</style>
