<template>
	<view style="height:100vh">
		<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="changeDep" :value="valueDep" :range-key="'name'" :range="optionsDep">
				<view class="tablist">
					<view>{{optionsDep[valueDep] ? optionsDep[valueDep].name : '部门'}}</view>
					<image :src="BASE_IMG_URL+'xia.png'" class="bottomimg"  mode="scaleToFill"></image>
				</view>
			</picker>
			<picker @change="changeMoney" :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="tl-section">
				<checkbox-group class="block">
					<view v-for="(item,index) in list" :key="index" class="tl-row" @click="changeChecked(item.id)">
						<view class="sales_item">
						<view>	
							<checkbox 
								:value="String(index)" 
								:checked="checkBoxChecked.includes(String(item.id))"
								></checkbox>
						</view>
						<view class="item_img">
							<image :src="item.img ? item.img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
						</view>
						<view class="item_name">
							<view>{{item.name}}</view>
							<view>{{item.post?item.post:''}}</view>
						</view>
						<view class="item_monery">{{item.achievement.yeartarget}}</view>
					</view>
					</view>
				</checkbox-group>
			</view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view>
		<view class="bottom_select">
			<view class="bottom_box">
				<view class="select_num">
					<scroll-view scroll-x class="select_box">
						<view class="selectlist">
							<view class="select_item" v-for="(item,index) in checkList" :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>
				<view class="rightbtn">
					<view class="sure" @click="sureSet">确定</view>
					<view class="selectall" v-if="isAll" @click="selectAllmember">全选</view>
					<view class="selectall" v-if="!isAll" @click="NoselectAllmember">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		netGetDepTargetlist
	} from '@/api/kehu.js'
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	export default {
		props: {
			optionsTime: {
				type: Array,
				default: []
			},
			optionsDep: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				isChecked: false,
				checkedArr: [], //复选框选中的值

				optionsMoney: [{
						text: '成交金额',
						value: 1
					},
					{
						text: '回款金额',
						value: 2
					}
				],
				valueTime: 0,
				valueDep: 0,
				valueMoney: 0,
				list: [],
				checkBoxChecked: [],
				checkList: [],
				isAll: true,
				BASE_IMG_URL: BASE_IMG_URL,
			}
		},
		onShow() {
		},
		created() {
			this.optionsTime.forEach((ele, index) => {
				if (ele.selected) {
					this.valueTime = index
				}
			})
			this.getList()
		},
		methods: { 
			changeTime(e) {
				this.valueTime = e.detail.value
				this.getList()
			},
			changeDep(e) {
				this.valueDep = e.detail.value
				this.getList()
			},
			changeMoney(e) {
				this.valueMoney = e.detail.value
				this.getList()
			},
			getList() {
				this.isAll = true
				let params = {
					year: this.optionsTime[this.valueTime].name,
					status: this.optionsMoney[this.valueMoney].value,
					department_id: this.optionsDep[this.valueDep].id
				}
				netGetDepTargetlist(params).then(res => {
					this.checkBoxChecked = []
					this.checkList = []
					this.list = res.data
				})
			},
			changeChecked(id) {
				if (this.checkBoxChecked.indexOf(String(id)) != -1) {
					let index = this.checkBoxChecked.indexOf(String(id))
					this.checkBoxChecked.splice(index, 1)
				} else {
					this.checkBoxChecked.push(String(id))
				}
				if (this.checkBoxChecked.length == this.list.length) {
					this.isAll = false
				}
				this.handleSelect()
			},
			handleSelect() {
				let arr = []
				this.checkBoxChecked.forEach(item => {
					this.list.forEach(ele => {
						if (item == ele.id) {
							arr.push(ele)
						}
					})
				})
				this.checkList = arr
			},
			//全选
			selectAllmember() {
				let arr = []
				this.list.forEach(ele => {
					arr.push(String(ele.id))
				})
				this.checkBoxChecked = arr
				this.isAll = false
				this.handleSelect()
			},
			//取消
			NoselectAllmember() {
				this.isAll = true
				this.checkBoxChecked = []
				this.handleSelect()
			},
			//确定、
			sureSet() {
				uni.setStorageSync('isSave', false)
				let type = 3
				let list = this.checkList
				if (list.length == 0) {
					uni.showToast({
						title: '请选择数据',
						icon: 'none'
					})
					return
				}
				let yearid = this.optionsTime[this.valueTime].id
				let year = this.optionsTime[this.valueTime].name
				let status = this.optionsMoney[this.valueMoney].value
				uni.setStorageSync('member', list)
				uni.navigateTo({
					url: '/pagesA/crm/salesTarget/setPerfGoal/setPerfGoal?type=' + type + '&year=' + year +
						'&status=' + status + '&yearid=' + yearid
				})
			}
		}
	}
</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;
			}
		}
	}

	.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;
					border-radius: 50%;
				}
			}

			.item_name {
				line-height: 40rpx;
				width: 350rpx;

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

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

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

	.bottom_select {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background-color: #fff;
		height: 120rpx;
		border-top: 1rpx solid #CCC;

		.bottom_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			height: 120rpx;
		}

		.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>
