<template>
	<view>
		<view class="top">
			<view class="top_left">
				<image src="../../static/images/my/date.png" mode="" style="margin-right: 20rpx;"></image>
				<view class="top_left_1">
					<picker mode="date" :value="startTime" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="top_right">
				<view :class="is_have==0?'top_right_itrm is_have':'top_right_itrm' " @click="is_have_fun(0)">
					按人员
				</view>
				<view :class="is_have==1?'top_right_itrm is_have':'top_right_itrm' " @click="is_have_fun(1)">
					按车辆
				</view>
				<view :class="is_have==2?'top_right_itrm is_have':'top_right_itrm' " @click="is_have_fun(2)">
					按项目
				</view>
				<view :class="is_have==3?'top_right_itrm is_have':'top_right_itrm' " @click="is_have_fun(3)">
					按客户
				</view>
			</view>
		</view>
		<scroll-view class="bottom" scroll-y>
			<!-- 按人员 -->
			<view v-show="is_have==0">
				<uni-table border stripe emptyText="暂无更多数据">
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center" width="20rpx">姓名</uni-th>
				        <uni-th align="center">派单量</uni-th>
				        <uni-th align="center">接单量</uni-th>
						<uni-th align="center">完单量</uni-th>
						<uni-th align="center">服务评价</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
				    <uni-tr v-for="item in data_list" :key="item.userId">
				        <uni-td align="center">{{item.userName}}</uni-td>
				        <uni-td align="center">{{item.assignCount}}</uni-td>
				        <uni-td align="center">{{item.receiveCount}}</uni-td>
				        <uni-td align="center">{{item.completeCount}}</uni-td>
				        <uni-td align="center">{{item.evaluation}}</uni-td>
				    </uni-tr>
				</uni-table>
			</view>
			<!-- 按车辆 -->
			<view v-show="is_have==1">
				<uni-table border stripe emptyText="暂无更多数据">
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center" width="20rpx">车辆编号</uni-th>
				        <uni-th align="center">派单量</uni-th>
				        <uni-th align="center">接单量</uni-th>
						<uni-th align="center">完单量</uni-th>
						<uni-th align="center">服务评价</uni-th>
				    </uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in data_list" :key="item.vehicleId">
						<uni-td align="center">{{item.vehicleCode}}</uni-td>
						<uni-td align="center">{{item.assignCount}}</uni-td>
						<uni-td align="center">{{item.receiveCount}}</uni-td>
						<uni-td align="center">{{item.completeCount}}</uni-td>
						<uni-td align="center">{{item.evaluation}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<!-- 按项目 -->
			<view v-show="is_have==2">
				<uni-table border stripe emptyText="暂无更多数据">
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center" >项目名称</uni-th>
				        <uni-th align="center" width="60">报单量</uni-th>
						<uni-th align="center" width="60">完单量</uni-th>
						<uni-th align="center" width="80">服务评价</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
					<uni-tr v-for="item in data_list" :key="item.projectId">
						<uni-td align="center">{{item.projectName}}</uni-td>
						<uni-td align="center">{{item.assignCount}}</uni-td>
						<uni-td align="center">{{item.completeCount}}</uni-td>
						<uni-td align="center">{{item.evaluation}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<!-- 按客户 -->
			<view v-show="is_have==3">
				<uni-table border stripe emptyText="暂无更多数据">
				    <!-- 表头行 -->
				    <uni-tr>
				        <uni-th align="center" width="20rpx" >施工单位</uni-th>
				        <uni-th align="center" width="20rpx">项目名称</uni-th>
				        <uni-th align="center" width="60">报单量</uni-th>
						<uni-th align="center" width="60">完单量</uni-th>
						<uni-th align="center" width="80">服务评价</uni-th>
				    </uni-tr>
				    <!-- 表格数据行 -->
					<block v-for="(item,index) in data_list" :key="index">
						<uni-tr>
							<uni-td align="center">{{item.constructionName}}</uni-td>
							<uni-td align="center"></uni-td>
							<uni-td align="center">{{item.assignCount}}</uni-td>
							<uni-td align="center">{{item.completeCount}}</uni-td>
							<uni-td align="center">{{item.evaluation}}</uni-td>
						</uni-tr>
						<block v-for="(val,idx) in item.projects" :key="idx">
							<uni-tr>
								<uni-td align="center"></uni-td>
								<uni-td align="center">{{val.projectName}}</uni-td>
								<uni-td align="center">{{val.assignCount}}</uni-td>
								<uni-td align="center">{{val.completeCount}}</uni-td>
								<uni-td align="center">{{val.evaluation}}</uni-td>
							</uni-tr>
						</block>
					</block>
				</uni-table>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	const {
		urlList,
		https
	} = require('@/static/api');
	export default {
		data() {
			return {
				// 日期
				startDate:'1999-05',
				endDate:new Date(),
				date:'',
				startTime:'',
				endTime:'',
				is_have:0,
				data_list:[''],
			};
		},
		onLoad() {
			var year=new Date().getFullYear();
			var methods=new Date().getMonth()+1;
			if(methods<10){
				methods='0'+methods
			};
			var endday =new Date(year,methods,0).getDate();
			this.date=year+"-"+methods;
			this.startTime=year+"-"+methods+"-01";
			this.endTime=year+"-"+methods+"-"+endday;
			this.get_list();
		},
		methods: {
			is_have_fun(index){
				if(this.is_have==index){
					return
				};
				this.is_have=index;
				this.get_list();
			},
			bindDateChange(e){
				this.date=e.detail.value;
				this.startTime=this.date+"-01";
				var year=new Date(this.startTime).getFullYear();
				var methods=new Date(this.startTime).getMonth()+1;
				var endday =new Date(year,methods,0).getDate();
				this.endTime=this.date+"-"+endday;
				this.get_list();
			},
			get_list() {
				let url = '';
				switch (this.is_have){
					case 0:
						url = urlList.statistics_employee
						break;
					case 1:
						url = urlList.statistics_vehicle
						break;
					case 2:
						url = urlList.statistics_project
						break;
					case 3:
						url = urlList.statistics_construction
						break;
				};
				let data = {
					startTime:this.startTime,
					endTime:this.endTime,
				};
				https(url, 'GET', data, '').then(res => {
					console.log(res)
					if(this.is_have == 3){
						this.data_list=res.data
					}else{
						this.data_list=res.data.items
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
	
	
	
</script>
<style lang="scss">
.top {
	background:#3476fe ;
	color: white;
	display: flex;
	align-items:center;
	font-size: 28rpx;
	box-sizing: border-box;
	height: 80rpx;
     .top_left {
	  	display: flex;
		align-items:center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		.top_left_1{

		}

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

  .top_right {
	  	display: flex;
		align-items:center;
		flex: 1;
		color: #76c9f2;
    .top_right_itrm {
		flex: 1;
		text-align: center;
    }
	.is_have{
		color: white;
	}
  }
}
.bottom{
	height: calc(100vh - 80rpx);
	box-sizing: border-box;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>