<template>
	<view class="page">
		<!-- 信息 -->
		<view class="cu-list menu-avatar">

			<view class="cu-item user-box" >
				<view class="cu-avatar radius lg"
				:style="'background-image:url(' + item.user_avatar + ');'">
				</view>
				<view class="content">
					<label>{{item.user_nickname}}</label>
					<label style="padding:0 30rpx;">{{item.user_level_name}}</label>
				</view>
			</view>

		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('货品名称')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_order_title}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('货品图片')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<view class="m-upImg">
				<view class="m-upImg-item"  v-for="(imglist, ii) in imageLists"   :key="ii">
					<image lazy-load mode="aspectFit"  :src="(imglist)" :data-src="(imglist)"  @click="ImgTap"></image>
				</view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('采购品种')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_category_name}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('采购数量')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_order_quantity}}
			</text>
			<text v-if="item.purchase_order_unit">
				/{{ productUnit[item.purchase_order_unit] }}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('期望单价上限')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_origin_price_max}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('是否开票')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_invoice_enable ? '是' : '否'}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('期望货源地')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_province}}/{{item.purchase_city}}/{{item.purchase_county}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('规格品质')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_product_spec}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('更新时间')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_order_time}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('期望收货日期')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_origin_receive_time}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('收货地址')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text v-if="(item.purchase_address)">
				{{item.purchase_address.district_info}}
				<text v-if="(item.buyer_user_id == userInfo.user_id) ||
				 (item.buyer_user_id != userInfo.user_id && item.purchase_order_state == StateCode.TASK_STATE_FINISH)">
					{{item.purchase_address.ud_address}}
				</text>
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('截止时间')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_deadline}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-black text-bold ">{{__('商品描述')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_order_description}}
			</text>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top-sm" v-if="(item.purchase_order_state == StateCode.TASK_STATE_FINISH)">
			<view class="action">
				<text class="cuIcon-title text-red"></text>
				<text class="text-black text-bold ">{{__('驳回回复')}}</text>
			</view>
		</view>
		<view class="bg-white padding-lg padding-tb-sm ">
			<text>
				{{item.purchase_verify_reason}}
			</text>
		</view>


		<!-- 留白 -->
		<view class="margin-top-footer"></view>
		<view class="footer" v-if="(item.purchase_order_state == StateCode.TASK_STATE_TENDER || item.purchase_order_state == StateCode.TASK_STATE_CANCEL)">
			<view class="de-bottom" v-if="(item.buyer_user_id == userInfo.user_id)">
				<view class="bg-blue submit s-left" :data-order_id="(item.purchase_order_id)" @click="deleteOrder" >{{__('删除')}}</view>
				<navigator class="bg-blue submit s-right"  :url="'/hall/purchase/add?order_id=' + (item.purchase_order_id)">{{__('修改')}}</navigator>
			</view>
			<view class="de-bottom" v-else-if="item.not_allow_offer">
				<view class="bg-blue submit s-left" style="width:100%">{{__('已报价')}}</view>
			</view>
			<view class="de-bottom" v-else>
				<view class="bg-blue submit s-left" style="width:100%" @click="showApplyBox" >{{__('立即报价')}}</view>
			</view>
		</view>
	


		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="uni-banner" style="background:#FFFFFF;">
				<view class="m-cells m-cells-form">
					
					<view class="m-cell">
						<view class="m-cell-hd" style="width: 25%;"><label class="u-label">{{__('订单标题:')}}</label></view>
						<view class="m-cell-bd">
							<input class="u-input"  style="width: 100%;" type="text" v-model="supply_order_title" :placeholder="__('订单标题')"/>
						</view>
					</view>
					<view class="m-cell">
						<view class="m-cell-hd" style="width: 25%;"><label class="u-label">{{__('货品单价:')}}</label></view>
						<view class="m-cell-bd">
							<input class="u-input"  style="width: 100%;" type="number" v-model="product_unit_price" :placeholder="__('货品单价')"/>
						</view>
					</view>
					
					<view class="m-cell">
						<view class="m-cell-hd" style="width: 25%;"><label class="u-label">{{__('供应数量:')}}</label></view>
						<view class="m-cell-bd">
							<input class="u-input"  style="width: 100%;" type="number" v-model="supply_quantity" :placeholder="__('供应数量')"/>
						</view>
					</view>
					
					<view class="m-cell">
						<view class="m-cell-hd" style="width: 25%;"><label class="u-label">{{__('供应商品:')}}</label></view>
						<view class="m-cell-bd">
							 <picker @change="bindPickerChange" :value="index" :range="productLists"  range-key="product_name">
							         {{product_name}}
							 </picker>
						</view>
					</view>
					
					<view class="m-cells m-cells-form">
						<view class="m-upImg">
							<view class="m-upImg-item"  v-for="(imglist, ii) in data_info.comment_image"   :key="ii">
								<image lazy-load mode="aspectFit"  :src="(imglist)" :data-src="(imglist)"  @click="ImgTap"></image>
								<view v-if="true" class="u-del-item"  :data-index="(ii)" @click.stop="delImg"><label class="iconfont icon-delete" :data-index="(ii)"></label></view>
							</view>
							<view v-if="true" class="m-upImg-item upSelect"  @click.stop="upImgs">
								<label  class="iconfont icon-xiangji"></label>
							</view>
						</view>
					</view>


					<view class="m-cell" @click="showCityBox">
						<view class="m-cell-hd" style="width: 25%;margin-right:20rpx;"><label class="u-label">{{__('货品所在地:')}}</label></view>
						<view class="m-cell-bd">
							<label>{{seladstr}}</label>
						</view>
					</view>

					<view class="m-cell">
						<view class="m-cell-hd" style="width: 25%;"><label class="u-label">{{__('报价描述:')}}</label></view>
						<view class="m-cell-bd" style="border: 2rpx solid #F5F5F5;padding:10rpx;">
							<textarea class="textarea u-input" maxlength="500" v-model="supply_order_description" :placeholder="__('报价描述...')" style="height: 300rpx;width: 100%;"></textarea>
						</view>
					</view>
				</view>

				<view style="height:50px;text-align: center;">
			        <view class="button-sp-area">
			            <button class="mini-btn" type="default" size="mini" @tap="onClose">{{__('取消')}}</button>

			            <button class="mini-btn" type="warn" size="mini" style="margin-left: 100rpx;" @tap="doApply">{{__('报名')}}</button>
			        </view>
				</view>
			</view>
		</uni-popup>
		
		<payment-box :paymentDataDefault="paymentData" :order_id="id" ref="paymentBox"  @onCancel="onCancel"  @onPaid="onPaid"  @onFail="onFail"></payment-box>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

		<!-- 地区选择 -->
		<shopCategory
			ref="shopCategory"
			:height="height"
			@confirmCallback="confirmCallback"
		>
		</shopCategory>
		
	</view>
