<template>
	<view class="pr">
		<image class="top-bg" src="/static/bg/bf-othedetail.png" mode=""></image>
		<view class="top-box">
			<view class="mb40">{{$t('N_I_129')}}:{{detail.actStartDate}} -{{detail.actEndDate}}</view>
			<view v-if="detail.residueDay" class="mb20">{{$t('fn_112')}}<text>{{detail.residueDay}}</text>{{$t('S_L_6')}}</view>
			<view v-else class="mb20">{{$t('fn_113')}}</view>
			<view >{{ $t('N_I_87') }}：{{ orderAchieve }}</view>
		</view>
		<view class="pt20">
			<view class="detail-item" v-for="(item,index) in listData" :key="index">
				<view class="d-b-c mb20">
					<view  class="flex-1 f28 gray3" v-if="item.placeDept >= 4">
         			   {{ item.placeDept}}<span v-if="languages==='en-US'">th</span> {{ '' }} {{ $t("fn_011") }}
          		  </view>
          		  <view  class="flex-1 f28 gray3" v-else>
             			 {{ item.placeDept}}{{ $t("fn_011") }}
           			 </view>
					<!-- <view class="flex-1 f28 gray3">{{$t('fn_010')}}{{item.placeDept}}{{$t('fn_011')}}</view> -->
					<view class="f24 gray9 f-s-0">{{$t('S_C_7')}}:PV</view>
				</view>
				<view class="mb20">
					<view class="f24 gray9">{{$t('fn_114')}}</view>
					<view class="f28 gray3">{{formatNum(item.placeDeptPv)}}</view>
				</view>
				<view class="slider">
					<view v-if="item.complianceFlag==1" class="slider-width"
						:style="'width: '+((item.sumPv*100)/(item.placeDeptPv *1))+'%;'"></view>
					<view v-if="item.complianceFlag==0" class="slider-width full" :style="'width: 100%;'"></view>
				</view>
				<view class="d-b-s">
					<view class="flex-1">
						<view class="redfb">{{$t('ENU_REA_S_1')}}</view>
						<view class="f28 gray3">{{formatNum(item.notSumPv)}}</view>
					</view>
					<view class="flex-1">
						<view class="green1E">{{$t('ENU_REA_S_0')}}</view>
						<view class="f28 gray3">{{formatNum(item.sumPv)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pkId: '',
				listData: [],
				detail: {

				},
				languages:'',
				title: '',
				orderAchieve:'',
				actTypes:''
			}
		},
		onLoad(e) {
			this.pkId = e.pkId;
			this.title = e.actTypeVal;
			this.actTypes= e.actType;
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.getData();
			this.languages= uni.getLocale();
		},
		methods: {
			getData() {
				let self = this;
				self._get('activity/api/other/other-detail/' + self.pkId, {}, res => {
					self.listData = res.data.detailList;
					self.detail = res.data;
					self.orderAchieve= res.data.orderAchieve;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		position: absolute;
		height: 230rpx;
		width: 750rpx;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.top-box {
		position: relative;
		z-index: 1;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 0 25rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.detail-item {
		background-color: #fff;
		width: 706rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 28rpx 20rpx 33rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.slider {
		width: 665rpx;
		height: 18rpx;
		background: #EEEEEE;
		border-radius: 9rpx;
		position: relative;
		margin-bottom: 16rpx;
	}

	.slider-width {
		position: absolute;
		left: 0;
		top: 0;
		height: 18rpx;
		border-radius: 9rpx;
		background-color: #FB3024;
		z-index: 1;
	}

	.slider-width.full {
		background: #FFB85C;
	}

	.redfb {
		color: #FB3024;
	}

	.green1E {
		color: #1EBD85;
	}
</style>