<template>
	<view class="container">
		<form @submit="onSubmit">

			<view class="goods-img-block flex flex-center">

				<view class="add-btn" @click="ChooseImage">
					<image v-if="thumb" class="logo-img" :src="URL+''+thumb">
					</image>
					<image v-else src="../static/images/icon_18.png" mode="aspectFit" class="add-img-btn"></image>
					<view class="btn-name">添加商品主图</view>
				</view>
			</view>

			<view class="page-block">
				<view class="page-title-block">
					<view class="title">基本信息</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block required">
							<text>商品名称</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.name" name="name" class="input-box" placeholder="请输入商品名称"
								placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="cell flex flex-y-center arr-r ">
						<view class="title-block required">
							<text>商品分类</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="goodsTypeList" @change="onGoodsTypeChange"
								:range-key="'name'">
								<view :class="[goodsType?'':'desc-placeholder','input-box']">{{goodsType || '请选择'}}
								</view>
							</picker>
						</view>
					</view>


					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>商品状态</text>
						</view>
						<view class="desc">

							<view class="desc flex-center">
								<view class="checklist-box " @click="choicepay(item.status)"
									v-for="(item,index) of goods_list" :key='index'
									:class="is_goods==item.status?'actt':''">
									<view class="radio__inner" :class="is_goods==item.status?'act_border':''">
										<view :class="is_goods==item.status?'is-default-checked':''"
											class="radio__inner-icon radio__inner-icon ">
										</view>
									</view>
									<text class="checklist-text">{{item.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!--  -->
			<view class="page-block">
				<view class="page-title-block">
					<view class="title">商品价格</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block required">
							<text>商品售价</text>
						</view>
						<view class="desc">
							<input type="digit" :value="info.price" name="price" class="input-box" placeholder="请输入商品售价"
								placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block required">
							<text>兑换商品积分</text>
						</view>
						<view class="desc">
							<input type="digit" :value="info.integral" name="integral" class="input-box"
								placeholder="兑换商品积分" placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block required">
							<text>商品库存</text>
						</view>
						<view class="desc">
							<input type="number" :value="info.stock" name="stock" class="input-box"
								placeholder="请输入商品库存" placeholder-class="desc-placeholder">
						</view>
					</view>

					<view class="cell flex flex-y-center box-pack-between">
						<view class="title-block">
							<text>排序</text>
						</view>
						<view class="desc">
							<input type="number" :value="info.sort" name="sort" class="input-box" placeholder="请输入排序"
								placeholder-class="desc-placeholder">
						</view>
					</view>
				</view>
			</view>

			<view class="page-block">
				<view class="page-title-block"></view>
				<view class="content">
					<view class="cell flex flex-y-center  box-pack-between">
						<view class="title-block">
							<text>商品详情</text>
						</view>
						<view class="flex-center" v-if="id" @click="getEnit">
							<text style="color: #007AFF;">{{is_enit?'取消编辑':'编辑'}}</text>
							<text class="iconfont icongengduo"></text>
						</view>
					</view>
				</view>

				<view class="content">

					<view v-if="id">

						<block v-if="is_enit">
							<textarea style="width: 100%;" :value="info.description" name="description"
								placeholder="输入商品详情" />
						</block>

						<block v-else>
							<rich-text :nodes="info.description"></rich-text>
							
							<textarea style="width: 100%;display: none;" :value="info.description" name="description"
								placeholder="" />
								
						</block>


					</view>

					<block v-else>
						<textarea style="width: 100%;" :value="info.description" name="description"
							placeholder="输入商品详情" />
					</block>


				</view>
			</view>

			<!--  -->
			<view style="height: 30rpx;"></view>
			<!--  -->

			<view class="footer-bar">
				<view class="content flex flex-center" style="background: none;position: relative;">
					<button class="btn" hover-class="none" form-type="submit">
						立即提交
					</button>
				</view>
			</view>

			<!--  -->

		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				thumb: "",
				store_id: "",
				imgid: "",
				goods_list: [{
					status: 0,
					name: "下架",
				}, {
					status: 1,
					name: "上架",
				}],
				is_goods: 1,
				goodsTypeList: [],
				goodsType: "",
				goodsTypeid: "",
				listlabel: [],
				labelType: "",
				labelTypeid: "",
				info: {},
				id: "",
				is_enit: false,
			}
		},

		onLoad(e) {
			this.store_id = uni.getStorageSync("store_id");
			this.storeinfo();
			if (e.id) {
				this.id = e.id;
				this.goodsinfo(e.id);
			}
		},

		methods: {
			getEnit() {
				this.is_enit = !this.is_enit;
			},
			onGoodsTypeChange(e) {
				this.goodsType = this.goodsTypeList[e.detail.value].name;
				this.goodsTypeid = this.goodsTypeList[e.detail.value].id;
			},
			storeinfo() {
				this.request({
					url: 'Smdcshop/jftype_index',
					data: {
						admin_id: uni.getStorageSync("admin_id")
					}
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.goodsTypeList = res.data
					}
				})
			},

			goodsinfo(id) {
				this.request({
					url: 'Smdcshop/jfgoodsinfo',
					data: {
						id,
					}
				}).then(res => {
					if (res.code == "200") {
						this.info = res.data
						this.thumb = res.data.thumb;
						for (let i of this.goodsTypeList) {
							if (i.id == res.data.type_id) {
								this.goodsType = i.name
							}
						}
						this.goodsTypeid = res.data.type_id
						this.is_goods = res.data.status;
					}
				})
			},

			// getData() {
			// 	this.request({
			// 		url: 'Smdcshop/print_tag',
			// 		data: {
			// 			store_id: uni.getStorageSync("store_id")
			// 		}
			// 	}).then(res => {
			// 		if (res.code == "200") {
			// 			this.listlabel = res.data
			// 		}
			// 	})
			// },

			choicepay(index) {
				this.is_goods = index;
			},
			ChooseImage(e) {
				// let type = e.currentTarget.dataset.type;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(res)
						// var tempFilesSize = res.tempFiles[0].size;//获取图片的大小，单位B
						res.tempFilePaths.forEach((v, i) => {
							// console.log(v)
							this.Upload({
								url: "Smdcshop/upload",
								data: {
									url: v,
									type: "",
									token: "",
									admin_id: uni.getStorageSync("admin_id")
								}
							}).then(res => {
								console.log(res, "res")
								this.imgid = res.id;
								this.thumb = res.src;
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							});
						})
					},
				});
			},

			onSubmit(e) {
				let params = {
						type_id: this.goodsTypeid,
						status: this.is_goods,
						admin_id: uni.getStorageSync("admin_id"),
						thumb: this.imgid,
					},
					url;

				var data = Object.assign(params, e.detail.value);

				console.log(data, "data")

				if (this.info.id) {
					data.id = this.info.id
					url = "Smdcshop/jfgoods_save"
				} else {
					url = 'Smdcshop/jfgoods_save'
				}
				if (!data.name || !data.type_id || !data.price || !data.stock || !data.description) {
					uni.showToast({
						title: "必填项不能为空",
						icon: 'none'
					})
					return false
				}

				this.request({
					url,
					data: data
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

		},



	}
</script>



<style>
	@import url("../static/css/common.css");

	page .page-block .cell .input-box {
		text-align: right;
	}

	page {
		background-color: #f4f5f7;
	}

	.goods-img-block {
		width: 100vw;
		height: 70vw;
		background-color: #F4F6FA;
	}

	.goods-img-block .add-btn .add-img-btn {
		display: block;
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
	}

	.goods-img-block .add-btn .btn-name {
		font-size: 32rpx;
		color: #999;
		line-height: 45rpx;
		margin-top: 16rpx;
	}


	.checklist-box {

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
		margin-right: 22px;
	}

	.radio__inner {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		-webkit-transition: border-color .3s;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #007aff;
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
	}

	.act_border {
		border: 1rpx solid #007AFF;
	}

	.checklist-text {
		font-size: 28rpx;
		margin-left: 5px;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		color: #000;
	}

	/*  */
</style>
