<template>
	<view class="berCon">
		<view class="berInput">
			<input type="text" placeholder-class="place-holder" value="" placeholder="请输入商品名称" @input="bindInput"
				v-model="inputVlaue" />
		</view>
		<view class="berTextarea">
			<view class="" style="margin-bottom: 20rpx;">
				<textarea class="zd_textarea" value="" placeholder="简要描述物品的型号、新旧程度、转手原因、使用感受吧～" @input="textareaInout"
					v-model="areaValue" />
			</view>
			<view class="" style="margin-left: 32rpx;width: 100%;">
				<view class="photoImgList" v-for="(item,index) in fileList" :key="index"
					style="display:inline-block;width: 29.3%;position: relative;margin-right: 1%;">
					<image :src="item" mode="" style="width:100%;height:176rpx;"></image>
					<view style="position: absolute;top: 0;right: 0;" @click="deleteImg(index)">
						<image src="/static/image/close@2x.png" style="width: 52rpx;height: 52rpx;"></image>
					</view>
				</view>
				<image src="/static/image/tianjia_icon@2x.png" mode="" style="width: 176rpx;height:176rpx;"
					@click="uploadImg"></image>
			</view>
			<view class="berBottom" @click="goMap">
				<image src="../../static/image/Frame_11@2x.png" style="width: 32rpx;height: 32rpx;margin-left: 32rpx;"
					mode=""></image>
				<text class="berAddresxz">{{SelectAddress}}</text>
				<image src="../../static/image/gengduo_icon_5@2x.png" style="width: 48rpx;height: 48rpx;" mode="">
				</image>
			</view>
		</view>
		<view class="" style="margin: 0 32rpx;border-radius: 16rpx;margin-bottom: 160rpx;">
			<view class="" style="position: relative;">
				<view class="">
					<van-cell title="价格" />
				</view>
				<view class="" style="position: absolute;top: 25rpx;left: 195rpx;">
					<input type="number" value="" placeholder-class="sizeColor" placeholder="请输入价格" @input="priceInput"
						v-model="peiceValue" />
				</view>
			</view>
			<view class="">
				<van-cell-group>
					<van-cell title="分类" is-link @click="showPickerSelect = true" />
					<view class="">
						<text class="SelectData" @click="showPickerSelect = true">{{select}}</text>
						<van-popup :show="showPickerSelect" position="bottom">
							<van-picker show-toolbar value-key="h_name" :columns="array" @confirm="bindPickerChange"
								@cancel="showPickerSelect = false" />
						</van-popup>
					</view>
				</van-cell-group>

			</view>
			<view class="" v-if="arrayIndex != null">
				<van-cell-group>
					<van-cell title="分类二" is-link @click="showPickerSelect2 = true" />
					<view class="">
						<text class="SelectData" @click="showPickerSelect2 = true">{{select2}}</text>
						<van-popup :show="showPickerSelect2" position="bottom">
							<van-picker show-toolbar value-key="h_name" :columns="array2" @confirm="bindPickerChange2"
								@cancel="showPickerSelect2 = false" />
						</van-popup>
					</view>
				</van-cell-group>
			</view>
			<view class="">
				<van-cell-group>
					<van-cell title="新旧程度" is-link @click="showPickerSelects = true" />
					<view class="">
						<text class="SelectData" @click="showPickerSelects = true">{{degree}}</text>
						<van-popup :show="showPickerSelects" position="bottom">
							<van-picker show-toolbar value-key="h_name" :columns="degreeArray"
								@confirm="bindPickerDegree" @cancel="showPickerSelects = false" />
						</van-popup>
					</view>
				</van-cell-group>
			</view>
		</view>
		<view class="BtnBackup">
			<view class="BtnBack" @click="publish">
				<text class="BtnBackText">发布</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		onLoad() {
			this.getlocation()
		},
		data() {
			return {
				SelectAddress: '位置选择',
				address: '',
				latitude: '',
				longitude: '',
				fileList: [],
				urlImg: [],
				inputVlaue: '',
				degree: '', //新旧程度
				areaValue: '',
				peiceValue: '',
				showPickerSelects: false, //新旧程度
				degreeArray: [],
				degreeArrayIndex: null,
				degreeId: [],
				showPickerSelect: false, //分类
				showPickerSelect2: false, //分类二
				username: "",
				array: [],
				arrayId: [],
				arrayIndex: null,
				select: '请选择分类',
				array2: [],
				arrayId2: [],
				arrayIndex2: null,
				select2: '请选择分类',
				btn: true,
				tempFilePaths: [] //多张上传
			}
		},
		onShow() {
			
		},
		created() {
			if (uni.getStorageSync('token')) {

			} else {
				uni.navigateTo({
					url: '/pages/index/login'
				})
			}
			this.classifyList()
			this.newOld()
		},
		methods: {
			bindInput(e) {
				this.inputVlaue = e.detail.value
			},
			textareaInout(e) {
				this.areaValue = e.detail.value
			},
			priceInput(e) {
				this.peiceValue = e.detail.value
			},
			uploadImg() {
				let that = this
				that.tempFilePaths = []
				uni.chooseImage({
					count: 6,
					success: (chooseImageRes) => {
						let list = chooseImageRes.tempFilePaths
						list.forEach((item, index) => {
							that.tempFilePaths.push(item);
						})
						let lists = that.tempFilePaths
						lists.forEach(ele => {
							const uploadTask = uni.uploadFile({
								url: 'https://ketao.shequtaoapp.com/api/common/upload',
								filePath: ele,
								fileType: 'image',
								name: 'file',
								formData: {
									'user': 'test'
								},
								header: {
									'token': uni.getStorageSync('token') || ''
								},
								success: (uploadFileRes) => {
									let uploadList = JSON.parse(uploadFileRes.data).data
									that.fileList.push(uploadList.url)
									that.urlImg.push(uploadList.save_path)
								}
							});
						})

					}
				});
			},
			//删除图片
			deleteImg(idx) {
				this.fileList.splice(idx, 1);
				this.urlImg.splice(idx, 1);
				this.tempFilePaths.splice(idx, 1);
			},
			//新旧程度
			newOld() {
				request.get('/api/push/Mo', {}).then(res => {
					let nameList = [];
					let idList = [];
					let list = res.data.info.reverse();
					list.forEach((item, index) => {
						nameList.push(item.name);
						idList.push(item.id)
					})
					this.degreeArray = nameList;
					this.degreeId = idList;
				}).catch(err => {

				})
			},
			//分类
			classifyList() {
				request.get('/api/index/fen', {}).then(res => {
						let nameList = [];
						let idList = [];
						let list = res.data.info;
						list.forEach((item, index) => {
							nameList.push(item.name);
							idList.push(item.id)
						})
						this.array = nameList;
						this.arrayId = idList;
					})
					.catch(err => {

					})
			},
			bindPickerChange(e) {
				this.select = e.target.value
				this.arrayIndex = e.target.index
				this.$forceUpdate()
				this.showPickerSelect = false
				this.classifyList2()
			},
			//二级分类
			classifyList2() {
				request.get('/api/push/fenLei', {
						id: this.arrayId[this.arrayIndex]
					}).then(res => {
						let nameList = [];
						let idList = [];
						let list = res.data.info;
						list.forEach((item, index) => {
							nameList.push(item.name);
							idList.push(item.id)
						})
						this.array2 = nameList;
						this.arrayId2 = idList;
					})
					.catch(err => {

					})
			},
			bindPickerChange2(e) {
				this.select2 = e.target.value
				this.arrayIndex2 = e.target.index
				this.showPickerSelect2 = false
			},
			//新旧程度
			bindPickerDegree(e) {
				this.degree = e.target.value
				this.degreeArrayIndex = e.target.index
				this.showPickerSelects = false
			},
			onFenl() {
				this.showPickerSelect = true
			},
			//跳转地图
			goMap() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.SelectAddress = res.name
						that.address = res.name
						that.latitude = res.latitude
						that.longitude = res.longitude
					},
				});
			},
			getlocation(){
					let that = this
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success(r) {
							// uni.setStorageSync('nowLat', r.latitude)
							// uni.setStorageSync('nowLot', r.longitude)
							that.latitude=r.latitude
							that.longitude=r.longitude
							uni.request({
								url: 'https://apis.map.qq.com/ws/geocoder/v1',
								data: {
									key: 'Y4PBZ-MBQ3Q-XSV5A-GWLXE-HXV4E-JNB3P',
									location: (r.latitude + "," + r.longitude)
								},
								success: res => {
									that.SelectAddress=res.data.result.formatted_addresses.recommend
								}
							})
						},
						fail(err) {}
					})
			},
			//发布需求
			publish() {
				if (this.btn) {
					if (this.inputVlaue == '') {
						uni.showToast({
							title: '请输入商品名称',
							icon: 'none'
						})
					} else if (this.areaValue == '') {
						uni.showToast({
							title: '请输入商品描述',
							icon: 'none'
						})
					} else if (this.latitude == '') {
						uni.showToast({
							title: '请选择地址',
							icon: 'none'
						})
					} else if (this.peiceValue == '') {
						uni.showToast({
							title: '请选择商品价格',
							icon: 'none'
						})
					} else if (this.arrayIndex == null) {
						uni.showToast({
							title: '请选择一级分类',
							icon: 'none'
						})
					} else if (this.arrayIndex2 == null) {
						uni.showToast({
							title: '请选择二级分类',
							icon: 'none'
						})
					} else if (this.degree == '') {
						uni.showToast({
							title: '请选择新旧程度',
							icon: 'none'
						})
					} else {
						this.btn = false
						request.get('/api/push/xuQiu', {
							lat: this.latitude,
							lng: this.longitude,
							address: this.SelectAddress,
							need_name: this.inputVlaue,
							images: this.urlImg.toString(),
							content: this.areaValue,
							price: this.peiceValue,
							sort_id: this.arrayId[this.arrayIndex],
							sort2_id: this.arrayId2[this.arrayIndex2],
							damage_id: this.degreeId[this.degreeArrayIndex] || ''
						}).then(res => {
							if (res.code == 1) {
								this.btn = false
								uni.showToast({
									title: '发布成功',
									duration: 2000,
									icon: 'success'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/index/index'
									})
								}, 1500)
							} else {
								uni.showToast({
									title: res.msg
								})
							}
						}).catch(err => {})
					}


				}

			}
		}
	}
</script>

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