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


			<view class="page-block">
				<view class="page-title-block">
					<view class="title">分类信息</view>
				</view>
				<view class="content">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>分类名称</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.title" name="title" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block ">
							<text>分类描述</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.keywords" name="keywords" class="input-box"
								placeholder="请输入" placeholder-class="desc-placeholder">
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block ">
							<text>排序</text>
						</view>
						<view class="desc">
							<input type="text" :value="info.sort" name="sort" class="input-box" placeholder="请输入"
								placeholder-class="desc-placeholder">
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="info-car">
				<view class="title-block">
					<view class="title">分类图标</view>
				</view>
				<view class="content" @click="ChooseImage">

					<image v-if="thumb" class="logo-img" :src="URL+''+thumb">
					</image>

					<image v-else src="../static/images/icon_6.png" class="logo-img"></image>

				</view>
			</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,
				addr: "",
				payType: 1,
				vipType: 1,
				info: {},
				imgid: "",
				thumb: ""
			}
		},
		onLoad(e) {
			this.storeinfo(e.id)
		},
		methods: {
			storeinfo(id) {
				this.request({
					url: 'Smdcshop/cygoods_category_info',
					data: {
						id: id
					}
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.info = res.data;
						this.thumb = res.data.thumb;
					}
				})
			},
			onRegionChange(e) {
				console.log(e)
				this.addr = e.detail.value.join(' ')
			},
			onPayTypeChange(e) {
				this.payType = e.detail.value
			},
			onVipTypeChange(e) {
				this.vipType = e.detail.value
			},

			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 url;
				var data = e.detail.value;
				data.store_id = uni.getStorageSync("store_id")
				data.thumb = this.imgid
				console.log(data, "data")

				if (this.info.id) {
					data.id = this.info.id
					url = "Smdcshop/cygoods_category_update"
				} else {
					url = 'Smdcshop/cygoods_category_add'
				}

				if (!data.title) {
					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 {
		background-color: #F4F5F7;
	}



	.info-car {
		margin-top: 25rpx;
		background-color: #fff;
		padding: 0 25rpx;
	}

	.info-car .title-block {
		border-bottom: 1rpx solid #f5f5f5;
	}

	.info-car .title {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}

	.info-car .content {
		padding: 30rpx 0;
	}

	.info-car .input-box {
		font-size: 28rpx;
		color: #333;
	}

	.info-car .logo-img {
		display: block;
		width: 120rpx;
		height: 120rpx;
	}
</style>
