<template>
	<view class="new_fllow">
		<view class="fllow_form">
			<view>提交人</view>
			<view class="form_input" >
				<view class="">
					{{info.staff && info.staff.name}}
				</view>
			</view>
		</view>
		<view class="fllow_form">
			<view>提交时间</view>
			<view class="form_input">
				<view class="">
					{{info.createtime}}
				</view>
			</view>
		</view>
		<view class="fllow_form">
			<view>关联客户</view>
			<view class="form_input" >
				{{info.customer && info.customer.name}}
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>消费日期</view>
			<picker mode="date" disabled @change="changeTime">
				<view class="form_right">
					<view>{{info.consume_time}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
		</view>
		<view class="fllow_form">
			<view><text>*</text>消费方式</view>
			<view class="form_right">
				<view>{{info.consume_type}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<view class="fllow_form">
			<view><text>*</text>消费金额</view>
			<view class="form_input" >
				<input type="text" disabled v-model="info.money" placeholder-style="font-size:30rpx;color: #999;" placeholder="消费金额" class="">
			</view>
		</view>
		<view class="fllow_area">
			<view class="area_head">备注</view>
			<textarea v-model="info.remark" disabled  placeholder="请输入备注" placeholder-style="color:#999" />
		</view>
		<view class="fllow_form">
			<view>附件</view>
		</view>
		<view class="imglist" v-if="info.files != 0">
			<view class="imgbox" v-for="(item,index) in info.file_text" :key="index">
				<image :src="item" class="selfimg" mode="scaleToFill" @click="previewImg(info.file_text,index)"></image>
			</view>
		</view>
		<!-- 审批流程 -->
		<approval-status :process="payment_approval"></approval-status>
		<view style="height:100rpx;"></view>
		<view class="botbtn" v-if="payment_approval.is_check == 1">
			<view class="btn pass" @click="toPass">通过</view>
			<view class="btn refuse" @click="toRefuse">拒绝</view>
		</view>
		
		<view class="editbox" v-if="info.check_status == 3">
			<view class="editbtn" @click="toEdit">修改费用</view>
		</view>
		
	</view>
</template>

<script>
	import { BASE_URL } from '@/util/api.js'
	import { netSelect, netCostDetail } from '@/api/kehu.js'
	import { netApprovalDetail } from '@/api/index.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	import approvalStatus from '@/components/approvalStatus.vue'
	
	export default {
		components:{
			approvalStatus
		},
		data() {
			return {
				id:'',   //费用id
				customer_id:'',   //客户id
				consume_time:'',   //消费日期
				consume_type:'',   //消费方式
				money:'',   //消费金额
				remark:'',   //备注
				file_ids:'',   //附件id
				BASE_IMG_URL:BASE_IMG_URL,
				info:{},
				payment_approval:{},    //审批 流程
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			//获取消费方式
			// this.getType()
			//获取 费用详情
			this.getDetail()
			//获取  审批 流程
			this.getApprovalList()
		},
		//监听  页面 卸载
		onUnload() {
			uni.removeStorageSync('remindlist')
		},
		methods: {	
			//获取  审批 流程
			getApprovalList() {
				let params = {
					type: 'consume',
					relation_id: this.id
				}
				netApprovalDetail(params).then(res=>{
					this.payment_approval = res.data
				})
			},
			//获取费用 详情
			getDetail() {
				netCostDetail({id:this.id}).then(res=>{
					this.info = res.data
				})
			},
			//预览图片
			previewImg(arr,index) {
				uni.previewImage({
					urls: arr,
					current:index,
					fail:(err)=>{
						console.log(err)
					}
				})
			},
			//通过
			toPass() {
				uni.navigateTo({    //status   1成功   2失败
					url:'/pages/examine/examine?id='+this.id+'&type=consume&status=1'
				})
			},
			//拒绝
			toRefuse() {
				uni.navigateTo({    //status   1成功   2失败
					url:'/pages/examine/examine?id='+this.id+'&type=consume&status=2'
				})
			},
			//修改费用
			toEdit() {
				uni.navigateTo({
					url:'/pages/index/groupCompany/cost/editCost?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss">
.new_fllow {
	font-size: 28rpx;
	.fllow_form {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding: 0 24rpx;
		.form_right {
			display: flex;
			color: #999;
			image {
				width: 40rpx;
				height: 40rpx;
				margin: 28rpx 5rpx 0 0;
			}
		}
		text {
			color: #f00;
			margin-left: 10rpx;
		}
		.form_input {
			input {
				height: 100%;
				// line-height: 100rpx;
				text-align: right;
				margin-right: 10rpx;
				color: #999;
			}
		}
		.fllow_button {
			margin-top: 15rpx;
		}
	}
	.fllow_area {
			background-color: #fff;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;
			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 30rpx;
				text {
					color: #f00;
				}
			}
			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}
	.follow_task {
		height: 80rpx;
		line-height: 80rpx;
	}
}
	.imglist{
		padding:24rpx 34rpx;
		background:#fff;
		border-bottom:1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.imgbox{
			width:140rpx;
			height:140rpx;
			margin-right:30rpx;
			margin-bottom:24rpx;
			border:1rpx solid #EAEAEA;
			.selfimg{
				width:140rpx;
				height:140rpx;
			}
		}
	}
	.botbtn{
		width:750rpx;
		height:100rpx;
		display: flex;
		justify-content: space-around;
		align-items:center;
		border-top:1rpx solid #CCCCCC;
		background:#fff;
		position: fixed;
		left:0;
		bottom:0;
		.btn{
			width:300rpx;
			height:80rpx;
			border-radius: 40rpx;
			font-size:26rpx;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
		}
		.pass{
			background:$uni-text-color;
		}
		.refuse{
			background:#F43F3B;
		}
	}
	.basic_main {
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: 1rpx solid #EAEAEA;
		:first-child {
			color: #999;
		}
	}
	.operation_record {
		background:#fff;
		padding: 40rpx 30rpx;
		.record_item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding-bottom:20rpx;
			border-bottom:1rpx solid #EAEAEA;
			margin-bottom:20rpx;
			&:last-child{
				border-bottom:none;
			}
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.record_info {
				flex: 1;
				margin-left: 25rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				.info_top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom:10rpx;
				}
				.shenhetext{
					font-size:26rpx;
					color:#666;
					line-height: 34rpx;
				}
			}
			.record_line {
				position: absolute;
				top: -102rpx;
				left: -26rpx;
				height: 105rpx;
				border-left: 4rpx dotted #dedede;
			}
		}
	}
	.editbox{
		width:750rpx;
		height:100rpx;
		display: flex;
		justify-content: space-around;
		align-items:center;
		border-top:1rpx solid #CCCCCC;
		background:#fff;
		position: fixed;
		left:0;
		bottom:0;
		.editbtn{
			width:680rpx;
			height:80rpx;
			border-radius: 40rpx;
			background:$uni-text-color;
			font-size:26rpx;
			color:#fff;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>
