<template>
	<view class="content">
		<view>
			<view class="hint-box">全网优质原纸供应商，20分钟极速响应。</view>
			<view class="qn-form-item qn-form-item">
				<view class="label">
					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">纸种</text>
				</view>
				<view class="value">
					<picker :value="form.categoryIndex" @change="categoryChange" :range="categoryNameList">
						<view>
							<text class="uni-input">{{ form.categoryName }}</text>
							<uni-icons type="right" color="#000000" size="16"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="qn-form-item qn-form-item">
				<view class="label">
					<uni-icons custom-prefix="iconfont"  type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">品牌</text>
				</view>
				<view class="value">
					<picker :value="form.brandIndex" @change="brandChange" :range="brandNameList" >
						<view>
							<text class="uni-input">{{ form.brandName }}</text>
							<uni-icons type="right" color="#000000" size="16"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="qn-form-item qn-form-item">
				<view class="label">
					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">纸品名称</text>
				</view>
				<view class="value"><qn-easyinput :maxlength="20" v-model="form.paperName" :inputBorder="false" text="right" placeholder="请输入纸品名称"></qn-easyinput></view>
			</view>
			<view class="qn-form-item qn-form-item">
				<view class="label">
					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">克重(g)</text>
				</view>
				<view class="value">
					<picker :value="form.gramWeightIndex"  @change="gramWeightChange"  :range="weightList">
						<view>
							<text class="uni-input">{{ form.gramWeight }}</text>
							<uni-icons type="right" color="#000000" size="16"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="qn-form-item-gg ">
				<view class="label">
					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">规格(mm)</text>
				</view>
				<view class="value">
					<view class="value">
						<!-- <qn-easyinput :maxlength="20" v-model="form.shortName" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput> -->
						<radio-group>
							<label v-for="(ritem, rindex) in radioGroupList" :key="rindex" @tap="specificationTap(ritem, rindex)">
								<radio :checked="rindex === 0" style="transform:scale(0.7)" />
								<text class="uni-input">{{ ritem.name }}</text>
							</label>
						</radio-group>
					</view>
					<view class="input-row">
						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.width" placeholder="请输入"></uni-easyinput></view>
						<view class="symbol">x</view>
						<view class=""><uni-easyinput :inputBorder="false" class="easyinput" type="number" v-model="form.length" placeholder="请输入"></uni-easyinput></view>
					</view>
				</view>
			</view>
			<view class="qn-form-item qn-form-item">
				<view class="label">
					<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
					<text class="label__text">数量(张)</text>
				</view>
				<view class="value">
					<view class="value"><qn-easyinput :maxlength="20" v-model="form.quantity" :inputBorder="false" text="right" placeholder="请输入数量"></qn-easyinput></view>
				</view>
			</view>
			<view class="qn-form-item qn-form-item">
				<view class="label"><text class="label__text">交货时间</text></view>
				<view class="value">
					<picker :value="paperIndex" :range="deliveryTimeList" @change="deliveryTimeChange">
						<view>
							<text class="uni-input">{{ form.deliveryDay }}</text>
							<uni-icons type="right" color="#000000" size="16"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="qn-form-item qn-form-item" style="border: none;">
				<view class="label">
					<!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> -->
					<text class="label__text">交货区域</text>
				</view>
				<view class="value">
					<!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> -->
					<qn-data-picker
						:readonly="hasSelected"
						text="right"
						:border="false"
						class="qn-picker"
						placeholder="区域"
						popup-title="请选择城市"
						:map="{ text: 'name', value: 'id' }"
						@change="onAreaChange"
						:clear-icon="true"
						:localdata="items"
					>
						<text v-if="form.locDistrictId">
							{{ `${form.deliveryProvinceName || ''}/${form.deliveryCityName || ''}/${form.deliveryDistrictName || ''}/${form.deliveryStreetName || ''}` }}
						</text>
					</qn-data-picker>
				</view>
			</view>
			<uGap></uGap>
			<view class="qn-form-item-remark">
				<view class="label"><text class="label__text">询价备注</text></view>
				<view class="value">
					<qn-easyinput
						class="paper-price-textArea"
						:maxlength="200"
						:styles="{ disableColor: '#F7F8FA' }"
						v-model="form.remark"
						:inputBorder="false"
						type="textarea"
						placeholder="请输入拜访对象"
					></qn-easyinput>
				</view>
			</view>
		</view>

		<qn-footer fixed height="120rpx">
			<view class="button-area">
				<!-- <view class="button button__cancel" @click="back"><text class="text">取消</text></view> -->
				<view class="button button__submit" @click="addUser"><text class="text" style="color: white">提交询价</text></view>
			</view>
		</qn-footer>
	</view>
