<template>
	<view>
		<view class="sales_head">
			<picker @change="changeTime" :value="valueTime" :range-key="'name'" :range="optionsTime">
				<view class="tablist">
					<view>{{optionsTime[valueTime] ? optionsTime[valueTime].name : '时间'}}</view>
					<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg"  mode="scaleToFill"></image>
				</view>
			</picker>
			<picker @change="changeTopMoney" :value="valueMoney" :range-key="'text'" :range="optionsMoney">
				<view class="tablist">
					<view>{{optionsMoney[valueMoney] ? optionsMoney[valueMoney].text : '金额'}}</view>
					<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg"  mode="scaleToFill"></image>
				</view>
			</picker>
		</view>
		<view class="btnwarp">
			<view class="history" @click="toHistory">历史修改记录</view>
		</view>
		<view class="sales_con">
			<!-- 年度目标模块 -->
			<view class="annual_tar">
				<view class="annual_item">
					<view>年度目标</view>
					<view v-if="!isSet">{{info ? info.yeartarget : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" v-model="info.yeartarget" @confirm="handelMoney" @blur="handelMoney"
							@input="check" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>1月</view>
					<view v-if="!isSet">{{info ? info.january : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check1" v-model="info.january" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>2月</view>
					<view v-if="!isSet">{{info ? info.february : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check2" v-model="info.february" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>3月</view>
					<view v-if="!isSet">{{info ? info.march : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check3" v-model="info.march" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>4月</view>
					<view v-if="!isSet">{{info ? info.april : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check4" v-model="info.april" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>5月</view>
					<view v-if="!isSet">{{info ? info.may : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check5" v-model="info.may" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>6月</view>
					<view v-if="!isSet">{{info ? info.june : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check6" v-model="info.june" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>7月</view>
					<view v-if="!isSet">{{info ? info.july : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check7" v-model="info.july" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>8月</view>
					<view v-if="!isSet">{{info ? info.august : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check8" v-model="info.august" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>9月</view>
					<view v-if="!isSet">{{info ? info.september : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check9" v-model="info.september" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>10月</view>
					<view v-if="!isSet">{{info ? info.october : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check10" v-model="info.october" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>11月</view>
					<view v-if="!isSet">{{info ? info.november : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check11" v-model="info.november" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<view class="annual_item">
					<view>12月</view>
					<view v-if="!isSet">{{info ? info.december : '0'}}</view>
					<view v-if="isSet">
						<input type="digit" @input="check12" v-model="info.december" @confirm="changeMoney"
							@blur="changeMoney" placeholder="请填写目标金额" />
					</view>
				</view>
				<!-- 审核信息 -->
				<view class="" v-if="isSet">
					<!-- 固定审批 -->
					<fixed-approval v-if="approvalPro.status == 1" :list="approvalPro.stepList"></fixed-approval>
					<!-- 审核信息 -->
					<examine-template v-if="approvalPro.status == 0" :remindPeople="remindPeople" @delExamine="delRemind"></examine-template>
				</view>
			</view>
		</view>
		<view style="height:100rpx"></view>
		<view class="bot_btn">
			<view class="submit" v-if="isSet" @click="$noMultipleClicks(submitdata)">提交</view>
			<view class="btnself" :class="isSet?'bg':''" @click="isSet = !isSet">{{isSet?'取消修改':'修改目标'}}</view>
		</view>
	</view>
</template>

<script>
	import {
		netGetDefaultSelfDetail,
		netGetTargetSelect,
		netSetMymubiao
	} from '@/api/kehu.js'
	import {
		netStaffDefaultReviewer,
		netApprovalProcess
	} from '@/api/index.js'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import { commonF } from '@/common/common'
	import fixedApproval from '@/components/fixedApproval.vue'
	export default {
		mixins:[commonF],
		components:{
			fixedApproval
		},
		data() {
			return {
				optionsMoney: [{
						text: '成交金额',
						value: 1
					},
					{
						text: '回款金额',
						value: 2
					}
				],
				noClick: true, //防止  重复点击
				optionsTime: [],
				valueTime: 0,
				valueMoney: 0,
				roleType: '',
				rules: '',
				info: null, //个人或团队  默认数据
				isSet: false, //是否设置  个人目标
				remindPeople: [], //提醒谁看\
				remindType:'record',
				BASE_IMG_URL: BASE_IMG_URL,
				approvalPro:{},   //审批流程
			}
		},
		created() {
			this.roleType = uni.getStorageSync('roleType')
			this.rules = uni.getStorageSync('rules')
			this.getSelect()
			//审批流程
			this.getProcess()
		},
		methods: {
			//审批流程
			getProcess() {
				netApprovalProcess({type:'achievement'}).then(res=>{
					this.approvalPro = res.data
				})
			},
			// 选择成员
			moreClick() {
				uni.navigateTo({
					url: '/pagesA/crm/selectMember/selectMember'
				})
			},
			//历史记录
			toHistory() {
				uni.navigateTo({
					url: '/pagesA/crm/salesTarget/history_edit'
				})
			},
			getSelect() {
				netGetTargetSelect().then(res => {
					res = res.data.years
					res.forEach((ele, index) => {
						if (ele.selected) {
							this.valueTime = index
						}
					})
					this.optionsTime = res
					this.getMydetail()
				})
			},
			changeTime(e) {
				this.valueTime = e.detail.value
				this.getMydetail()
			},
			changeTopMoney(e) {
				this.valueMoney = e.detail.value
				this.getMydetail()
			},
			getMydetail() {
				let params = {
					year: this.optionsTime[this.valueTime].name,
					status: this.optionsMoney[this.valueMoney].value,
				}
				netGetDefaultSelfDetail(params).then(res => {
					let resinfo = res.data
					if (resinfo) {
						this.info = resinfo
					} else {
						this.info = {
							january: 0,
							february: 0,
							march: 0,
							april: 0,
							may: 0,
							june: 0,
							july: 0,
							august: 0,
							september: 0,
							october: 0,
							november: 0,
							december: 0,
							yeartarget: 0
						}
					}
				})
			},
			//计算每个月份平均值
			handelMoney(e) {
				let totalnum = this.info.yeartarget
				let avernum = (Number(totalnum) / 12).toFixed(2)
				this.info.january = avernum //1月
				this.info.february = avernum //2月
				this.info.march = avernum //3
				this.info.april = avernum //4月
				this.info.may = avernum //5月
				this.info.june = avernum //6月
				this.info.july = avernum //7月
				this.info.august = avernum //8月
				this.info.september = avernum //9月
				this.info.october = avernum //10月
				this.info.november = avernum //11月
				this.info.december = avernum //12月
			},
			//正则控制小数点后只能输入两位
			check: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.yeartarget = e.target.value
				})
			},
			check1: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.january = e.target.value
				})
			},
			check2: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.february = e.target.value
				})
			},
			check3: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.march = e.target.value
				})
			},
			check4: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.april = e.target.value
				})
			},
			check5: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.may = e.target.value
				})
			},
			check6: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.june = e.target.value
				})
			},
			check7: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.july = e.target.value
				})
			},
			check8: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.august = e.target.value
				})
			},
			check9: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.september = e.target.value
				})
			},
			check10: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.october = e.target.value
				})
			},
			check11: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.november = e.target.value
				})
			},
			check12: function(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.info.december = e.target.value
				})
			},
			changeMoney() {
				let money = 
				Number(this.info.january)
				 + Number(this.info.february)
				  + Number(this.info.march)
				   + Number(this.info.april)
					+ Number(this.info.may)
					 + Number(this.info.june)
					  + Number(this.info.july)
					   + Number(this.info.august)
						+ Number(this.info.september)
						 + Number(this.info.october)
						  + Number(this.info.november)
						   + Number(this.info.december)
				this.info.yeartarget = money.toFixed(2)
			},
			submitdata() {
				let achievements = {
					january: this.info.january,
					february: this.info.february,
					march: this.info.march,
					april: this.info.april,
					may: this.info.may,
					june: this.info.june,
					july: this.info.july,
					august: this.info.august,
					september: this.info.september,
					october: this.info.october,
					november: this.info.november,
					december: this.info.december,
					yeartarget: this.info.yeartarget
				}
				let remindPeople = this.remindPeople //提醒谁看
				if (remindPeople.length == 0 && this.approvalPro.status == 0) {
					uni.showToast({
						title: '请选择审核人',
						icon: 'none'
					})
					return
				}
				let newArr = []
				remindPeople.forEach(ele => {
					newArr.push(ele.id)
				})
				let params = {
					year: this.optionsTime[this.valueTime].name,
					status: this.optionsMoney[this.valueMoney].value,
					achievements,
					flow_staff_ids:this.approvalPro.status == 0 ? newArr.join(',') : '',
					yeartarget:this.info.yeartarget
				}
				netSetMymubiao(params).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.isSet = false
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pagesA/crm/salesTarget/history_edit'
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnwarp {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx 24rpx;

		.history {
			font-size: 28rpx;
			color: $uni-text-color;
		}
	}

	// 目标模块
	.submit {
		width: 200rpx;
		height: 70rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		background: $uni-text-color;
		margin-right: 24rpx;
	}

	.annual_tar {
		.annual_item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 100rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border: 1rpx solid #EAEAEA;

			view:first-child {
				font-size: 28rpx;
				width: 200rpx;
				text-align: center;
			}

			view:last-child {
				width: 400rpx;
				text-align: center;

				input {
					width: 400rpx;
					border-radius: 40rpx;
					border: 1rpx solid #CCC;
					padding: 10rpx 15rpx;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.sales_head {
		border-top: 1rpx solid #CCC;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx 24rpx;
		background: #fff;

		.tablist {
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			.bottomimg {
				width: 20rpx;
				height: 33rpx;
				margin-left: 20rpx;
			}
		}
	}

	.bot_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #EAEAEA;
		z-index: 2;

		.btnself {
			width: 200rpx;
			height: 70rpx;
			border-radius: 40rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			background: $uni-text-color;
		}

		.bg {
			background: #ff7800;
		}
	}

	.sales_con {
		padding: 0rpx 20rpx 20rpx;

		.sales_item {
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			padding: 20rpx 35rpx 30rpx 24rpx;
			align-items: center;
			margin-bottom: 20rpx;
			box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

			.item_check {
				width: 60rpx;
			}

			.item_img {
				width: 80rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.item_name {
				flex: 1;
				line-height: 40rpx;

				:first-child {
					font-size: 28rpx;
				}

				:last-child {
					color: #999;
					font-size: 24rpx;
				}
			}

			.item_monery {
				width: 100rpx;
				color: #999;
			}
		}
	}

	.bottom_select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 120rpx;
		padding: 0 24rpx;
		border-top: 1rpx solid #CCC;

		.select_num {
			width: 450rpx;

			.select_box {
				width: 450rpx;

				.selectlist {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.select_item {
					flex-shrink: 0;
					width: 100rpx;
					font-size: 24rpx;
					color: #666;
					text-align: center;
					margin-right: 15rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}
				}
			}
		}

		.rightbtn {
			width: 240rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.sure {
				width: 120rpx;
				height: 80rpx;
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				background: $uni-text-color;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}

			.selectall {
				width: 120rpx;
				height: 80rpx;
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				background: #ff7800;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}

	.affiliation {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding-bottom: 40rpx;

		.aff_head {
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;

			text {
				color: #f00;
				margin-left: 10rpx;
			}
		}

		.aff_con {
			display: flex;
			text-align: center;
			flex-wrap: wrap;
			padding:0 30rpx;
			.aff_item {
				width: 100rpx;
				margin-right: 15rpx;

				image {
					margin-bottom: 15rpx;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.affbox {
				position: relative;

				.delremind {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}
			}

			.aff_last {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				text-align: center;
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>
