<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="changeMoneyType" :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="sales_con">
			<!-- 年度目标模块 -->
			<view class="annual_tar">
				<view class="annual_item">
					<view>年度目标</view>
					<view>
						<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="digit" @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>
		
		<!-- 保存按钮 -->
		<view class="btn_g bg-blue button-hover round" @click="sureSave">
			保存
		</view>
	</view>
</template>

<script>
	import { netGetGongsiList, netSetTargetMoney } from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	export default{
		props:{
			optionsTime:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				optionsMoney: [{
						text: '成交金额',
						value: 1
					},
					{
						text: '回款金额',
						value: 2
					}
				],
				valueTime:0,
				valueMoney: 0,
				list:[],
				checkBoxChecked: [],
				checkList:[],
				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:'',    //年度 总目标
			}
		},
		onShow() {
			
		},
		created() {
			this.optionsTime.forEach((ele,index)=>{
				if(ele.selected){
					this.valueTime = index
				}
			})
			this.getList()
		},
		methods:{
			changeMoneyType(e) {
				this.valueTime = e.detail.value
				this.getList()
			},
			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
			},
			getList() {
				let params = {
					year:this.optionsTime[this.valueTime].name,
					status: this.optionsMoney[this.valueMoney].value,
				}
				netGetGongsiList(params).then(res=>{
					res = res.data
					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月
			},
			handleParams() {
				let yearid = this.optionsTime[this.valueTime].id
				let year = this.optionsTime[this.valueTime].name
				let status = this.optionsMoney[this.valueMoney].value
				let params = {
					year: yearid,
					status: status,
					type: 1,
					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: 1
				}
				return params
			},
			sureSave() {
				let params = this.handleParams()
				netSetTargetMoney(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 年度目标模块
	.annual_tar {
		.annual_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border: 1rpx solid #EAEAEA;
			:first-child {
				font-size: 28rpx;
			}
			:last-child {
				width: 200px;
				input {
					border-radius: 25rpx;
					border: 1rpx solid #CCC;
					height: 40rpx;
					width: 200px;
					padding:0 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;
			}
		}
	}
	.sales_con {
		padding: 30rpx 20rpx 120rpx;
		.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;
				}
			}
	
			.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;
			}
		}
	}
</style>
