<template>
	<view>
		<view class="cu-form-group " >
			<view style="width: 21%;">
			</view>
			<view >
				2021 年
			</view>
			<button class="cu-btn bg-green shadow">上一年</button>
		</view>
		<view  style="padding: 10upx;">
			<view style="margin: 10upx auto;"
				class="bg-red flex solid-bottom padding justify-start text-white text-center">
				<view class="text-header" style="width:15%">
					<text>日期</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>目标业绩</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>实际业绩</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>差额</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>达成率</text>
				</view>
			</view>
			<view v-if="targetList.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class=" light flex justify-start text-black text-center text-main"
				style="padding-left: 10upx;" v-for="(item,index) in  targetList" :key='index'>
				<view class="text-header" style="width:15%">
					<text>{{item.date}}</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>{{item.mbMoney}}</text>
				</view>
				<view class="text-header" style="width:20%">
					<text>{{item.sjMoney}}</text>
				</view>
				<view class="text-header " style="width:20%;">
					<text>{{item.difference}}</text>
				</view>
				<view class="text-header " style="width:20%;">
					<text>{{item.ratio}}</text>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				targetList: [{
						date: "2021-01",
						mbMoney: 40000,
						sjMoney: 48500,
						difference: "超额8500",
						ratio: "121.25%"
					},
					{
						date: "2021-02",
						mbMoney: 15000,
						sjMoney: 14500,
						difference: "500",
						ratio: "96.67%"
					},
					{
						date: "2021-03",
						mbMoney: 50000,
						sjMoney: 52150,
						difference: "超额2150",
						ratio: "104.30%"
					},
					{
						date: "2021-04",
						mbMoney: 50000,
						sjMoney: 45600,
						difference: "4400",
						ratio: "91.20%"
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.text-main {
		font-size: 28upx;
		height: 80upx;
		width: 100%;
		line-height: 80upx;
		margin-top: 15upx;
		color: #000000;
		border-bottom: #e6e6e6 1upx solid;
		text-align: center;
	}
</style>
