<template>
	<view class="content">
		<view class="top-tab">
			<u-tabs :list="tabsList" :scrollable="false" lineWidth="25" lineColor="#0A994A" color="#969696"
				:activeStyle="{color: '#15CA65', fontWeight: '400', transform: 'scale(1.05)', size:'20rpx'}"
				lineHeight="4" :current="tabCurrent" @change="tabChange"></u-tabs>
		</view>
		<u--form :model="needsPublishForm" ref="uNeedsForm" :labelStyle="formLabelStyle">
			<view style="margin-bottom: 20rpx;">
				<u-form-item label="姓名" borderBottom>
					<u-input v-model="needsPublishForm.name" :border="false" placeholder="请输入您的名称"
						placeholder-style="color:#CCCCCC" />
				</u-form-item>
				<u-form-item label="城市">
					<view class="select-view" @tap="showCityPicker = true">
						<text v-if="needsPublishForm.area_name">{{needsPublishForm.area_name}}</text>
						<text v-else style="color:#CCCCCC;">请选择所在城市</text>
						<u-icon name="arrow-right" color="#969696" size="14"></u-icon>
					</view>
					<cityPicker :show-picker="showCityPicker" @cancel="showCityPicker = false" @confirm="getCityValue">
					</cityPicker>
				</u-form-item>
			</view>

			<view style="margin-bottom: 20rpx;">
				<view v-if="tabCurrent === 1">
					<u-form-item label="品名" borderBottom>
						<u-input v-model="needsPublishForm.pname" :border="false" placeholder="请输入您的产品名称"
							placeholder-style="color:#CCCCCC" />
					</u-form-item>
					<u-form-item label="分类" borderBottom>
						<view class="select-view" @tap="showCategoryPicker = true">
							<text v-if="needsPublishForm.cate_id">{{needsPublishForm.cate_id}}</text>
							<text v-else style="color:#CCCCCC;">请选择分类</text>
							<u-icon name="arrow-right" color="#969696" size="14"></u-icon>
						</view>
						<u-picker :show="showCategoryPicker" :columns="categoryPickerList"
							@cancel="showCategoryPicker = false" @confirm="getCategoryValue"></u-picker>
					</u-form-item>
				</view>
				<u-form-item label="产品" borderBottom>
					<view class="select-view" @tap="showProductPicker = true">
						<text v-if="needsPublishForm.pname">{{needsPublishForm.pname}}</text>
						<text v-else style="color:#CCCCCC;">请选择产品类型</text>
						<u-icon name="arrow-right" color="#969696" size="14"></u-icon>
					</view>
					<u-picker :show="showProductPicker" :columns="productPickerList" @cancel="showProductPicker = false"
						@confirm="getProductValue"></u-picker>
				</u-form-item>
				<u-form-item label="定位" borderBottom>
					<view class="select-view" @tap="showPositionPicker = true">
						<text v-if="needsPublishForm.position">{{needsPublishForm.position}}</text>
						<text v-else style="color:#CCCCCC;">请选择产品定位</text>
						<u-icon name="arrow-right" color="#969696" size="14"></u-icon>
					</view>
					<u-picker :show=showPositionPicker :columns="positionPickerList"
						@cancel="showPositionPicker = false" @confirm="getPositionValue"></u-picker>
				</u-form-item>
				<view style="padding: 20rpx 15rpx;background-color: #fff;">
					<u-textarea v-model="needsPublishForm.describle" border="surround" placeholder="请输入具体描述(限120字)"
						:maxlength="120" placeholder-style="color:#CCCCCC"></u-textarea>
				</view>
			</view>

			<view v-if="tabCurrent === 1" style="margin-bottom: 20rpx;">
				<u-form-item label="上传图片" labelPosition="top">
					<view style="padding-left: 20rpx;margin-top: 20rpx;">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="10"></u-upload>
					</view>
				</u-form-item>
			</view>

			<view style="background-color: #fff;">
				<u-form-item label="手机" borderBottom>
					<u--input placeholder="请输入手机号" :border="false" v-model="needsPublishForm.mobile"
						placeholder-style="color:#CCCCCC"></u--input>
				</u-form-item>
				<!-- <u-form-item label="验证" borderBottom>
					<view style="display: flex;padding-right: 20rpx;align-items: center;">
						<u--input placeholder="请输入验证码" :border="false" v-model="needsPublishForm.invalidCode"
							placeholder-style="color:#CCCCCC"></u--input>
						<u-code ref="uCode" @change="codeChange" keep-running change-text="倒计时XS"
							@start="disabled = true" @end="disabled = false"></u-code>
						<u-button size="small" type="primary" @tap="getCode" :text="tips" color="#EEEEEE"
							:disabled="disabled" customStyle="color:#666666; width:160rpx;"></u-button>
					</view>
				</u-form-item> -->
				<view style="padding: 30rpx;background-color: #fff;">
					<u-button color="#0EBB5B" text="确定发布" @tap.stop="submitForm"></u-button>
				</view>
				<view style="padding: 20rpx;text-align: center;background-color: #fff;">
					<text
						style="font-size: 24rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #C8C8C8;line-height: 28rpx;">承诺声明预留文字位置承诺声明预留文字位置</text>
				</view>
			</view>
		</u--form>
		<view style="margin:0 20rpx;">
			<u-overlay :show="!isLoad">
				<login @success="reOnLoad()" @fail="failToLoad()"></login>
			</u-overlay>
		</view>

	</view>
