<template>
	<view class="page">
		<view class="bg">
			<image mode="widthFix" style="width: 100%;"
				src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/87960202402291430371479.webp"></image>
			<view class="card" :class="{card2:type==2}">
				<view class="c-head">
					<view :class="type==2?'left':'right'" @click="changeType(2)">增收销售补贴</view>
					<!-- <view :class="type==1?'left':'right'" @click="changeType(1)">春耕采购补贴</view> -->
					<view v-if="mer_info.type_code=='PersonalStore'" :class="type==1?'left':'right'"
						@click="changeType(1)">春耕采购补贴</view>
					<view v-else></view>
				</view>
				<view class="c-body-title">
					<view>补贴金额</view>
					<view>补贴状态</view>
				</view>
				<view class="c-body-text">
					<view class="price">{{info.subsidy_amount}}元</view>
					<view>
						<text v-if="info.subsidy_status==2" class="price">{{info.subsidy_status_name}}</text>
						<text v-else>{{info.subsidy_status_name}}</text>
					</view>
				</view>
			</view>
			<view class="bottom"></view>
		</view>
		<image @click="back" class="bg_back"
			src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
		<view class="bg_title">补贴进度</view>
		<view class="body">
			<view class="b-card" v-if="type==1">
				<view class="b-top">
					<view>春耕采购金额{{info.spring_subsidy}}元</view>
					<view>剩余金额{{info.balance}}元</view>
				</view>
				<view class="b-bottom">
					<view class="pro">
						<view class="loss" :style="{left: `-${100-info.spring_subsidy_rate}%`}">
							<image class="image"
								src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp">
							</image>
							<view class="text">{{info.spring_subsidy_rate}}%</view>
						</view>

					</view>
					<view v-if="info.spring_subsidy_rate>=100" style="color: #FF5E0C;">已完成</view>
					<view v-else style="color: #ADADAD;">未完成</view>
				</view>
			</view>
			<view class="b-card">
				<view class="b-top">
					<view>销售目标金额{{info.sale_target}}元</view>
					<view>当前进度{{info.sale_amount}}元</view>
				</view>
				<view class="b-bottom">
					<view class="pro">
						<view class="loss" :style="{left: `-${100-info.sale_finish_rate}%`}">
							<image class="image"
								src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp">
							</image>
							<view class="text">{{info.sale_finish_rate}}%</view>
						</view>
					</view>
					<view v-if="info.sale_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
					<view v-else style="color: #ADADAD;">未完成</view>
				</view>
			</view>
			<view class="b-card" v-if="type==1">
				<view class="b-top">
					<view>采购目标金额{{info.purchase_target}}元</view>
					<view>当前进度{{info.purchase_amount}}元</view>
				</view>
				<view class="b-bottom">
					<view class="pro">
						<view class="loss" :style="{left: `-${100-info.purchase_finish_rate}%`}">
							<image class="image"
								src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp">
							</image>
							<view class="text">{{info.purchase_finish_rate}}%</view>
						</view>

					</view>
					<view v-if="info.purchase_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
					<view v-else style="color: #ADADAD;">未完成</view>
				</view>
			</view>
			<block v-else>
				<view class="b-card">
					<view class="b-top">
						<view>里海云仓采购目标金额{{info.official_purchase_target}}元</view>
						<view>当前进度{{info.official_purchase_amount}}元</view>
					</view>
					<view class="b-bottom">
						<view class="pro">
							<view class="loss" :style="{left: `-${100-info.official_purchase_finish_rate}%`}">
								<image class="image"
									src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp">
								</image>
								<view class="text">{{info.official_purchase_finish_rate}}%</view>
							</view>

						</view>
						<view v-if="info.official_purchase_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
						<view v-else style="color: #ADADAD;">未完成</view>
					</view>
				</view>
				<view class="b-card">
					<view class="b-top">
						<view>其他采购目标金额{{info.purchase_target}}元</view>
						<view>当前进度{{info.purchase_amount}}元</view>
					</view>
					<view class="b-bottom">
						<view class="pro">
							<view class="loss" :style="{left: `-${100-info.purchase_finish_rate}%`}">
								<image class="image"
									src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f805f20240229155704834.webp">
								</image>
								<view class="text">{{info.purchase_finish_rate}}%</view>
							</view>

						</view>
						<view v-if="info.purchase_finish_rate>=100" style="color: #FF5E0C;">已完成</view>
						<view v-else style="color: #ADADAD;">未完成</view>
					</view>
				</view>
			</block>
			<view class="b-tips" v-if="type==1">
				*春耕采购余额使用完，采购金额和销售金额达到后才可获取补贴。<br>
				*当进度完成时将在每月月底进行统计审核，审核完成后经本人确认，一个季度内到账。
			</view>
			<view class="b-tips" v-if="type==2">
				*当进度完成时将在每月月底进行统计审核，审核完成后经本人确认，一个季度内到账。
			</view>
			<view class="b-list">
				<view class="list-head"></view>
				<view class="list-body">
					<view class="list-b-title">
						<view>采购金额</view>
						<view>销售金额</view>
						<view>补贴金额</view>
						<view>状态</view>
					</view>
					<view class="list-b-text" v-for="(item,index) in list" :key="index">
						<view class="item1">
							￥{{ cPrice2(item.extra.official_purchase_target, item.extra.purchase_target) }}</view>
						<view class="item2">￥{{ item.extra.sale_target }}</view>
						<view class="item3">
							<text v-if="item.id==0">￥{{cPrice(item.coupon_price)}}</text>
							<text v-else>￥{{item.coupon_price}}</text>
						</view>
						<view class="item4" @click="showPopup(item.send_status, item.id)">
							<!-- send_status 发放状态：-1未激活，0待审核，1待领取，2已完成 -->
							<text v-if="item.send_status==2||item.send_status==1"
								style="color: #FF5E0C;">{{item.send_status_cn}}</text>
							<text v-else>{{item.send_status_cn}}</text>
						</view>
					</view>
					<view class="list-b-text" style="align-items: center;" v-if="list.length == 0">
						<view>暂无数据</view>
					</view>
				</view>
			</view>
			<uni-popup type="center" ref="pupRef">
				<view style="width: 630rpx;height: 500rpx;position: relative;">
					<view style="position: absolute;top: 0;right: 10rpx;" @click="closePopup">
						<image style="width: 50rpx;height: 50rpx;"
							src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c8b19202403201714381681.webp"></image>
					</view>
					<view style="width: 630rpx;position: absolute;top: 70rpx;right: 0;"
						:class="[send_status_cn>0?'h430':'h310']">
						<image style="width: 100%;" :class="[send_status_cn>0?'h430':'h310']"
							src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/23ad8202403201716417527.webp"></image>
						<view
							style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 30rpx;display: flex;flex-direction: column;justify-content: center;">
							<view style="padding-bottom: 50rpx;font-size: 32rpx;color: #2E2E2E;">
								<text v-if="send_status_cn==-1">补贴未激活</text>
								<text v-else-if="send_status_cn==0">补贴审核中</text>
								<text v-else-if="send_status_cn==1">补贴待领取</text>
								<text v-else-if="send_status_cn==10">请填写错误内容</text>
							</view>
							<view style="color: #7A7A7A;font-size: 28rpx;">
								<text v-if="send_status_cn==-1">当前采购目标金额、销售目标金额未完成，无法提交报审。</text>
								<text v-else-if="send_status_cn==0">你的补贴申请已提交报审，审核周期为3个月内，审核完成后，将会以短信形式通知。</text>
								<text v-else-if="send_status_cn==1">
									请核对补贴金额是否正确，如有疑问，请联系工作人员。
									电话：13627640188
								</text>
							</view>
							<view v-if="send_status_cn==10"
								style="background-color: #fff;border-radius: 20rpx;padding: 20rpx;">
								<textarea v-model="reason" placeholder="请填写错误内容" style="height: 100rpx;" />
							</view>
							<view v-if="send_status_cn==1"
								style="display: flex;justify-content: center;margin-top: 30rpx;color: #F98144;">
								<view @click="reAudit"
									style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;margin-right: 100rpx;">
									错误</view>
								<view @click="couponReceive"
									style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;color: #FFF;background-color: #F98144;">
									正确</view>
							</view>
							<view v-else-if="send_status_cn==10"
								style="display: flex;justify-content: center;margin-top: 30rpx;color: #F98144;">
								<view @click="couponRefuse"
									style="padding: 9rpx 50rpx 12rpx 50rpx;border-radius: 40rpx;border: 4rpx solid #F98144;color: #FFF;background-color: #F98144;">
									提交</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		getSubsidy,
		getSubsidyRecord,
		couponReceive,
		couponRefuse
	} from "@/api/admin.js"
	import {
		Toast
	} from "../../libs/uniApi";
	export default {
		data() {
			return {
				type: 2,
				mer_id: '',
				info: {},
				list: [],
				send_status_cn: '1',
				send_id: 0,
				reason: '',
				where: {
					page: 1,
					limit: 20,
					type: 2
				},
				mer_info: {
					type_code: ''
				}
			}
		},
		onLoad() {
			let user = this.$store.state.app.userInfo;
			if (typeof user == 'string') user = JSON.parse(user);
			this.mer_info.type_code = user.mer_info.type_code;
			this.mer_id = user.service.mer_id;
			this.getSubsidy();
			this.getSubsidyRecord();
		},
		onShow() {},
		methods: {
			showPopup(type, send_id) {
				this.send_status_cn = type;
				this.send_id = send_id;
				if (type == 2) Toast('已经领取过啦');
				else this.$refs.pupRef.open();
			},
			closePopup() {
				this.$refs.pupRef.close();
			},
			back() {
				uni.navigateBack();
			},
			changeType(type) {
				this.type = type;
				this.where.type = type;
				this.getSubsidy();
				this.getSubsidyRecord();
			},
			getSubsidy() {
				if (!this.mer_id) return;
				getSubsidy(this.mer_id, {
					type: this.type
				}).then(res => {
					this.info = res.data;
				})
			},
			couponReceive() {
				this.closePopup();
				couponReceive({
					mer_id: this.mer_id,
					id: this.send_id,
				}).then(res => {
					this.$nextTick(() => {
						Toast('领取成功')
					})
				}).catch(err => {
					this.$nextTick(() => {
						Toast(err)
					})
				})
			},
			reAudit() {
				this.send_status_cn = 10;
			},
			couponRefuse() {
				if (this.reason == '') return Toast('错误内容不能为空');
				this.closePopup();
				couponRefuse({
					mer_id: this.mer_id,
					id: this.send_id,
					reason: this.reason
				}).then(res => {
					this.$nextTick(() => {
						Toast('提交成功')
					})
				}).catch(err => {
					this.$nextTick(() => {
						Toast(err)
					})
				})
			},
			getSubsidyRecord() {
				getSubsidyRecord(this.mer_id, this.where).then(res => {
					this.list = res.data.record;
				})
			},
			cPrice(n) { //计算未激活的补贴达成了多少
				let t = Number(this.info.official_purchase_finish_rate) + Number(this.info.purchase_finish_rate) + Number(
					this.info.sale_finish_rate);
				t /= 3 * 100;
				t == 0 ? t = 1 : null;
				return (+n * t).toFixed(2);
			},
			cPrice2(a, b) {
				a = Number(a);
				b = Number(b);
				return (a + b).toFixed(2)
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.page {
		position: relative;
		font-size: 28rpx;
		background-color: #fff;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 530rpx;

		.card {
			position: absolute;
			transition: 300ms;
			bottom: 30rpx;
			left: 50%;
			transform: translate(-50%);
			width: 670rpx;
			height: 290rpx;
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/b4cfc20240229163236372.webp');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-bottom: 40rpx;

			.c-head {
				display: flex;
				justify-content: space-around;
				height: 90rpx;
				overflow: hidden;
				margin-top: 20rpx;

				view {
					flex: 1;
					text-align: center;
				}

				.left {
					font-size: 32rpx;
					color: #DF4104;
					line-height: 80rpx;
				}

				.right {
					color: #7A7A7A;
					line-height: 100rpx;
				}
			}

			.c-body-title {
				display: flex;
				justify-content: space-around;
				color: #2E2E2E;
				height: 70rpx;
				align-items: center;
			}

			.c-body-text {
				display: flex;
				justify-content: space-around;
				color: #7A7A7A;
				height: 70rpx;
				align-items: center;

				.price {
					color: #F13B3B;
				}
			}
		}

		.card2 {
			background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e5b2e202402291538018132.webp');
		}

		.bottom {
			position: absolute;
			left: 0;
			bottom: -1px;
			width: 100%;
			height: 50rpx;
			border-radius: 50rpx 50rpx 0 0;
			background-color: #fff;
		}
	}

	.bg_back {
		height: 34rpx;
		width: 20rpx;
		position: absolute;
		top: calc(var(--status-bar-height) + 30rpx);
		left: 30rpx;
	}

	.bg_title {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		position: absolute;
		top: calc(var(--status-bar-height) + 30rpx);
		left: 50%;
		transform: translate(-50%);
	}

	.body {
		padding: 530rpx 30rpx 30rpx 30rpx;

		.b-card {
			padding-bottom: 30rpx;

			.b-top {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
			}

			.b-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;

				.pro {
					width: 570rpx;
					height: 28rpx;
					border-radius: 28rpx;
					overflow: hidden;
					position: relative;
					background-color: #ffdfce;

					.loss {
						width: 570rpx;
						height: 28rpx;
						position: absolute;
						top: 0;
						left: -100%;
					}

					.image {
						width: 570rpx;
						height: 28rpx;
					}

					.text {
						position: absolute;
						right: 0;
						top: 0;
						font-size: 20rpx;
						color: #fff;
						border-radius: 28rpx;
						background-color: #FF5E0C;
						padding: 0 10rpx;
						height: 30rpx;
						border: 2rpx solid #ffad82;
					}
				}
			}
		}

		.b-tips {
			color: #7A7A7A;
			font-size: 24rpx;
			margin-bottom: 30rpx;
		}

		.b-list {
			.list-head {
				width: 690rpx;
				height: 45rpx;
				background: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/7bc46202402291702073308.webp');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.list-body {
				.list-b-title {
					padding: 20rpx 0;
					display: flex;

					view {
						flex: 1;
						text-align: center;
						flex-shrink: 0;
					}
				}

				.list-b-text {
					background-color: #F9F9F9;
					border-radius: 12rpx;
					padding: 20rpx 0;
					margin-bottom: 20rpx;
					display: flex;
					font-size: 24rpx;

					view {
						flex: 1;
						text-align: center;
						flex-shrink: 0;
					}

					.item1 {
						color: #F13B3B;
					}

					.item2 {
						color: #20A162;
					}

					.item3 {
						color: #FF8056;
					}

					.item4 {
						color: #2E2E2E;
					}
				}
			}
		}
	}

	.h430 {
		height: 430rpx;
	}

	.h310 {
		height: 310rpx;
	}
</style>