<template>
	<view class='page'>
		<view class="top_container" style="padding-right: 30upx;clear: both;overflow: auto;">
			<view class="report_status" style="float: left;">
				<text class="magtext">{{payApply.statusName}}</text>
			</view>
			<view style="float: right;" v-if="num==2 && payApply.approveState=='1'">  <!-- 待审批和 审批中 -->
				<view class="btn"   @click="approval()">审批</view>
			</view>
		</view>
		<view class="detail_name_container">
			<view :class="[current_num==1?'current':'']" @click="changecurrent(1)">付款信息</view>
			<view :class="[current_num==2?'current':'']" @click="changecurrent(2)">物料明细</view>
			<view :class="[current_num==3?'current':'']" @click="changecurrent(3)">审批流程</view>
		</view>
		<view v-if="current_num==1">
			<view class="myContainer myContentBox">
				<view class="top_container">基本信息</view>
				<view class="list_item">
					<view class="list_item_name">客户名称</view>
					<view class="list_item_content content_right">{{payApply.clientName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">销售员</view>
					<view class="list_item_content content_right">{{payApply.salesUserName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">销售部门</view>
					<view class="list_item_content content_right">{{payApply.deptName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">项目信息</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.projectName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">联系人</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.linkName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">联系电话</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.linkPhone||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">收货地址</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.harvestAddress||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">运输方式</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.transportWayName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">物流单号</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.trackingNumber||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">物流公司</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.logisticsCompany||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">运输费用</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.transportCosts||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">通知时间</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.noteTime||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">单据编号</view>
					<!-- <view class="list_item_content content_right">{{payApply.pay_date.substr(0,10)||''}}</view> -->
					<view class="list_item_content content_right">{{payApply.deliveryCode||''}}</view>
				</view>
			</view>
			<view class="myCon myContentBox">
				<view class="top_container">备注</view>
				<view class="resultContent">{{payApply.remarks}}</view>
				<view class="img-wrap" v-for="(items,index) in initFileList" :key='index'>
					<view class="img-box">
						<img :src="config.imgURL+items.filePath" />
					</view>
				</view>
			</view>
		</view>
		<!-- 付款明细 -->
		<view v-else-if="current_num==2">
			<view class="myContainer myContentBox" v-for="(item,index) in detailList" :key='index'>
				<view class="list_item">
					<view class="list_item_name">物料代码</view>
					<view class="list_item_content content_right">{{item.materielSerialNo||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">物料名称</view>
					<view class="list_item_content content_right">{{item.materielName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">规格型号</view>
					<view class="list_item_content content_right">{{item.specification||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">主计量单位</view>
					<view class="list_item_content content_right">{{item.unitUomName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">主单位数量</view>
					<view class="list_item_content content_right">{{item.deliveryCount||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">辅助单位</view>
					<view class="list_item_content content_right">{{item.supportUomName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">换算系数</view>
					<view class="list_item_content content_right">{{item.convCoefficient||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">出库数量</view>
					<view class="list_item_content content_right">{{item.deliveryCountSupport||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">销售单价(元)</view>
					<view class="list_item_content content_right">{{item.sellUnitPrice||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">销售金额(元)</view>
					<view class="list_item_content content_right">{{item.sellAmount||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">批号</view>
					<view class="list_item_content content_right">{{item.batch||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">仓库</view>
					<view class="list_item_content content_right">{{item.facName||''}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_name">仓位</view>
					<view class="list_item_content content_right">{{item.locationName||''}}</view>
				</view>
			</view>
		</view>
		<view v-else-if="current_num==3">
			<view class="myCon myContentBox" v-if="approvalList.length>0">
				<uni-steps :options="approvalList" :active="active" direction="column" />
			</view>
		</view> 
		<view class="goHome" @click='goMain("payInfo")'>
			<img src="../../static/img/gohome.png">
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import {
		config
	} from '../../request/js/config.js'
	export default{
		components: {
			uniSteps
		},
		data(){
			return {
				config:config,
				current_num:1,
				id:'',
				taskId:'',
				instanceId:'',
				payApply:{},
				initFileList:[],
				active: 1,
				approvalList:[],
				num:1,
				detailList:[]
			}
		},
		onLoad(option) {
			  this.id=option.id;
			  this.taskId = option.taskId;
			  this.num =option.num;
			  this.instanceId =option.instanceId;
			if(this.id==undefined){
				uni.reLaunch({
				    url: 'payApply'
				});
				return false;
			}
			   var _this = this;
			   this.$http.request({
			     url: '/apis/deliveryNote/getDetail',
				 method:'POST',
			     data: {
			       id:option.id
			     },
				 header: {
				     'Content-Type': 'application/x-www-form-urlencoded'
				 }
			   }).then(res=>{
				   console.log(res.data)
					if(res.data.code == 0){
						if(res.data.headInfo.approveState==0){
							res.data.headInfo.statusName = "暂存"
						  } else if(res.data.headInfo.approveState==1){
							res.data.headInfo.statusName = "待审批"
						  }else if(res.data.headInfo.approveState==2){
							res.data.headInfo.statusName = "已驳回"
						  }else if(res.data.headInfo.approveState==3){
							res.data.headInfo.statusName = "审批通过"
						  }
						this.payApply=res.data.headInfo;
						this.initFileList = res.data.uploadAttachment;
						this.detailList=res.data.bodyInfo//物料明细
						res.data.progressList.forEach(function(val,index){
									var myjson = {
										title: val.approveName+(val.approveState?val.approveState:'')+(val.reason?('~不通过，原因：'+val.reason):''),
										desc: val.approveTime?('时间：'+val.approveTime):'时间：-'
									}
									if(val.isDealed){
										_this.active = index;
									}
									_this.approvalList.push(myjson);
								})
					}
			   }).catch(err=>{
				  uni.showToast({
				  	title: '获取信息失败',
				  	duration: 	1000,
				  	icon:"none"
				  });
			   });
			
		},
		methods:{
			//点击审批
			approval(){
				uni.navigateTo({
				    url: "approval?id="+this.id + "&taskId=" + this.taskId + "&type=" + 11 + "&instanceId=" + this.instanceId
				});
			},
			changecurrent(num){
				this.current_num=num;
			}
		},
		onBackPress(options) { //取消默认的返回事件.
			uni.navigateTo({
				url: "payApply"
			});
			return true;
		}
	}
</script>

<style scoped>
	
	.btn{
		width: 160upx;
		height:68upx;
		text-align: center;
		line-height: 68upx;
		border-radius: 10upx;
		background-color: #3382FF;
		color: #fff;
		font-size: 28upx;
		float: left;
		margin-right: 30upx;
	}
	
</style>