</template>

<script>
import { back, uploadImage } from '@/utils/hook.js'
import { getArea } from '@/apis/commonApi.js'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import qnDatetimePicker from '@/components/qn-datetime-picker/qn-datetime-picker.vue'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { createEnquiryOrder, getCategoryList } from '@/apis/forComparisonApi.js'
const validateFields = ['categoryName', 'brandName', 'paperName', 'gramWeight', 'width', 'length', 'quantity']
export default {
	components: { qnEasyinput, qnDataPicker, qnDatetimePicker, qnFooter, uGap },
	data() {
		return {
			paperIndex: 0,
			categoryNameList: [],
			brandNameList: [],
			weightList: [],
			deliveryTimeList: ['当天到', '明天到'],
			radioGroupList: [
				{
					name: '正度',
					width: '787',
					length: '1092',
					disabled: true
				},
				{
					name: '特规分切',
					width: '889',
					length: '1194',
					disabled: true
				},
				{
					name: '特规分切',
					width: '',
					length: '',
					disabled: false
				}
			],
			form: {
				deliveryArea: '',
				deliveryCityId: '',
				deliveryCityName: '',
				deliveryDay: '',
				deliveryDayIndex: 0,
				deliveryDistrictId: '',
				deliveryDistrictName: '',
				deliveryId: '',
				deliveryProvinceId: '',
				deliveryProvinceName: '',
				deliveryStreetId: '',
				deliveryStreetName: '',
				detailList: [],
				offerEnterprise: '',
				remark: '',
				brandId: '',
				brandName: '',
				brandIndex: 0,
				categoryId: '',
				categoryName: '',
				categoryIndex: 0,
				gramWeight: '',
				gramWeightIndex: 0,
				length: '1092',
				paperName: '',
				quantity: '',
				remark: '',
				width: '787'
			},
			searchList: [],
			hasSelected: false,
			items: []
		}
	},
	mounted() {
		getArea().then(res => {
			if (res) {
				this.items = res
			}
		})
	},
	onLoad(option) {
		this.form.offerEnterprise = option.id
		this.getCategoryList()
	},
	methods: {
		back,
		// 查询纸种列表
		getCategoryList() {
			const params = {
				paperSupplierId: this.$store.state.supplierId
			}
			getCategoryList(params).then(res => {
				console.log('纸种列表', res)
				if (res) {
					this.categoryNameList = res.categoryNameList
					this.brandNameList = res.brandNameList
					this.weightList = res.weightList
					this.form.categoryName = this.categoryNameList[0]
					this.form.brandName = this.brandNameList[0]
					this.form.gramWeight = this.weightList[0]
				}
			})
		},
		// 选择纸种
		categoryChange(e) {
			// console.log('e.target.value', e.target.value)
			let index = e.target.value
			this.form.categoryIndex = e.target.value
			this.form.categoryName = this.categoryNameList[index]
		},
		// 选择品牌
		brandChange(e) {
			let index = e.target.value
			this.form.brandIndex = e.target.value
			this.form.brandName = this.brandNameList[index]
		},
		// 克重
		gramWeightChange(e) {
			let index = e.target.value
			this.form.gramWeightIndex = e.target.value
			this.form.gramWeight = this.weightList[index]
		},
		// 规格切换
		specificationTap(item, index) {
			this.form.width = item.width
			this.form.length = item.length
		},
		// 交货时间
		deliveryTimeChange(e) {
			this.form.deliveryDayIndex = e.target.value
			// 0 当天 1明天
			if (this.form.deliveryDayIndex == 0) {
				this.form.deliveryDay = this.getDay(0, 3600000)
			} else {
				this.form.deliveryDay = this.getDay(1, 3600000)
			}
		},
		onAreaChange(e) {
			if (e.detail.value && e.detail.value.length > 0) {
				const [province, city, district, street] = e.detail.value
				this.form.deliveryProvinceId = province.value
				this.form.deliveryProvinceName = province.text
				this.form.deliveryCityId = city.value
				this.form.deliveryCityName = city.text
				this.form.deliveryDistrictId = district.value
				this.form.deliveryDistrictName = district.text
				this.form.deliveryStreetId = street.value
				this.form.deliveryStreetName = street.text
				this.form.deliveryArea = province.text + city.text + district.text + street.text
			} else {
				this.form.deliveryProvinceId = null
				this.form.deliveryProvinceName = null
				this.form.deliveryCityId = null
				this.form.deliveryCityName = null
				this.form.deliveryDistrictId = null
				this.form.deliveryDistrictName = null
				this.form.deliveryStreetId = null
				this.form.deliveryStreetName = null
				this.form.deliveryArea = null
			}
		},
		selectedImage(type) {
			uploadImage()
				.then(urls => {
					if (urls) {
						this.form[type] = urls[0]
					}
				})
				.catch(e => {
					uni.showToast({
						title: '上传失败',
						icon: 'fail'
					})
				})
		},
		showImage() {
			uni.previewImage({
				urls: [this.form.businessLicenseImg]
			})
		},
		addUser() {
			for (let i = 0; i < validateFields.length; i++) {
				if (this.form[validateFields[i]] === null || this.form[validateFields[i]] === '') {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					})
					return
				}
			}
			const params = {
				deliveryArea: this.form.deliveryArea,
				deliveryCityId: this.form.deliveryCityId,
				deliveryCityName: this.form.deliveryCityName,
				deliveryDay: this.form.deliveryDay,
				deliveryDistrictId: this.form.deliveryDistrictId,
				deliveryDistrictName: this.form.deliveryDistrictName,
				deliveryId: this.form.deliveryId,
				deliveryProvinceId: this.form.deliveryProvinceId,
				deliveryProvinceName: this.form.deliveryProvinceName,
				deliveryStreetId: this.form.deliveryStreetId,
				deliveryStreetName: this.form.deliveryStreetName,
				detailList: [
					{
						brandId: this.form.brandId,
						brandName: this.form.brandName,
						categoryId: this.form.categoryId,
						categoryName: this.form.categoryName,
						gramWeight: this.form.gramWeight,
						length: this.form.length,
						paperName: this.form.paperName,
						quantity: this.form.quantity,
						remark: this.form.remark,
						width: this.form.width
					}
				],
				offerEnterprise: this.form.offerEnterprise,
				remark: this.form.remark,
				enterpriseId: this.$store.state.companyInfo.id,
				userId: this.$store.state.userInfo.userId
			}
			createEnquiryOrder(params).then(res => {
				if (res) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
					setTimeout(() => {
						back()
					}, 1000)
				}
			})
		},

		/**
		 * @param {Object} day '昨天：', this.getDay(-1, 7200000)  '今天：', this.getDay(0, 3600000) '明天：', this.getDay(1, 3600000)
		 * @param {Object} hours
		 * 获取当前时间的前一天 后一天 一周 或者是当前时间的几个小时
		 */
		getDay(day, hours) {
			var today = new Date()
			var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day + hours
			today.setTime(targetday)
			var tYear = today.getFullYear()
			var tMonth = today.getMonth()
			var tDate = today.getDate()
			var getHours = today.getHours()
			tMonth = this.doHandleMonth(tMonth + 1)
			tDate = this.doHandleMonth(tDate)
			return tYear + '-' + tMonth + '-' + tDate + ' ' + '23:59:59'
		},
		doHandleMonth(month) {
			var m = month
			if (month.toString().length === 1) {
				m = '0' + month
			}
			return m
		}
	}
}
</script>