</template>

<script>
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import paymentBox from '../../components/payment-box.vue'

import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				options:{},
				item:{},
				id:'',
				height:'',
				
				product_unit_price: 0,
				supply_quantity: 0,
				supply_province: '',
				supply_order_description: '',
				supply_order_title:'',
				
				
				is_loaded:false,
				
				productLists:[],
				productUnit:[],
				index:0,
				item_id:0,
				product_name: '请选择商品',
				data_info: {comment_image: [] },
				
				imageLists:[],
				
				
				Pindex: 0,
				selectedProId: 0,
				selectedCityId: 0,
				selectedCountyId: 0,
				purchase_order_amount: 0,
				selectedPro: '',
				selectedCity: '',
				selectedCounty: '',
				seladstr: "请选择地域",
				
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#007AFF',
				
				paymentData:{}
				

			
			}
		},
		components: {
			uniPopup,
			paymentBox,
			mpvueCityPicker,
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad(options) {
			this.setData({
			    options: options,
				id:options.order_id
			});

			this.getPurchasedDetail();
			this.getPurchasedIndex();
			
		},
		
		onUnload: function() {
		    //移除通知
		    // 离开页面，注销事件
		 
		},
		
	
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			getPurchasedDetail: function() {
				var that = this;
				var params = {
					purchase_order_id:that.id,
					
				};

				that.$.request({
					url: this.Config.URL.hall.user_purchase_order_get,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							data.purchase_origin_receive_time = that.$.datetimeFormatter(Date.parse(data.purchase_origin_receive_time),'yyyy-MM-dd')
							data.purchase_deadline = that.$.datetimeFormatter(Date.parse(data.purchase_deadline),'yyyy-MM-dd')
							that.setData({
								is_loaded: true,
								item: data,
								imageLists: data.purchase_product_images
							})
						
							
							that.getProductLists(data.category_id)
						}
					}
				});
			},
			getPurchasedIndex: function() {
				var that = this;
				var params = {
					
				};
			
				that.$.request({
					url: this.Config.URL.hall.user_purchase_order_index,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							that.setData({
								productUnit: data.product_unit,
							})
						}
					}
				});
			},
			
			getProductLists: function(category_id) {
				
				if(category_id)
				{
					var that =this;
					var store_id = null;
					
					if (that.userInfo.store_ids.length > 0) {
						var arr = that.userInfo.store_ids.split(",")
						store_id = arr[0]
					}
					
					var params ={
						category_id: category_id,
						store_id: store_id,
						store_type: 1,
					}
					
					that.$.request({
					    url: this.Config.URL.store.product,
					    data: params,
						success: function(data, status, msg, code) {
							if(data.items && data.items.length > 0)
							{
								that.setData({
									productLists: data.items
								})
							}
							// else
							// {
							// 	that.$.confirm("发布同类的货品后才可报价", function (t) {
							// 		that.$.navigateBack(1)
							// 	});
							// }
						}
					})
				}
				
			},
			
			bindPickerChange: function(e) {
				let that = this;
				var r = e.detail.value
				
				that.setData({
					item_id:that.productLists[r].item_id,
					product_name: that.productLists[r].product_name,
				})
			
			},
			
			ImgTap: function(e) {
				var that = this,
					urls = [];
			
				
				for (var i in this.imageLists) {
					urls.push(this.imageLists[i]);
				}
				var s = e.target.dataset.src;
				
			
				that.$.previewImage({ current: s, urls: urls });
			},
			
			upImgs: function(e) {
				
				var that = this;
				var dataInfo = this.data_info;
				if (dataInfo.comment_image && dataInfo.comment_image.length == 3) {
					that.$.alert('最多上传3张图片！');
					return;
				}
			
				//that.$.showLoading();
					that.$.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: function(n) {
							that.$.showLoading();
							var r = n.tempFilePaths;
							that.$.uploadFile({
								url: that.Config.URL.upload,
								method: 'POST',
								filePath: r[0],
								name: 'upfile',
								//header: { 'content-type': 'multipart/form-data' },
								success: function(n) {
									that.$.hideLoading();
									var up_res = that.$.parseJSON(n.data);
			
									var s = up_res.data.url;
									dataInfo.comment_image.push(s);
									console.log(dataInfo)
									that.setData({ data_info: dataInfo});
									
								},
								fail: function(e) {
									that.$.hideLoading();
								},
								complete: function(e) {
									that.$.hideLoading();
								}
							});
						},
						fail: function(e) {
							that.$.hideLoading();
						},
						complete: function(e) {
							that.$.hideLoading();
						}
					});
			},
			
			delImg: function(e) {
				//console.info(e);
				var dataInfo = this.data_info;
				console.log(dataInfo)
				var that = this;
				that.$.confirm(
					'是否放弃上传本张图片?',
					function(n) {
						if (n.confirm) {
							var i = [];
							for (let s = 0; s < dataInfo.comment_image.length; s++) {
								if (s != e.target.dataset.index) {
									var o = dataInfo.comment_image[s];
									i.push(o);
								}
							}
							dataInfo.comment_image = i;
			
							that.setData({ data_info: dataInfo});
						}
					},
					true
				);
			},
			
			
			deleteOrder: function(e) {
				var that = this;
				var id = e.currentTarget.dataset.order_id;
				this.$.confirm("是否删除此采购订单？",function(e) {
					if (e.confirm) {
						var params = {
							purchase_order_id:id,
							
						};
						
						that.$.request({
							url: that.Config.URL.hall.remove_purchase_order,
							data: params,
							method: 'POST',
							success: function(data, status, msg, code) {
								if (status == 200) {
									that.$.alert('删除成功！',function () {
										that.$.navigateBack(1)
									})
								}
							}
						});
					}
				},true);
			
			},
			
			// 三级联动选择
			showCityBox() {
				/*
				this.setData({
				    isShow: true
				})
				*/
				this.$refs.mpvueCityPicker.show()
			},
			
			onConfirm(e) {
				let that = this;
			    console.info(e);
			    //console.info(JSON.stringify(e));
				this.pickerText = JSON.stringify(e)
			
			
			    this.setData({
			        isDistrict:true,
			        Pindex: this.cityCode,
			        selectedProId: e.value[0],
			        selectedCityId: e.value[1],
			        selectedCountyId: e.value[2],
			        selectedPro: e.label[0],
			        selectedCity: e.label[1],
			        selectedCounty: e.label[2],
			        seladstr: that.$.isNull(e.label.toString()) ? that.__("请选择地址") : e.label.toString()
			    });
			},
			
			doApply() {
				let that = this;
				if (!this.userInfo.store_ids.length > 0)
				{
					that.$.confirm("商家才可以报价！");
					return ;
				}
				if (!this.product_unit_price)
				{
					that.$.confirm("请填写报价！");
					return ;
				}
				
			
				if (!this.supply_quantity)
				{
					that.$.confirm("请填写供货数量！");
					return ;
				}
				
				if (!this.item_id)
				{
					that.$.confirm("请选择商品！");
					return ;
				}
				
				if (!this.selectedProId && !this.selectedCityId)
				{
					that.$.confirm("请填写货品所在地！");
					return ;
				}
			
				if (!this.supply_order_description)
				{
					that.$.confirm("请填写报价说明！");
					return ;
				}
			
			
				let params = {
					supply_order_title: that.supply_order_title,
					product_unit_price:this.product_unit_price, 
					supply_quantity:this.supply_quantity, 
					supply_order_description:this.supply_order_description,
					purchase_order_id:that.id,
					supply_province_id:this.selectedProId,
					supply_city_id:this.selectedCityId,
					supply_county_id:this.selectedCountyId,
					supply_province: this.selectedPro,
					supply_city: this.selectedCity,
					supply_county: this.selectedCounty,
					item_id: this.item_id,
					product_name: this.product_name,
					supply_images:that.data_info.comment_image.join(','),
				}
			
				that.$.request({
				    url: that.cf.URL.hall.supply_order_add,
				    data: params,
					method: 'POST',
				    success: function (data, status, msg, code) {
						if (200 == status)
						{
							that.$.alert("提交成功！");
							that.$refs.popup.close();
			
							setTimeout(function() {
								//刷新数据
								that.getOrderDetail();
							}, 2e3)
			
						}
						else
						{
							that.$.confirm(msg)
						}
				    }
				});
			},
			
			showApplyBox() {
				this.$refs.popup.open();
			},
			
			onClose() {
				let that = this;
				that.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "../../styles/colorui/main.css";
	@import "../../styles/colorui/icon.css";
	@import "../../styles/colorui/animation.css";

	.color-font {
	    color: #F7F7F7;
	}

	.color-background {
	    color: #333333;
	    background: #F7F7F7;
	}
	.color-nav{
	    background: #0A98D5;
	    color: #ffffff;
	}

	.user-box{
		min-height: 180rpx;
	}
	.cu-platform{
		width: 50rpx;
		height: 50rpx;
		margin-left: 18rpx;
	}
	.fixed-footer{
		width: 100vw;
		bottom: 0;
		left: 0;
		position: fixed;
	}
	.margin-top-footer{
		height: 120rpx;
	}

	.u-input {
		width: 50%;
		height:90rpx;;
		border: 0;  // 去除未选中状态边框
		outline: none; // 去除选中状态边框
		background-color: rgba(0, 0, 0, 0);// 透明背景
	}
	
	.de-bottom {
		display: flex;
		justify-items: center;
	}
	
	.submit {
		z-index:200;
		width:50%;
		padding:30rpx;
		text-align: center;
		line-height: 40rpx;
	}
	
	.s-left {
		
	}
	
	.s-right {
		background-color: #F37B1D;
	}
	
	.footer {
		width: 100vw;
		bottom: 0;
		left: 0;
		position: fixed;
	}
	
	.m-upImg {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}
	.m-upImg-item {
		width: 120rpx;
		height: 120rpx;
		border: 1px solid #eee;
		display: inline-block;
		margin: 9rpx;
		border-radius: 4rpx;
		vertical-align: middle;
		position: relative;
	}
	.m-upImg-item image {
		width: 100%;
		height: 100%;
	}
	
	
	.upSelect {
		background-color: #eee;
		text-align: center;
		line-height: 120rpx;
	}
	.upSelect label {
		font-size: 40rpx;
	}
	
	.u-del-item {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		z-index: 5;
	}
	.u-del-item label {
		font-size: 28rpx;
	}
</style>
