<template>
	<view class="set_per_goal">
		<!-- 成员信息模块 -->
		<view class="member_info">
			<scroll-view scroll-x class="select_box">
				<view class="selectlist">
					<view class="select_item" v-for="(item,index) in list" :key="index">
						<image :src="item.img ? item.img :BASE_IMG_URL+ 'headImg.png'" mode="scaleToFill"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="mem_dep">
				共{{list.length}}人
			</view>
		</view>
		<!-- 目标时间，目标类型模块 -->
		<view class="target_att">
			<view>目标年份：<text>{{year}}</text></view>
			<view>目标类型：<text>{{status == 1 ? '成交金额' : '回款金额'}}</text></view>
		</view>
		<!-- 年度目标模块 -->
		<view class="annual_tar">
			<view class="annual_item">
				<view>年度目标</view>
				<view>
					<!-- {{yeartarget}} -->
					<input type="digit" v-model="yeartarget" @confirm="handelMoney" @blur="handelMoney" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>1月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="january" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>2月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="february" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>3月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="march" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>4月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="april" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>5月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="may" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>6月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="june" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>7月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="july" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>8月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="august" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>9月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="september" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>10月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="october" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>11月</view>
				<view>
					<input type="text" @confirm="changeMoney" @blur="changeMoney" v-model="november" placeholder="请填写目标金额"/>
				</view>
			</view>
			<view class="annual_item">
				<view>12月</view>
				<view>
					<input type="digit" @confirm="changeMoney" @blur="changeMoney" v-model="december" placeholder="请填写目标金额"/>
				</view>
			</view>
		</view>
		<!-- 保存按钮 -->
		<view class="btn_g bg-blue button-hover round" @click="sureSave">
			保存
		</view>
	</view>
</template>

<script>
	import { netSetTargetMoney, netGetDefaultMoney } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	export default {
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				year:'',
				yearid:'',
				status:'',  //1销售（目标）2回款（目标）
				type:'',   //1公司2部门3员工
				ids:'',
				list:[],  //选择的员工 列表
				january:'',   //1月
				february:'',   //2月
				march:'',    //3
				april:'',   //4月
				may:'',   //5月
				june:'',   //6月
				july:'',   //7月
				august:'',   //8月
				september:'',   //9月
				october:'',   //10月
				november:'',   //11月
				december:'',   //12月
				yeartarget:'',    //年度 总目标
			}
		},
		onLoad(options) {
			this.type = options.type
			this.year = options.year
			this.status = options.status
			this.yearid = options.yearid
		},
		onShow() {
			this.list = uni.getStorageSync('member')
			this.getDefault()
		},
		methods: {
			changeMoney(e) {
				let money = Number(this.january)+Number(this.february)+Number(this.march)+Number(this.april)+
				Number(this.may)+Number(this.june)+Number(this.july)+Number(this.august)+Number(this.september)
				+Number(this.october)+Number(this.november)+Number(this.december)
				this.yeartarget = money
			},
			handleParams() {
				let ids = []
				this.list.forEach(item=>{
					ids.push(item.id)
				})
				let params = {
					year: this.yearid,
					status: this.status,
					type: this.type,
					achievements:{
						january:this.january,   //1月
						february:this.february,   //2月
						march:this.march,    //3
						april:this.april,   //4月
						may:this.may,   //5月
						june:this.june,   //6月
						july:this.july,   //7月
						august:this.august,   //8月
						september:this.september,   //9月
						october:this.october,   //10月
						november:this.november,   //11月
						december:this.december,   //12月
						yeartarget:this.yeartarget,    //年度 总目标
					},
					ids: ids.join(',')
				}
				return params
			},
			getDefault() {
				let ids = []
				this.list.forEach(item=>{
					ids.push(item.id)
				})
				let params = {
					year: this.yearid,
					status: this.status,
					type: this.type,
					ids: ids.join(',')
				}
				netGetDefaultMoney(params).then(res=>{
					res = res.data
					if(!res){
						return
					}
					this.january = res.january   //1月
					this.february = res.february   //2月
					this.march = res.march   //3
					this.april = res.april   //4月
					this.may = res.may   //5月
					this.june = res.june  //6月
					this.july = res.july   //7月
					this.august = res.august   //8月
					this.september = res.september   //9月
					this.october = res.october   //10月
					this.november = res.november   //11月
					this.december = res.december   //12月
					this.yeartarget = res.yeartarget   //年度 总目标
				})
			},
			//输入 年度目标  时  计算每个月的目标
			handelMoney(e) {
				let totalnum = e.detail.value
				let avernum = (Number(totalnum)/12).toFixed(2)
				this.january = avernum   //1月
				this.february = avernum   //2月
				this.march = avernum   //3
				this.april = avernum   //4月
				this.may = avernum   //5月
				this.june = avernum  //6月
				this.july = avernum   //7月
				this.august = avernum   //8月
				this.september = avernum   //9月
				this.october = avernum   //10月
				this.november = avernum   //11月
				this.december = avernum   //12月
			},
			sureSave() {
				let params = this.handleParams()
				netSetTargetMoney(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					uni.setStorageSync('isSave',true)
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select_box{
		width: 600rpx;
		.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%;
			}
		}
	}
	.set_per_goal {
		// 成员信息模块
		.member_info {
			margin: 20rpx 0;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 140rpx;
			padding:0 24rpx;
			align-items: center;
			border-top: 1rpx solid #EAEAEA;
			border-bottom: 1rpx solid #EAEAEA;

			.mem_header {
				width: 160rpx;
				text-align: center;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.mem_post {
				margin-left: -15rpx;

				:first-child {
					font-size: 28rpx;
					margin-bottom: 6rpx;
					margin-top: -8rpx;
				}

				:last-child {
					color: #999;
				}
			}
			
			.mem_dep {
				
			}
		}

		// 目标时间，目标类型模块
		.target_att {
			display: flex;
			padding-left: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1rpx solid #EAEAEA;
			view {
				color: 999;
				margin-right:20rpx;
				text {
					color: 666;
					margin-right: 10rpx;
				}
			}
		}

		// 年度目标模块
		.annual_tar {
			.annual_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding: 24rpx 30rpx;
				border: 1rpx solid #EAEAEA;
				:first-child {
					font-size: 28rpx;
				}
				input {
					width:400rpx;
					border-radius: 40rpx;
					border: 1rpx solid #CCC;
					padding:10rpx 15rpx;
					font-size:24rpx;
					color:#333;
				}
			}
		}
	}
</style>
