<template>
	<view class="container">
		<view class="detail-desc">
			<view class="d-header">
				<text>交易信息</text>
			</view>
			 <view class="c-list">
				<view class="c-row b-b">
					<text class="tit">卖方</text>
					<view class="con-list">
						<text>{{tradeInfo.seller}}</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">买方</text>
					<view class="con-list">
						<text>{{tradeInfo.buyer}}</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">交易数量</text>
					<view class="con-list">
						<text>{{numFilter(tradeInfo.count)}}</text>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">库点</text>
					<view class="con-list">
						<text>{{tradeInfo.title}}</text>
					</view>
				</view>
			</view>
			<view class="d-header">
				<text>审核项目</text>
			</view>
			<view class="c-list">
				<view class="c-row b-b">
					<text class="tit">发票类型</text>
					<view class="con-list">
						<input placeholder="请填写发票类型" name="input" v-model="tradeInfo.invoiceType" @input="invoiceTypeInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">包装方式</text>
					<view class="con-list">
						<input placeholder="请填写包装方式" name="input" v-model="tradeInfo.packing" @input="packingInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">点价(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写点价" name="input" v-model="tradeInfo.unitPrice" @input="unitPriceInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">基差(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写基差" name="input" v-model="tradeInfo.basis" @input="basisInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">发票费用(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写发票费用" name="input" v-model="tradeInfo.invoiceMoney" @input="invoiceMoneyInput"></input>
					</view>
				</view>
				<view v-if="tradeInfo.type == 1" class="c-row b-b">
					<text class="tit">卸车费(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写卸车费" name="input" v-model="tradeInfo.unloadingFee" @input="unloadingFeeInput"></input>
					</view>
				</view>
				<view v-else class="c-row b-b">
					<text class="tit">包装费用(元/吨)</text>
					<view class="con-list">
						<input placeholder="请填写包装费用" name="input" v-model="tradeInfo.packingMoney" @input="packingMoneyInput"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">合同编号</text>
					<view class="con-list">
						<input placeholder="请填写合同编号" name="input" v-model="tradeInfo.tradeContractNo" @input="tradeContractNoInput"></input>
					</view>
				</view>
			</view>
		<view v-if="taskStatus == 1" class="page-bottom">
			<view class="action-btn-group">
				<button type="primary"  class=" action-btn no-border add-cart-btn" @click="finish">完成</button>
			</view>
		</view> 
	</view>
	</view>
</template>

<script>
  import {  
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				tradeInfo:[],
				taskStatus:0
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
		},
		onShow() {
		},
		onLoad(options) {
			const that = this
			this.taskId = options.taskId
			this.taskStatus = options.taskStatus
			uni.showLoading({
				title: '正在加载',
				mask:true
			})
			that.$api.request('trade', 'getTradeDetailTask', {
				taskId: options.taskId
			}, failres => {
				that.$api.msg(failres.errmsg)
				uni.hideLoading()
			}).then(res => {
				that.tradeInfo = res.data
				uni.hideLoading()
			})
		},
		onReady(){
			
		},
		methods: {
			invoiceTypeInput(e){
				this.tradeInfo.invoiceType = e.detail.value
			},
			packingInput(e){
				this.tradeInfo.packing = e.detail.value
			},
			unitPriceInput(e){
				this.tradeInfo.unitPrice = e.detail.value
			},
			basisInput(e){
				this.tradeInfo.basis = e.detail.value
			},
			invoiceMoneyInput(e){
				this.tradeInfo.invoiceMoney = e.detail.value
			},
			packingMoneyInput(e){
				this.tradeInfo.packingMoney = e.detail.value
			},
			tradeContractNoInput(e){
				this.tradeInfo.tradeContractNo = e.detail.value
			},
			unloadingFeeInput(e){
				this.tradeInfo.unloadingFee = e.detail.value
			},
			finish(){
				const that = this
				if(!that.tradeInfo.tradeContractNo){
					this.$api.msg('请填写合同编号');
					return;
				}
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('trade', 'finishTradeTask', {
					taskId: that.taskId,
					tradeDO:JSON.stringify(that.tradeInfo)
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {			
					uni.hideLoading()
					that.$api.msg('完成成功')
					setTimeout(()=>{uni.navigateBack({})},1000);
				})
			},
			priceInput(e){
				this.price = e.detail.value
			},
			otherPriceInput(e){
				this.otherPrice = e.detail.value
			},
			insuranceFeeInput(e){
				this.insuranceFee = e.detail.value
			},
			netWeightInput(e){
				this.netWeight = e.detail.value
			},
			carNoInput(e){
				this.carNo = e.detail.value
			},
			rentboxFeeInput(e){
				this.rentboxFee = e.detail.value
			},
			loadingFeeInput(e){
				this.loadingFee = e.detail.value
			},
			boxNoInput(e){
				this.boxNo = e.detail.value
			},
			numFilter (value) {
				if(!value){
					return 0
				}
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			},
			carInput(item,e){
				if(item.count>item.tranCount){
					uni.showToast({
						title: `当前车辆可载吨数为${item.tranCount},请不要超过`,
						icon:'none',
						duration: 2000
					})
					item.count = 0
				}else{
					item.count = e.detail.value
				}
				
			},
			selectInPerson(item){
				if(JSON.stringify(this.carlist).indexOf(JSON.stringify(item.id))==-1){
				    this.carlist.push(item)
				}else{
					for(var i=0;i<this.carlist.length;i++){
						if(this.carlist[i].id==item.id){
							this.carlist[i].count=item.count
						}
					}
				}
				this.modalName = null
			},
			ChooseSignImage() {
				this.handwriting = new Handwriting({
				  lineColor: this.lineColor,
				  slideValue: this.slideValue, // 0, 25, 50, 75, 100
				  canvasName: 'handWriting',
				})
				this.showAutograph = true
			},
			uploadScaleStart(event){
			  this.handwriting.uploadScaleStart(event)
		    },
		    uploadScaleMove(event){
			  this.handwriting.uploadScaleMove(event)
		    },
		    uploadScaleEnd(event){
			  this.handwriting.uploadScaleEnd(event)
		    },
			retDraw() {
				this.handwriting.retDraw()
			},
			hideModal(e) {
				this.modalName = null
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			selectPerson(){
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('tran', 'getCarList', {
					tranNo:that.carInfo.tranNo,
					taskId:that.taskId
				}, failres => {
				 	that.$api.msg(failres.errmsg)
				 	uni.hideLoading()
				 }).then(res => {
					for(var i=0;i<res.data.length;i++){
						console.log(res.data[i].tranCount)
						res.data[i].count = res.data[i].tranCount
				    }
					that.userList = res.data
					if(that.userList.length == 0){
						that.$api.msg('暂无汽车号')
					}
					else{
						var height = that.userList.length * 100
						var width = 500
						that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
						that.modalName = 'inModal'
					}
					
					uni.hideLoading()
				})
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if(e.currentTarget.dataset.index == 0){
								this.trainImg = "";
							}
							else if(e.currentTarget.dataset.index == 1){
								this.otherImg = "";
							}
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'trainImg/',
							result => {
								this.trainImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			ChooseImageOther() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'otherImg/',
							result => {
								this.otherImg = result
								uni.hideLoading();
							}
						)
					}
				});
			},
			
			goodsValueInput(e){
				this.goodsValue = e.detail.value
			},
			numInput(e){
				this.addNum = e.detail.value
			},
			wechatNoInput(e) {
				this.wechatNo = e.detail.value
			},
			gaipai(){
				console.log(1111)
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				that.$api.request('user', 'getUserList', {
					role:'外勤'
				}, failres => {
				 	that.$api.msg(failres.errmsg)
				 	uni.hideLoading()
				 }).then(res => {
					that.userList = res.data
					if(that.userList.length == 0){
						that.$api.msg('暂无外勤信息')
					}
					else{
						var height = that.userList.length * 100
						var width = 500
						that.userStyle = "height:"+height+"rpx;width:" + width+"rpx"
						that.modalName = 'userModal'
					}
					
					uni.hideLoading()
				})
			},
			mygaipai(id){
				this.nextUserId=id
				var that = this
				that.$api.request('tran', 'gaipai',{
					taskId: that.taskId,
					outPersonId:id,
					taskType:that.taskType
				},failres => {
					that.$api.msg(failres.errmsg)
					that.modalName = null
					uni.hideLoading()
				}).then(res => {		
					that.modalName = null
					uni.navigateBack({
						delta: 2
					})
					uni.hideLoading()
				})
			},
		},
	}
</script>

<style lang='scss' scoped="true">
	.container{
		padding-bottom: 160upx;
	}
	.carwrap{
		font-size:20rpx;
	}
	.detail-desc {
		background: #fff;
		margin-top: 16upx;
		width: 750upx;
	
		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
	
			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
	
			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}
	.carwrap{
		display: flex;
		justify-content: space-between;
		padding: 10px 40px;
		border-bottom:1px solid #f0f0f0;
	}
	.trancount{
		display: inline-block;
		vertical-align: middle;
		text-align: right;
		width: 100rpx;
	}
	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
	
		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}
	
		.tit {
			width: 220upx;
		}
	
		.con {
			flex: 1;
			color: $font-color-dark;
	
			.selected-text {
				margin-right: 10upx;
			}
		}
	
		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
	
			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}
	
		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
			text-align: right;
			padding-right: 20upx;
		}
	
		.red {
			color: $uni-color-primary;
		}
	}
	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		border-radius: 16upx;
	
		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
	
			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
	
			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}
	
			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}
	
			.icon-shoucang {
				font-size: 46upx;
			}
		}
	}
	@mixin playcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.xsh-start {
		width: 105rpx;
		height: 105rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-size: 29rpx;
		color: #4135EB;
		@include playcenter;
		flex-wrap: wrap;
	}
	.x-modal {
		width: 100%;
		.x-m-title {
			width: 100%;
			height: 90rpx;
			padding: 0 38rpx 0 31rpx;
			box-sizing: border-box;
			font-size: 29rpx;
			color: #333333;
			border-bottom: 1px dashed #999;
			@include playcenter;
			justify-content: space-between;
			.xm-t-clear {
				font-size: 25rpx;
				color: #341DB7;
				@include playcenter;
				>image {
					width: 28rpx;
					height: 28rpx;
					display: block;
					margin-right: 8rpx;
				}
			}
		}
		.x-m-con {
			width: 100%;
			padding: 0 31rpx 18rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
		}
	}
	.wrapper {
	  width: 100%;
	  height: 100%;
	  margin: 30upx 0;
	  overflow: hidden;
	  display: flex;
	  align-content: center;
	  flex-direction: column;
	  justify-content: center;
	  font-size: 28upx;
	}
	
	.handWriting {
	  background: #fff;
	  width: 100%;
	  height: 350upx;
	}
	
	.handRight {
	  align-items: center;
	}
	
	.handCenter {
	  border: 4upx dashed #e9e9e9;
	  flex: 5;
	  overflow: hidden;
	  box-sizing: border-box;
	  width: 90%;
	  margin: 0 auto;
	}
	.handTitle {
	  flex: 1;
	  color: #666;
	  justify-content: center;
	  font-size: 30upx;
	}
	.handBtn {
	  flex-direction: column;
	  padding: 40upx 20upx;
	}
	.buttons{
		width: 100%;
		margin-top: 20upx;
		justify-content: space-between;
	}
	.buttons>button{
		font-size: 30upx;
		height: 80upx;
	}
	.delBtn {
	  background: #23df02;
	  color: #fff;
	}
	.color{
		align-items: center;
	}
	.color>text{
		margin-right: 20upx;
	}
	.subBtn {
	  background: #008ef6;
	  color: #fff;
	  text-align: center;
	  justify-content: center;
	}
	
	.black-select {
	  width: 60upx;
	  height: 60upx;
	}
	.black-select.color_select {
	  width: 90upx;
	  height: 90upx;
	}
	.red-select {
	  width: 60upx;
	  height: 60upx;
	}
	.red-select.color_select {
	  width: 90upx;
	  height: 90upx;
	}
	.slide-wrapper {
	  align-items: center;
	  margin-bottom: 20upx;
	}
	.slider{
		width: 400upx;
		padding-left: 20upx;
	}
	.drop {
	  width: 50upx;
	  height: 50upx;
	  border-radius: 50%;
	  background: #FFF;
	  position: absolute;
	  left: 0upx;
	  top: -10upx;
	  box-shadow: 0px 1px 5px #888888;
	}
	
	.slide {
	  width: 250upx;
	  height: 30upx;
	}
	.showimg{
		border: 4upx solid #e9e9e9;
		overflow: hidden;
		width: 90%;
		margin: 0 auto;
		background: #eee;
		height: 350upx;
		margin-top: 40upx;
		align-items: center;
		justify-content: center;
	}
	.showimg>image{
		width: 100%;
		height: 100%;	
	}
	.showimg>text{
		font-size: 40upx;
		color: #888;
	}	
	.indexFixed{
		position: fixed;
		left:0;
		bottom:0;
		right:0;
	}
</style>