<template>
	<view class="achieve-warp">
		<view class="select-warp">
			<view class="select-title">业绩统计</view>
			<picker mode="date" fields="month" @change="changeDataTime">
				<view class="form_right">
					<view>{{dataTime ? dataTime : '点击选择'}}</view>
					<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg"  mode="scaleToFill"></image>
				</view>
			</picker>
		</view>
		<view class="ment-warp">
			<view class="ment-list">
				<view class="title">新增线索</view>
				<view class="number">{{achievementObj.leads}}</view>
			</view>
			<view class="ment-list">
				<view class="title">新增客户</view>
				<view class="number">{{achievementObj.customer}}</view>
			</view>
			<view class="ment-list">
				<view class="title">新增联系人</view>
				<view class="number">{{achievementObj.contacts}}</view>
			</view>
			<view class="ment-list">
				<view class="title">新增跟进记录</view>
				<view class="number">{{achievementObj.record}}</view>
			</view>
			<view class="ment-list">
				<view class="title">新增合同</view>
				<view class="number">{{achievementObj.contract}}</view>
			</view>
			<view class="ment-list">
				<view class="title">新增回款次数</view>
				<view class="number">{{achievementObj.receivables}}</view>
			</view>
			<view class="ment-list">
				<view class="title">业绩目标</view>
				<view class="number">{{achievementObj.contractAchievement}}</view>
			</view>
			<view class="ment-list">
				<view class="title">完成金额</view>
				<view class="number">{{achievementObj.contract_money}}</view>
			</view>
			<view class="ment-list">
				<view class="title">回款目标</view>
				<view class="number">{{achievementObj.receivablesAchievement}}</view>
			</view>
			<view class="ment-list">
				<view class="title">完成金额</view>
				<view class="number">{{achievementObj.receivables_money}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	export default{
		props:{
			id:{
				type:Number,
				default:null
			},
			dataTime:{
				type:String,
				default:''
			},
			achievementObj:{
				type:Object,
				default:null
			}
		},
		data(){
			return{
				BASE_IMG_URL:BASE_IMG_URL,
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		created() {
			
		},
		methods:{
			// 选择时间  2021-05
			changeDataTime(e) {
				let dataTime = e.detail.value
				this.$emit('changeDate',dataTime)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.achieve-warp{
		width:702rpx;
		background:#fff;
		border-radius: 10rpx;
		margin:20rpx 24rpx;
	}
	.select-warp{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24rpx;
		.form_right{
			width:147rpx;
			height:80rpx;
			background:#fff;
			border-radius: 15rpx;
			font-size:24rpx;
			color:#333;
			text-align: center;
			line-height: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.bottomimg{
				width:20rpx;
				height:33rpx;
				margin-left:20rpx;
			}
		}
	}
	.ment-warp{
		margin:0 auto;
		width:662rpx;
		background:#fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.ment-list{
			width:281rpx;
			background:#f5f5f5;
			border-radius: 5rpx;
			padding:20rpx;
			margin-right:20rpx;
			margin-bottom:20rpx;
			&:nth-child(2n){
				margin-right:0;
			}
			.title{
				font-size:26rpx;
				color:#666;
			}
			.number{
				font-size:26rpx;
				color:#333;
				font-weight: bold;
			}
		}
	}
</style>
