<template>
	<view class="app-container">
		<view style="display: flex;flex-direction: column;background-color: #fff;padding-bottom: 50px;">

			<view class="item">
				<text class="item_text">合同编号：</text>
				<input v-model="formobj.contractNumber" placeholder="" class="item_input" clearable />
			</view>
			<view class="item">
				<text class="item_text" style="margin-left: -9px;">供货商名称：</text>
				<uni-data-select style="flex-grow: 1;" v-model="formobj.supplierName" :localdata="supplierList"
					@change="supplierChange"></uni-data-select>
			</view>
			<view class="item">
				<text class="item_text" style="margin-left: -9px;">合同日期：</text>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="formobj.contractSigningDate"
					@change="contractSigningDateChange" />
			</view>
			<view class="item">
				<text class="item_text">发货车牌号：</text>
				<input v-model="formobj.licensePlateNumber" placeholder="" class="item_input" clearable />
			</view>
			<view class="item">
				<text class="item_text" style="margin-left: -9px;">入库日期：</text>
				<uni-datetime-picker type="date" :clear-icon="false" v-model="formobj.warehousingDate"
					@change="warehousingDateChange" />
			</view>
			<view class="item">
				<text class="item_text" style="margin-left: -9px;">原油名称：</text>
				<uni-data-select style="flex-grow: 1;" v-model="formobj.crudeName" :localdata="crudeList"
					@change="crudeChange"></uni-data-select>
			</view>
			<view class="item">
				<text class="item_text">原油编号：</text>
				<input v-model="formobj.crudeNumber" placeholder="" :disabled="true" class="item_input" clearable />
			</view>
			<view class="item">
				<text class="item_text" style="margin-left: -9px;">油罐编号：</text>
				<uni-data-select style="flex-grow: 1;" v-model="formobj.tankName" :localdata="tankList"
					@change="tankChange"></uni-data-select>
			</view>
			<view class="item">
				<text class="item_text">收料净重：</text>
				<input v-model="formobj.weight" placeholder="" type="number" @input="input1" class="item_input"
					clearable />
			</view>
			<view class="item">
				<text class="item_text">收料价值：</text>
				<input v-model="formobj.value" placeholder=""type="number" @input="input2" class="item_input"
					clearable />
			</view>
			<view class="item">
				<text class="item_text">备注：</text>
				<input v-model="formobj.remarks" placeholder="" class="item_input" clearable />
			</view>
			<view class="item">
				<text class="item_text" style="margin-right:21px;">登记材料：</text>
				<view style="flex: 1;">
					<text class="text_upload" @click="uploadImage">上传</text>
				</view>
			</view>
			<scroll-view style="width: 100%;white-space: nowrap; overflow: hidden;" scroll-x="true">
				<view style="margin-top: 15px;display: inline-block;flex-direction: row; justify-content: center;">
					<view v-for="(item,index) in formobj.crudeOilStorageFile" :key="index"
						style="display: inline-block;">
						<view
							style="margin-left: 20rpx;margin-right: 20rpx;display: flex;flex-direction: row; justify-content: center;">
							<image :src="item" style="width: 180rpx;height: 160rpx;z-index: 1;" mode="aspectFill"
								@click="showImage(index)">
							</image>
							<image src="../../static/icon_delete.png"
								style="margin-left: -33rpx;margin-top: 5rpx;width: 30rpx;height: 30rpx;z-index: 2;"
								@click="deleteItem(item)">
							</image>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				uploadAction: config.baseUrl + "/file/upload",
				supplierLists: [],
				supplierList: [],
				crudeLists: [],
				crudeList: [],
				tankLists: [],
				tankList: [],
				imgList: [],
				formobj: {
					sid: "",
					contractNumber: "",
					contractSigningDate: "",
					warehousingDate: "",
					crudeSid: "",
					crudeName: "",
					crudeNumber: "",
					tankName: "",
					tankSid: "",
					weight: "",
					value: "",
					supplierSid: "",
					supplierName: "",
					licensePlateNumber: "",
					remarks: "",
					crudeOilStorageFile: [
						// 'https://tse4-mm.cn.bing.net/th/id/OIP-C.n609VUNve7V_xgkSttfjSQHaEo?w=275&h=180&c=7&r=0&o=5&pid=1.7',
						// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.5IdmyJvdYpAv2SzbaR1y8QHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
						// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.UCTs_1Ee45pr2ZGH6PlKxgHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
						// 'https://tse1-mm.cn.bing.net/th/id/OIP-C.UCTs_1Ee45pr2ZGH6PlKxgHaEo?w=276&h=180&c=7&r=0&o=5&pid=1.7',
					],

				}
			}
		},

		onLoad() {
			this.initData()
		},
		methods: {
			input1(e) {
				//正则表达试
				e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
				console.log(e)
				//重新赋值给input
				this.$nextTick(() => {
					this.formobj.weight = e.detail.value
				})
			},
			input2(e) {
				//正则表达试
				e.detail.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0];
				console.log(e)
				//重新赋值给input
				this.$nextTick(() => {
					this.formobj.value = e.detail.value
				})
			},
			uploadImage() {
				let that = this
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: (res) => {
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							that.aaa(tempFilePaths[i])
						}
					}
				});
			},
			aaa(path) {

				uni.uploadFile({
					url: this.uploadAction, //服务器地址
					fileType: "image", //ZFB必填,不然报错
					filePath: path, //这个就是我们上面拍照返回或者先中照片返回的数组
					name: 'file',
					success: (uploadFileRes) => {

						let imgData = JSON.parse(uploadFileRes.data)
						console.log(imgData);
						console.log(imgData.data.fullUrl);

						this.formobj.crudeOilStorageFile.push(imgData.data.fullUrl)

					}
				});
			},
			showImage(index) {
				uni.previewImage({
					current: index,
					urls: this.formobj.crudeOilStorageFile
				});
			},
			deleteItem(item) {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除图片吗？',
					success(res) {
						if (res.confirm) {
							_this.formobj.crudeOilStorageFile.splice(_this.formobj.crudeOilStorageFile.indexOf(
								item), 1)
						}
					}
				});

			},
			onNavigationBarButtonTap(e) {
				console.log(e)

				if (e.index === 0) {
					console.log("crudestorageSave>>>", this.formobj);
					this.$api.crudestorageSave(this.formobj).then(res => {
						console.log("crudestorageSave>>>", res);
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
					})

				} else {
					uni.showToast({
						title: "正在完善中。。。",
						icon: "none"
					})
				}


			},
			contractSigningDateChange(e) {
				console.log('----dateChange事件:', e);
				this.formobj.contractSigningDate = e


			},
			warehousingDateChange(e) {
				console.log('----dateChange事件:', e);
				this.formobj.warehousingDate = e

			},
			supplierChange(e) {
				console.log('e>>>>>', e);
				const choose = this.supplierLists.filter((item) => item.sid === e)
				console.log(">>>>>>>>>getType", choose[0])
				this.formobj.supplierSid = choose[0].sid
				this.formobj.supplierName = choose[0].supplierName
				console.log(">>>>>>>>>supplierSid", this.formobj.supplierSid)
				console.log(">>>>>>>>>supplierName", this.formobj.supplierName)
			},
			crudeChange(e) {
				console.log('e>>>>>', e);
				const choose = this.crudeLists.filter((item) => item.sid === e)
				console.log(">>>>>>>>>getType", choose[0])
				this.formobj.crudeSid = choose[0].sid
				this.formobj.crudeName = choose[0].name
				this.formobj.crudeNumber = choose[0].number
				console.log(">>>>>>>>>crudeSid", this.formobj.crudeSid)
				console.log(">>>>>>>>>crudeName", this.formobj.crudeName)
				// 获取油罐类型 数据字典
				this.$api.tankinfoListBySid({
					crudeSid: choose[0].sid,
				}).then(res => {
					console.log("tankinfoList>>>", res);
					// this.resinfo = res
					this.tankLists = res
					this.tankList = []
					for (var i = 0; i < this.tankLists.length; i++) {
						let item = {
							"value": this.tankLists[i].sid,
							"text": this.tankLists[i].number
						}
						this.tankList.push(item)
					}
				})

			},
			tankChange(e) {
				console.log('e>>>>>', e);
				const choose = this.tankLists.filter((item) => item.sid === e)
				console.log(">>>>>>>>>getType", choose[0])
				this.formobj.tankSid = choose[0].sid
				this.formobj.tankName = choose[0].number

				console.log(">>>>>>>>>tankSid", this.formobj.tankSid)
				console.log(">>>>>>>>>tankName", this.formobj.tankName)
				// this.queryParams.type = e
			},
			initData() {
				// 获取供货商 数据字典
				this.$api.supplierList({}).then(res => {
					console.log("supplierList>>>", res);
					// this.resinfo = res
					this.supplierLists = res
					this.supplierList = []
					for (var i = 0; i < this.supplierLists.length; i++) {
						let item = {
							"value": this.supplierLists[i].sid,
							"text": this.supplierLists[i].supplierName
						}
						this.supplierList.push(item)
					}

				})

				// 获取原油类型 数据字典
				this.$api.crudeinfoList({}).then(res => {
					console.log("crudeinfoList>>>", res);
					// this.resinfo = res
					this.crudeLists = res
					this.crudeList = []
					for (var i = 0; i < this.crudeLists.length; i++) {
						let item = {
							"value": this.crudeLists[i].sid,
							"text": this.crudeLists[i].name
						}
						this.crudeList.push(item)
					}

				})

			},

		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #fff;
		padding-top: 10px;
		height: 100% !important;
	}

	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15px;
		margin-right: 10px;

		.item_text {
			flex: 0.6;
			font-size: 18px;
			text-align: right;
		}

		.item_input {
			flex: 1;
			font-size: 16px;
			height: 40px;
			border-radius: 4px;
			border: 1px solid #e5e5e5;
			padding-left: 10px;
			padding-right: 10px;

		}

		.text_upload {
			font-size: 16px;
			height: 40px;
			border-radius: 5px;
			color: #fff;
			padding: 2px 15px;
			background: #018AD2;
		}

		.item_left_input {
			width: 20%;
		}

		.item_left_text {
			height: 30px;
			margin-left: 20px;
			line-height: 30px;
			color: #018AD2;
			padding: 0px 15px;
			border: 1.5px solid #018AD2;
			border-radius: 5px;

		}

		.item_right {
			flex: 1;
			justify-items: center;

			.item_right_list_text {
				font-size: 16px;
			}

			.item_right_list_delect {
				color: #5E94FF;
				margin-left: 20px;
				font-size: 16px;
				text-decoration: underline;
			}
		}

	}
</style>