<template>
	<div>
		<div class="record_date">
			<el-row>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">企业总数</div>
							<div class="text_color"><span>{{tableData.totalUsers ? tableData.totalUsers : 0}}</span>人
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">新增企业</div>
							<div class="text_color"><span>{{tableData.newToday ? tableData.newToday : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">个人总数</div>
							<div class="text_color"><span>{{tableData.newMonth ? tableData.newMonth : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">个人新增总数</div>
							<div class="text_color"><span>{{tableData.newYear ? tableData.newYear : 0}}</span>人</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总充值 </div>
							<div class="text_color">
								<span>{{tableData.totalRevenue ? tableData.totalRevenue : 0}}</span>钻石</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">今日充值</div>
							<div class="text_color">
								<span>{{tableData.todayRevenue ? tableData.todayRevenue : 0 }}</span>钻石</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本月充值 </div>
							<div class="text_color">
								<span>{{tableData.monthRevenue ? tableData.monthRevenue : 0}}</span>钻石</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">本年充值</div>
							<div class="text_color"><span>{{tableData.yearRevenue ? tableData.yearRevenue : 0}}</span>钻石
							</div>
						</div>
					</div>
				</el-col>

			</el-row>
			<div>
				<el-select v-model="flag" style="width:150px;margin-left: 10px;" @change="orderfenxi">
					<el-option v-for="item in flags" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;
				<el-date-picker style="width: 200px;margin-left: 10px;" v-model="info.stockDate" align="right"
					type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间"
					@change="animeOrder">
				</el-date-picker>
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 10px;">
				<el-tab-pane label="数据分析" name="first">
					<el-row>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">简历展示简历数量</div>
									<div class="text_color">
										<span>{{taskStat.awaitResumesCount ? taskStat.awaitResumesCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">简历隐藏简历数量</div>
									<div class="text_color">
										<span>{{taskStat.entryResumesCount ? taskStat.entryResumesCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待审核简历数量</div>
									<div class="text_color">
										<span>{{taskStat.auditResumesCount ? taskStat.auditResumesCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总简历数量</div>
									<div class="text_color">
										<span>{{taskStat.resumesCount ? taskStat.resumesCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待推送项目数量</div>
									<div class="text_color">
										<span>{{taskStat.entryResumesCount ? taskStat.entryResumesCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">已推送项目数量</div>
									<div class="text_color">
										<span>{{taskStat.entryPostPushCount ? taskStat.entryPostPushCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">待审核项目数量</div>
									<div class="text_color">
										<span>{{taskStat.auditPostPushCount ? taskStat.auditPostPushCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
						<el-col :span="6" class="cards">
							<div class="box">
								<div class="box_num">
									<div class="box_color">总项目数量</div>
									<div class="text_color">
										<span>{{taskStat.postPushCount ? taskStat.postPushCount : 0}}</span>单</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
				<!-- <el-tab-pane label="服务收入分析" name="fourth">
					<el-table v-loading="tableDataLoading" :data="tableData2.list">
						<el-table-column prop="orderId" label="编号">
						</el-table-column>
						<el-table-column prop="nickName1" label="用户名">
							<template slot-scope="scope">
								<span style="color: #4f9dec;cursor: pointer;"
									@click="updates1(scope.row)">{{scope.row.userName ? scope.row.userName : 'null'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="payMoney" label="支付金额">
						</el-table-column>
						<el-table-column prop="money" label="派单人金额">
						</el-table-column>
						<el-table-column prop="profit" label="平台收入">
							<template slot-scope="scope">
								{{ parseFloat(scope.row.payMoney-scope.row.money).toFixed(2)}}
							</template>
						</el-table-column>
						<el-table-column prop="createTime" label="创建时间">
						</el-table-column>
					</el-table>
					<div style="text-align: center;margin-top: 10px;float:right">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:page-sizes="[5, 10, 15, 20]" :page-size="limit" :current-page="page"
							layout="total,sizes, prev, pager, next,jumper" :total="tableData2.totalCount">
						</el-pagination>
					</div>
				</el-tab-pane> -->
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 5,
				page: 1,
				tableData: {},
				tableData2: {
					list: [],
					totalCount: 0
				},
				colonelData: [],
				commodityData: [],
				userjfData: [],
				incomeData: [],
				activeName: 'first',
				tableDataLoading: true,
				flag: 1,
				usersumData: {},
				taskStat: {},
				data: '',
				time: '',
				platform: '',
				type: '',
				balance: -1,
				flag: 1,
				info: {
					stockDate: this.getNowTime(), //日期
				},
				flags: [{
					value: 1,
					label: '按天查询'
				}, {
					value: 2,
					label: '按月查询'
				}, {
					value: 3,
					label: '按年查询'
				}],
			}
		},
		mounted() {
			// this.colonel()
			this.taskData()
			this._getData() //用户统计
			// this.incomeSelect()//收入
		},
		methods: {
			// 详情跳转
			updates(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId
					}
				})
			},
			updates1(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId1
					}
				})
			},
			updates2(row) {
				this.$router.push({
					path: '/userDetail',
					query: {
						userId: row.userId2
					}
				})
			},
			handleSizeChange(val) {
				this.limit = val;
				this.colonel();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.colonel();
			},
			// 用户分析选择日期
			animeDat() {
				this._getData()
			},
			// 订单分析选择日期
			animeOrder() {
				this.taskData()
				this.colonel()
			},
			// 订单分析年月日
			orderfenxi(value) {
				let vanumber = value
				if (vanumber === 1) {
					this.flag = 1
					this.taskData()
					// this.colonel()
				}
				if (vanumber === 2) {
					this.flag = 2
					this.taskData()
					// this.colonel()
				}
				if (vanumber === 3) {
					this.flag = 3
					this.taskData()
					// this.colonel()
				}
			},
			// Tabs点击事件
			handleClick(tab, event) {
				if (tab._props.label == '服务分析') {
					this.taskData()
				}
				if (tab._props.label == '服务收入分析') {
					this.colonel()
				}
			},
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
				var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
				var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
				return defaultDate;
				this.$set(this.info, "stockDate", defaultDate);
			},
			// 用户统计
			_getData() {
				this.$http({
					url: this.$http.adornUrl('user/homeMessage'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						let returnData = data.data;
						this.tableData = returnData
					}

				})
			},
			//服务分析
			taskData() {
				this.$http({
					url: this.$http.adornUrl('resumes/selectDataStatistics'),
					method: 'get',
					params: this.$http.adornParams({
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					let returnData = data.data;
					this.taskStat = returnData
				})
			},
			// 服务收入分析
			colonel() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('orderTaking/incomeAnalysis'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'limit': this.limit,
						'time': this.info.stockDate,
						'flag': this.flag,
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					if (data.code == 0) {
						let returnData = data.data
						this.tableData2 = returnData
					}
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		padding: 44px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}

	.box_num {
		font-size: 14px;
		color: #66b1ff;
	}

	.box_num .box_color {
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.box_num div span {
		font-size: 20px;
		margin-left: 5px;
	}

	.text_color {
		color: #4f9dec;
	}

	.text_color span {
		margin-right: 5px;
	}
</style>
