<template>
	<view class="pages">

		<view class="top">

			<text class="top-text1">{{info.applicant_name}}提交的印鉴使用申请</text>
			<text class="top-text2">{{info.ent_name}}</text>

		</view>

		<view class="con">

			<view class="con-item">
				<text class="con-item-title">项目名称</text>
				<text class="con-item-data">{{info.project_name}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">申请人</text>
				<text class="con-item-data">{{info.applicant_name}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">使用人</text>
				<text class="con-item-data">{{info.user_name}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">用印事由</text>
				<text class="con-item-data">{{info.use_reason}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">使用日期</text>
				<text class="con-item-data">{{info.use_date}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">用印文件名称</text>
				<text class="con-item-data">{{info.use_file_name}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">加盖何种公章</text>
				<text class="con-item-data">{{seal_type}}</text>
			</view>
			<view class="con-item">
				<text class="con-item-title">用印文件(附件)</text>

				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view style="display: flex;flex-direction: row;">
						<view v-for="(item,index) in info.file_paths" class="newslist" @click="itemClick(item)">


							<image class="newslist-item" :src="item"></image>
						</view>
					</view>
				</scroll-view>


			</view>
			<view class="con-item">
				<text class="con-item-title">备注</text>
				<text class="con-item-data">{{info.remarks}}</text>
			</view>
		</view>

		<ProcessRecords class="Process" :deployId='params.deployId' :procInsId='params.procInsId' :dataList='dataList' :isFinish="isFinish">
		</ProcessRecords>


		<ProcessButtons v-show="showBtn" class="ProcessButtons" :showBreak='showBreak' :showOther="showOther" :linkByParameter="linkByParameter"
		@call-father="fatherMethodHandle">
		 </ProcessButtons>

		<view style="display: flex;flex-direction: column; height: 50px; margin-top: 150px;width: 100%;"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				sid: "",
				type: "",
				showBtn: false,
				showBreak: false,
				showOther: true,
				isFinish:"",
				previousPersonSid:"",
				linkByParameter:{
					businessSid:"",
					instanceId:"",
					taskId:"",
					taskDefKey:"",
					orgsidPath:"",
					comment:"",
					userSid:"",
				},
				params: {
					procInsId: "",
					deployId: ""
				},
				info: {},
				seal_type: "",
				dataList: []
			}
		},
		onLoad(option) {
			this.sid = option.sid
			this.type = option.type
			this.previousPersonSid = option.previousPersonSid
			this.isFinish = option.isFinish
			
	console.log('this.isFinish>>>>>>', option.isFinish)		
			var userSid = getApp().globalData.sid

			if (this.type == '1') {

				this.showBtn = true
				this.showBreak = false

			} else {
				this.showOther = false

				if(this.isFinish){
						this.showBtn = false
				}else{
					if (this.previousPersonSid != userSid) {
						this.showBtn = false
						this.showBreak = false
					
					} else {
						this.showBtn = true
						this.showBreak = true
					}
						
				}
			
			}

			this.getData(this.sid)
			
			this.linkByParameter={
				
				businessSid:option.sid,
				instanceId:option.procInsId,
				taskId: option.taskId,
				taskDefKey:option.taskDefKey,
				orgsidPath:getApp().globalData.orgSidPath,
				comment:"",
				userSid:getApp().globalData.sid,
			}
			

			this.params = {
				procInsId: option.procInsId,
				deployId: option.deployId
			}

			console.log('this.params>>>>>>', this.params)

			this.$api.flowRecordList(this.params).then((resp) => {

				console.log('getData>>>>>>', resp.flowList)

				this.dataList = resp.flowList


			}).catch(e => {
				console.log('eeeee', e)
			})


		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			itemClick(imgUrl) {
				wx.previewImage({
					current: '',
					urls: [imgUrl]

				})
			},
			getData(sid) {
				console.log('sid', sid)
				var _this = this
				this.$api.sealApplyDetail(sid).then((resp) => {
					console.log('1111>>>>>>', resp)

					_this.info = resp

					for (var i = 0; i < _this.info.seal_type.length; i++) {
						var data = _this.info.seal_type[i]
						_this.seal_type += data + ","
					}

					console.log('seal_type>>>>>>', _this.seal_type.substring(0, _this.seal_type.length - 1))

					_this.seal_type = _this.seal_type.substring(0, _this.seal_type.length - 1)

					// _this.info.file_paths = [
					// 	'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
					// 	'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
					// ]



				}).catch(e => {
					console.log('eeeee', e)
				})


			},
			fatherMethodHandle(){
					this.showBtn = false
				this.$api.flowRecordList(this.params).then((resp) => {
				
					console.log('getData>>>>>>', resp.flowList)
				
					this.dataList = resp.flowList
				
				
				}).catch(e => {
					console.log('eeeee', e)
				})
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

		.top {
			margin-top: 10px;
			background: #fff;
			padding: 10px 20px;
			display: flex;
			flex-direction: column;

			.top-text1 {
				font-size: 16px;
				color: #101010;
				font-weight: 600;
				font-family: sans-serif;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.top-text2 {
				margin-top: 5px;
				font-size: 14px;
				color: #666;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		.con {
			margin-top: 10px;
			background: #fff;
			padding: 10px 20px;
			display: flex;
			flex-direction: column;

			.con-item {
				display: flex;
				flex-direction: column;

				.con-item-title {
					margin-top: 10px;
					font-size: 14px;
					color: #A7A7A7;
				}

				.con-item-data {
					margin-top: 5px;
					font-size: 15px;
					color: #191919;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}

				.newslist {
					display: flex;
					flex-direction: row;
					width: 100%;

					.newslist-item {
						display: flex;
						flex-direction: row;
						margin: 10px 15px 0px 0px;
						border: 1px solid #4D72FF;
						width: 80px;
						height: 80px;
					}
				}

			}

		}

		.Process {
			margin-top: 20px;
		}

		.ProcessButtons {
			z-index: 9999;
			position: fixed;
			bottom: 0;
			width: 100%;

		}


	}
</style>