<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="bg-white page" v-if="form">
		<uv-form :model="form" ref="uForm" labelWidth="88">
			<uv-form-item label="用户名称:" prop="nickname" required>
				<div class="disable-div">{{form.nickname}}</div>
			</uv-form-item>
			<uv-form-item label="年份:" prop="year" required>
				<div class="disable-div">{{form.year}}</div>
			</uv-form-item>
			<uv-form-item label="月份:" prop="month" required>
				<div class="disable-div">{{form.month}}</div>
			</uv-form-item>
			<uv-form-item label="当月回款额:" prop="actualPayment" required>
				<div class="disable-div">{{form.actualPayment}}元</div>
			</uv-form-item>
			<uv-form-item label="当月销售台数:" prop="actualSale" required>
				<div class="disable-div">{{form.actualSale}}元</div>
			</uv-form-item>
			<uv-form-item label="评分:" prop="score" required>
				<div class="disable-div">{{form.score}}分</div>
			</uv-form-item>
			<uv-form-item label="销售台数绩效比:" prop="saleTask" required>
				<div class="disable-div">{{form.saleTask}}%</div>
			</uv-form-item>
			<uv-form-item label="回款金额绩效比:" prop="paymentTask" required>
				<div class="disable-div">{{form.paymentTask}}%</div>
			</uv-form-item>
			<uv-form-item label="评分比:" prop="scoreTask" required>
				<div class="disable-div">{{form.scoreTask||0}}%</div>
			</uv-form-item>
			<uv-form-item label="核发比例:" prop="proportionOfIssuance" required>
				<div class="disable-div">{{form.proportionOfIssuance}}</div>
			</uv-form-item>
			<uv-form-item label="总分:" prop="totalScore" required>
				<div class="disable-div">{{form.totalScore}}分</div>
			</uv-form-item>
		</uv-form>
		<view style="margin-top: 30rpx;"
			v-if="userInfo.id == form.userId && form.canConfirmFlag === 1 && form.confirmFlag === 0">
			<uv-button type="primary" color="#09b4f1" text="确定" @click="onSubmit"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getSalesPerformance,
		updateSalesPerformance
	} from '@/api/customer'
	import {
		userGetUserInfo
	} from '@/api/user'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		handleLoginFailure
	} from '@/utils'
	const main = useMainStore()
	const {
		isLogin,
	} = storeToRefs(main)

	const title = ref('业绩结算详情')
	const form = ref('')
	const id = ref('')
	onLoad((opt) => {
		if (isLogin) {
			id.value = opt.id
			getDetail()
			isConfirmShow()
		} else {
			handleLoginFailure()
		}
	})

	const getDetail = async () => {
		getSalesPerformance({
			id: id.value
		}).then(res => {
			form.value = res
		})
	}

	// 修确认提交
	const onSubmit = () => {
		form.value.confirmFlag = 1
		updateSalesPerformance(form.value).then(res => {
			uni.showToast({
				title: '确认成功',
				icon: 'success',
				duration: 2000
			})
			getDetail()
		})
	}

	const userInfo = ref()
	const isConfirmShow = async () => {
		if (uni.getStorageSync('userinfo')) {
			userInfo.value = uni.getStorageSync('userinfo')
		} else {
			userInfo.value = await userGetUserInfo()
			main.SET_MEMBER(userInfo.value)
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0rpx 22rpx 40rpx 34rpx;
	}

	.list {
		margin: 40rpx 15rpx 60rpx;

		.item {
			position: relative;
			border-radius: 15rpx;
			box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
			padding: 25rpx 35rpx;
			margin-bottom: 45rpx;

			.number {
				margin-bottom: 20rpx;
			}

			.content {
				margin-bottom: 20rpx;

				.price {
					width: 245rpx;
					font-size: 28rpx;
					color: #fa3534;
				}
			}

			.close {
				position: absolute;
				right: -8px;
				top: -30rpx;
				background-color: #fff;
				border-radius: 50%;
				height: 60rpx;
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
			}
		}
	}

	.disable-div {
		background-color: #f7f7f7;
		box-shadow: 0 0 0 1px #efefef inset;
		display: inline-flex;
		flex-grow: 1;
		align-items: center;
		padding: 20rpx;
		background-image: none;
		border-radius: 10rpx;
		color: #666;
	}
</style>