<style lang="scss">
.content {
	width: 750rpx;
	display: flex;
	flex-direction: column;
	background-color: #f7f8fa;
}
.hint-box {
	padding: 0rpx 32rpx;
	height: 76rpx;
	line-height: 76rpx;
	background: #e5f1ff;
	font-size: 30rpx;
	color: #007aff;
	letter-spacing: 0;
	font-weight: 400;
}
.uni-input {
	font-size: 28rpx;
	color: #333333;
	letter-spacing: 0;
	text-align: right;
	font-weight: 400;
	padding-right: 16rpx;
}
.qn-form-item-remark {
	width: 750rpx;
	padding: 28rpx 32rpx 10rpx 32rpx;
	background-color: #fff;
	.label {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-right: 20rpx;

		.label__text {
			font-size: 28rpx;
			color: #000000;
		}
	}
	.value {
		padding: 16rpx 0rpx;
	}
	.paper-price-textArea {
		background: #f7f8fa;
		border-radius: 20rpx;
		padding: 10rpx;
		height: 155rpx;
	}
}
.qn-form-item-gg {
	width: 750rpx;
	padding: 24rpx 32rpx;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 2rpx solid #d8d8d8;
	.label {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-right: 20rpx;
		.label__text {
			font-size: 28rpx;
			color: #000000;
		}
	}
	.value {
		flex-grow: 1;
		flex-shrink: 1;
		text-align: right;
	}
	.input-row {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding-top: 20rpx;
		.easyinput {
			height: 64rpx;
			width: 160rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
		}
		.symbol {
			padding: 0rpx 16rpx;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.85);
			font-weight: 400;
		}
	}
}
.qn-form-item {
	width: 750rpx;
	padding: 0rpx 32rpx;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid #d8d8d8;
	min-height: 80rpx;
	.label {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-right: 20rpx;
		.label__text {
			font-size: 28rpx;
			color: #000000;
		}
	}
	.value {
		flex-grow: 1;
		flex-shrink: 1;
		text-align: right;
	}
}
.qn-form-item__title {
	background-color: #f7f8fa;
	padding: 20rpx 32rpx;
	border: none;
	.title {
		font-size: 30rpx;
		color: #888888;
	}
}
.popup_modal {
	width: 750rpx;
	height: 600rpx;
	background-color: #fff;
	border-radius: 10px 10px 0 0;
	.popup_modal-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 88rpx;
		font-weight: 600;
		border-bottom: 2rpx solid #d8d8d8;
	}
	.popup_modal-scroll {
		width: 750rpx;
		height: 600rpx;
		.popup_modal-scroll-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			width: 750rpx;
			height: 88rpx;
			padding: 0rpx 32rpx;
			border-bottom: 2rpx solid #d8d8d8;
		}
	}
}
.upload-area {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 10rpx;
	margin-bottom: 24rpx;
	.idCard {
		width: 324rpx;
		height: 280rpx;
		flex-grow: 0;
		flex-shrink: 0;
	}
}
.button-area {
	width: 750rpx;
	padding: 0 32rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	// justify-content: space-between;
	.button {
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		.text {
			font-size: 30rpx;
			font-weight: 500;
			text-align: center;
		}
	}
	.button__cancel {
		width: 270rpx;
		height: 88rpx;
		border: 2rpx solid #979797;
	}
	.button__submit {
		// width: 400rpx;
		width: 100%;
		height: 88rpx;
		background: #007aff;
	}
}
</style>