</template>

<script>
	import {
		apiService
	} from '../../service/request'
	import login from '../my/login/login.vue'
	export default {
		components: {
			login
		},
		data() {
			return {
				tabsList: [{
					name: '需求发布'
				}, {
					name: '创意发布'
				}],
				tabCurrent: 0,
				needsPublishForm: {
					city: null,
					position: null
				},
				formLabelStyle: {
					'font-size': '32rpx !important'
				},
				showCityPicker: false,
				showProductPicker: false,
				showPositionPicker: false,
				showCategoryPicker: false,
				seconds: 10,
				disabled: false,
				tips: '获取验证码',
				productPickerList: [
					['烘焙', '零食', '饮料']
					// {name: '烘焙', val: 'hongbei'}
					// {name: '零食', val: 'ls'}
					// {name: '饮料', val: 'yl'}
				],
				positionPickerList: [
					['无添加剂', '无添加剂', '无添加剂']
				],
				categoryPickerList: [
					['类别1', '类别', '类别']
				],
				fileList1: [],
				isLoad: true
			}
		},
		onLoad(options) {
			console.log(options)
			if (options.index == 1) {
				this.tabCurrent = 0
			} else if (options.index == 2) {
				this.tabCurrent = 1
			}
			if (!uni.getStorageSync('token') || uni.getStorageSync('token').length === 0) {
				console.log(uni.getStorageSync('token'))
				this.isLoad = false
				// uni.navigateTo({
				// 	url: '../../pages/my/login/login'
				// })
				return
			}
			this.isLoad = true
		},
		methods: {
			tabChange(data) {
				this.tabCurrent = data.index
				this.needsPublishForm = {}
			},
			getCityValue(data) {
				console.log(data)
				this.showCityPicker = false
				this.needsPublishForm.area_name = data[0].join('-')
				this.needsPublishForm.area_code = data[1]
			},
			getProductValue(data) {
				this.showProductPicker = false
				this.needsPublishForm.tagids = data.value[0]
			},
			getPositionValue(data) {
				this.showPositionPicker = false
				this.needsPublishForm.position = data.value[0]
			},
			getCategoryValue(data) {
				this.showCategoryPicker = false
				this.needsPublishForm.cate_id = data.value[0]
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					console.log(lists[i])
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					const data = {
						file: new File
					}
					let a = apiService.postImage(data).then(res => {
						console.log(res)
					})
					// let a = uni.uploadFile({
					// 	url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
					// 	filePath: url,
					// 	name: 'file',
					// 	formData: {
					// 		user: 'test'
					// 	},
					// 	success: (res) => {
					// 		setTimeout(() => {
					// 			resolve(res.data.data)
					// 		}, 1000)
					// 	}
					// });
				})
			},
			//BlobUrl转blob数据
			objectURLToBlob(blodurl) {
				return new Promise((resolve, reject) => {
					var http = new XMLHttpRequest();
					http.open('GET', blodurl, true);
					http.responseType = 'blob';
					http.onload = function(e) {
						if (this.status == 200 || this.status === 0) {
							// console.log('blod数据',this.response);
							// 在将blod数据转为file
							let files = new window.File([this.response], 'file.name', {
								type: 'image'
							});
							// console.log('blod数据转换file',files);
							resolve(files);
						}
					};
					http.send();
				});
			},
			submitForm() {
				if (!/^1[3456789]\d{9}$/.test(this.needsPublishForm.mobile)) {
					this.$toast.warn('请输入正确的手机号')
					return false
				}
			},
			reOnLoad() {
				console.log('----------------true')
				if (!uni.getStorageSync('token') || uni.getStorageSync('token').length === 0) {
					this.$toast.warn('登录失败请重试')
					this.isLoad = false
					// uni.navigateTo({
					// 	url: '../../pages/my/login/login'
					// })
					return
				}
				this.isLoad = true
			},
			failToLoad() {
				console.log('----------------false')
				this.$toast.warn('登录失败请重试')
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #F8F8F8;

		.top-tab {
			background-color: #fff;
			margin-bottom: 10rpx;
		}

		.select-view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 14rpx 18rpx;
			font-size: 30rpx;
		}

		/deep/.u-form-item__body__left__content__label {
			font-size: 32rpx !important;
		}

		/deep/.u-form-item__body {
			padding: 13rpx 0 !important;
		}

		/deep/.u-textarea {
			border-radius: 20rpx;
			border: 1px solid #EEEEEE;
		}
	}
</style>
