<template>
	<view class="container">
		<view class="list">
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					商品名称
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<input type="text" v-model="goodsName" placeholder="请输入">

				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					商品数量
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<input type="text" v-model="quantity" placeholder="请输入">

				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					单位规格
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<picker mode="selector" :value="measureUnit" range-key='dictLabel' :range="measureUnitList"
						@change="measureChange">
						<view class="picker u-flex u-col-center u-row-right">
							<text v-if="measureUnit">{{measureUnitList[measureUnit-1].dictLabel}}</text>
							<text v-else>请选择</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					商品类型
				</view>
				<view class="r ">
					<picker mode="selector" :value="goodsType" range-key='name' :range="list" @change="typeChange">
						<view class="picker u-flex u-col-center u-row-right">
							<text v-if="goodsType">{{list[goodsType-1].name}}</text>
							<text v-else>请选择</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</picker>

				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					地区
				</view>
				<view class="r ">
					<picker mode="selector" :value="adcode" :range="list2" @change="addrChange">
						<view class="picker u-flex u-col-center u-row-right">
							<text v-if="adcode">{{adcode}}</text>
							<text v-else>请选择</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</picker>

				</view>
			</view>

			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					经营主体名称
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<input type="text" v-model="companyname" placeholder="请输入">

				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					联系人
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<input type="text" v-model="contact" placeholder="请输入">

				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l">
					联系人电话
				</view>
				<view class="r u-flex u-col-center u-row-right">
					<input type="text" v-model="contactPhone" placeholder="请输入">

				</view>
			</view>
		</view>

		<view class="f-btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		listProductCat
	} from "@/api/xinfadiProduct/product";
	import {
		newPurchase,
		newSales,
		commodityCategory
	} from '@/api/home.js'
	import {
		sysUnit
	} from '@/api/dictionary.js'

	export default {
		data() {
			return {
				type: "",
				adcode: '',
				userId: "",
				list: [],
				list2: ['宜都市', '枝江市', '当阳市', '远安县', '兴山县', '秭归县', '长阳土家族自治县', '五峰土家族自治县', '夷陵区', '西陵区', '伍家岗区', '点军区',
					'猇亭区', '其他'
				],
				contact: "",
				companyname: "",
				contactPhone: "",
				goodsName: "",
				goodsType: "",
				measureUnit: "",
				measureUnitList: [],
				quantity: "",

			}
		},
		onLoad(o) {
			const user = uni.getStorageSync('user')
			if (!user) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			} else {
				this.userId = user.userId
			}
			this.type = o.type
			console.log('this.userId', this.userId)
			this.getData()
			sysUnit().then(res => {
				this.measureUnitList = res.data
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.type == 0 ? '新增销售物品' : '新增需求物品'
			});
		},
		methods: {
			typeChange(e) {
				let index = e.detail.value
				this.goodsType = this.list[index].id
			},
			addrChange(e) {
				let index = e.detail.value
				this.adcode = this.list2[index]
			},
			measureChange(e) {
				let index = e.detail.value
				this.measureUnit = this.measureUnitList[index].dictValue
			},
			getData() {
				commodityCategory().then(res => {
					if (res.code == 200) {
						res.data.forEach((item, index) => {
							item.id = index + 1
						})
						this.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1500
						});
					}
				})
			},
			submit() {

				if (!this.goodsName) {
					uni.showToast({
						title: '请输入商品名称',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.contact) {
					uni.showToast({
						title: '请输入联系人',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.companyname) {
					uni.showToast({
						title: '请输入公司名',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.adcode) {
					uni.showToast({
						title: '请选择地区',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.goodsType) {
					uni.showToast({
						title: '请选择类型',
						icon: "none",
						duration: 1500
					});
					return
				}

				if (!this.contactPhone) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.measureUnit) {
					uni.showToast({
						title: '请输入单位规格',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (!this.quantity) {
					uni.showToast({
						title: '请输入数量',
						icon: "none",
						duration: 1500
					});
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确认要提交信息吗?',
					success: (r) => {
						if (r.confirm) {
							console.log('用户点击确定');
							// newPurchase ,newSales
							// let url = this.type == 1?'/inventory/purchase_demand/addPurchase':'/inventory/sales_demand/addSales'
							if (this.type == 0) {
								newPurchase({
									contact: this.contact,
									companyname: this.companyname,
									adcode: this.adcode,
									contactPhone: this.contactPhone,
									goodsName: this.goodsName,
									goodsType: this.goodsType,
									measureUnit: this.measureUnit,
									quantity: this.quantity,
									baseid: this.userId,
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '发布成功',
											icon: "none",
											duration: 1500
										});
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1500)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
											duration: 1500
										});
									}
									console.log(res)

								})
							} else {
								newSales({
									contact: this.contact,
									companyname: this.companyname,
									address: this.address,
									contactPhone: this.contactPhone,
									goodsName: this.goodsName,
									goodsType: this.goodsType,
									measureUnit: this.measureUnit,
									quantity: this.quantity,
									baseid: this.userId,
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '发布成功',
											icon: "none",
											duration: 1500
										});
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1500)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none",
											duration: 1500
										});
									}
									console.log(res)

								})
							}

						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

		}
	}
</script>

<style lang="scss" scoped>
	$color: #4892FD;

	.container {
		padding: 30rpx 30rpx 200rpx;

		.f-btn {
			position: fixed;
			bottom: 60rpx;
			left: 30rpx;
			right: 30rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background-color: $color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 20rpx;
		}



		.list {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			width: 100%;

			.item3 {
				padding: 20rpx 0;

				.l {
					line-height: 60rpx;
					height: 60rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					margin-top: 20rpx;

					image {
						width: 160rpx;
						height: 160rpx;
					}
				}

			}

			.item2 {
				.l {
					padding: 20rpx 0;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.r {
					flex-wrap: wrap;

					.i {
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						padding: 0 20rpx;
						border-radius: 8rpx;
						margin: 15rpx 10rpx 0 0;
						color: #666;
						border: 2rpx solid #eee;
						font-size: 24rpx;
					}

					.on {
						border: 2rpx solid $color;
						color: $color;
						background-color: #EEF7FF;
					}
				}
			}

			.item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: 0;
				}

				.l {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 60rpx;
					height: 60rpx;
					width: 300rpx;

					text {
						color: #c33;
						margin-left: 6rpx;
					}
				}

				.r {
					flex: 1;
					width: 1rpx;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: right;

					input {
						flex: 1;
						height: 100%;
						font-size: 28rpx;
						color: #333333;
					}

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.i {
						margin-left: 20rpx;

						image {
							width: 35rpx;
							height: 35rpx;
						}

						text {
							font-size: 24rpx;
							color: #666;
							margin-left: 10rpx;
						}

						.on {
							color: $color;
						}
					}

					text {
						font-size: 24rpx;
						color: #666;
						margin-left: 10rpx;
					}

				}
			}
		}

	}
</style>