<template>
  <view class="page">
    <u-navbar class="u-navbar" title="欠薪维权申诉详情" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<scroll-view class="content" scroll-y="true">
		<view class="view-box">
			<view class="title-view">
				基本信息
			</view>
			<view class="view-item">
				<view class="label">欠薪单位</view>
				<view >{{detailData.oweCompany}}</view>
			</view>
			<view class="view-item">
				<view class="label">欠薪项目</view>
				<view >{{detailData.oweProject}}</view>
			</view>
			<view class="view-item">
				<view class="label">欠薪金额</view>
				<view >{{detailData.oweMoney}}</view>
			</view>
			<view class="view-item">
				<view class="label">单位地址</view>
				<view >{{detailData.address}}</view>
			</view>
			<view class="view-item">
				<view class="label">申请人姓名</view>
				<view >{{detailData.applayUser}}</view>
			</view>
			<view class="view-item">
				<view class="label">身份证号码</view>
				<view >{{detailData.idCard}}</view>
			</view>
			<view class="view-item">
				<view class="label">电话号码</view>
				<view >{{detailData.phone}}</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				欠薪时间
			</view>
			<view class="view-item">
				<view>{{detailData.oweStartDay}}</view>
				<view style="margin: 0 40rpx;">至</view>
				<view>{{detailData.oweEndDay}}</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				有效依据
			</view>
			<view class="view-item">
				<view class="label">合同照片</view>
				<view class="img-item">
					<image class="img" :src="contractImgUrl" mode=""></image>
				</view>
			</view>
			<view class="view-item">
				<view class="label">考勤记录</view>
				<view class="img-item">
					<image class="img" :src="attendanceImgUrl" mode=""></image>
				</view>
			</view>
			<view class="view-item">
				<view class="label">工资信息</view>
				<view class="img-item">
					<image class="img" :src="wageImgUrl" mode=""></image>
				</view>
			</view>
			<view class="view-item">
				<view class="label">其他依据</view>
				<view class="img-item">
					<image class="img" :src="otherImgUrl" mode=""></image>
				</view>
			</view>
		</view>
	
		<view class="view-box">
			<view class="title-view">
				回复内容
			</view>
			<view style="width: 94%;height: auto;margin: 20rpx 0;">
				<u--textarea v-model="detailData.replyContent" placeholder="申诉回复内容" autoHeight disabled style="min-height: 200rpx;width: 100%;"></u--textarea>
			</view>
		</view>
	
	</scroll-view>
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		id:'',
		detailData:{},
		contractImgUrl:'',
		attendanceImgUrl:'',
		wageImgUrl:'',
		otherImgUrl:'',
    }
  },
  onLoad(option) {
	console.log(option)
	this.id=option.id||"";
	if(this.id!=""){
		this.getSafeguardingInfoById()
		this.getSafeguardingPhotoById()
	}
	
  },
  onShow() {
  },
  methods: {
	// 获取详情
	getSafeguardingInfoById(){
		let param={
			id:this.id,
		}
		uni.request({
		  url: config.realAppUrl+'/safeguardingInfo/getSafeguardingInfoById',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/json;charset=UTF-8;',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			console.log(res)
			res = res.data;
			if(res.code==200){
				this.detailData=res.data[0];
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		  },
		  fail: err => {
			console.log(err)
		  }
		})
	},
    getSafeguardingPhotoById(){
	  let param={
	  			id:this.id,
	  		}
	  		uni.request({
	  		  url: config.realAppUrl+'/safeguardingInfo/getSafeguardingPhotoById',
	  		  method: 'post',
	  		  data: param,
	  		  header: {
	  			'Content-Type': 'application/json;charset=UTF-8;',
	  			Authorization: uni.getStorageSync('realNameToken')
	  		  },
	  		  success: res => {
	  			console.log(res)
	  			res = res.data;
	  			if(res.code==200){
	  				// this.detailData=res.data[0];
					var imgList=res.data;
					imgList.forEach(item=>{
						if(item.type==1){
							this.contractImgUrl=config.realLoginUrl+item.path;
						}
						if(item.type==2){
							this.attendanceImgUrl=config.realLoginUrl+item.path;
						}
						if(item.type==3){
							this.wageImgUrl=config.realLoginUrl+item.path;
						}
						if(item.type==4){
							this.otherImgUrl=config.realLoginUrl+item.path;
						}
					})
	  			}else{
	  				uni.showToast({
	  					title: res.msg,
	  					icon: 'none'
	  				})
	  			}
	  		  },
	  		  fail: err => {
	  			console.log(err)
	  		  }
	  		})
	},
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	// padding: 0 20px;
	
	.content{
		width: 100%;
		height: 90vh;
		margin-top: 20rpx;
		padding-bottom: 80rpx;
		background-color: #f8f8f8;
	}
	.view-box{
		width: 94%;
		margin: 20rpx auto;
		background-color: #FFF;
		border-radius: 10rpx;
		padding-top: 20rpx;
		.title-view{
			font-weight: 600;
			margin-left: 20rpx;
		}
	}
	.view-item{
		width: 94%;
		margin: 0rpx auto;
		padding:20rpx;
		display: flex;
		border-bottom: 1rpx solid #f8f8f8;
		font-size: 26rpx;
		.label{
			width: 160rpx;
			color: #666;
		}
	}
	.img-item {
		float: left;
		width: 200upx;
		height: 200upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;
		background: #eee;
		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
