<template>
	<div class="g_pt_10">
		<div class="g_bg_f">
			<!-- <u-tabs bg-color="transparent" from="index" :list="tabInfo.list" :is-scroll="true" :current="tabInfo.active" bar-width="120" item-width="50vw" active-color="#3578f6" bar-height="6" @change="handleUpdateTab" font-size="34" duration="0.05" height="76"></u-tabs> -->
		</div>
		<div class="g_flex_row_between g_pt_10 g_pb_10 g_pr_12">
			<div class="g_flex_row_start g_pl_12 g_pr_10">
				<div @click="setOutDate(6)" :class="dateVal == 6 ? '' : ''" :style="dateVal == 6 ? {color: themeColor} : {}" class="g_cursor_pointer g_mr_20">今日</div>
				<div @click="setOutDate(2)" :class="dateVal == 2 ? '' : ''" :style="dateVal == 2 ? {color: themeColor} : {}" class="g_cursor_pointer g_mr_20">本周</div>
				<div @click="setOutDate(4)" :class="dateVal == 4 ? '' : ''" :style="dateVal == 4 ? {color: themeColor} : {}" class="g_cursor_pointer g_mr_20">本月</div>
				<rh-quickconfirm :dropdownShow="dropdownShow"  @hideDropdown="(e) => (dropdownShow = e)">
					<template v-slot:title>
						<div :class="dateType ? '' : ''" :style="dateType ? {color: themeColor} : {}" @click="showDroundown">{{ dateType || "更多" }}</div>
					</template>
					<template v-slot:content>
						<div :class="dateType == item.name ? 'ysd-base-color' : ''" class="g_border_b_d g_pt_10 g_pb_10 g_text_c" v-for="(item, index) in dateList" :key="index" @click="setDate(item)">{{ item.name }}</div>
					</template>
				</rh-quickconfirm>
			</div>
			<div>
				<rh-quickconfirm :dropdownShow="customDateShow" @hideDropdown="(e) => (customDateShow = e)" width="calc(100vw - 48rpx)">
					<template v-slot:title>
						<div :class="!notCustom ? '' : ''" :style="!notCustom ? {color: themeColor} : {}" @click="customDateShow = true">自定义</div>
					</template>
					<template v-slot:content>
						<div class="g_flex_row_between flex_center dateSelect" hover-class="none" hover-stop-propagation="false">
							<div class="g_flex_row_start">
								<picker mode="date" :value="startTime" :end="notAllowTime" @change="changeDateTime($event, 'start')" style="color: #333">{{ !!startTime ? startTime : "----" }}</picker>
								<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
							</div>
							-
							<div class="afterDate g_flex_row_start">
								<picker mode="date" :value="endTime" :end="notAllowTime" @change="changeDateTime($event, 'end')" style="color: #333">{{ !!endTime ? endTime : "----" }}</picker>
								<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
							</div>
						</div>
					</template>
				</rh-quickconfirm>
			</div>
		</div>
		<div class="g_bg_f g_ml_10 g_mr_10 g_radius_8" v-if="dataList.length > 0">
			<div class="tableTitle g_fw_600 g_fs_12">
				<div class="show_all" style="width: 80px">姓名</div>
				<div class="g_flex_1 g_flex_row_between">
					<div class="dataNum">用户</div>
					<div class="dataNum">活跃</div>
					<div class="dataNum">报名</div>
					<div class="dataNum">约面</div>
					<div class="dataNum">到面</div>
					<div class="dataNum">通过</div>
					<div class="dataNum">入职</div>
					<div class="dataNum">
						在职
						<!-- <i class="t-icon t-icon-zhuyi f14" @click="showToast"></i> -->
					</div>
				</div>
			</div>
			<div class="tableSub g_fs_12">
				<div class="show_all g_pl_10" style="box-sizing: border-box">其他</div>
				<div class="g_text_c g_flex_1">{{ globalData.userNum || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.activeUserNum || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.applyClueNum || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.signUps || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.arrived || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.passed || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.entry || 0 }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.obJob || 0 }}</div>
			</div>
			<div class="tableSub g_fs_12" v-for="(item, index) in dataList" :key="index">
				<div class="g_text_l show_all" style>{{ index * 1 + 1 + " " }}{{ item.aliasName || item.agencyTeamName }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.userNum }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.activeUserNum }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.applyClueNum }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.signUps }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 20)">{{ item.arrived }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 30)">{{ item.passed }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 40)">{{ item.entry }}</div>
				<div class="dataNum" hover-class="thover" @click="toDataDetail(item, 50)">{{ item.obJob }}</div>
			</div>

			<div class="tableSub g_fw_600 g_fs_12">
				<div class="show_all g_pl_12" style="width: 80px; box-sizing: border-box">总计</div>
				<div class="g_text_c g_flex_1">{{ globalData.userNum + totalObj.userNum }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.activeUserNum + totalObj.activeUserNum }}</div>
				<div class="g_text_c g_flex_1">{{ globalData.applyClueNum + totalObj.applyClueNum }}</div>
				<div class="g_text_c g_flex_1">{{ totalObj.signUps }}</div>
				<div class="g_text_c g_flex_1">{{ totalObj.arrived }}</div>
				<div class="g_text_c g_flex_1">{{ totalObj.passed }}</div>
				<div class="g_text_c g_flex_1">{{ totalObj.entry }}</div>
				<div class="g_text_c g_flex_1">{{ totalObj.obJob }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import dayjs from "dayjs";
// import moment from "moment";
export default {
	onLoad() {
		this.getGroupList();
	},
	data() {
		return {
			themeColor: getApp().globalData.themeColor,
			dateVal: 6,
			globalData: {},
			dateType: "",
			dropdownShow: false,
			customDateShow: false,
			startTime: dayjs(new Date()).format("YYYY-MM-DD"),
			endTime: dayjs(new Date()).format("YYYY-MM-DD"),
			notAllowTime: dayjs(new Date()).format("YYYY-MM-DD"),
			sortType: 0,
			notCustom: true, // 是否自定义时间
			groupDataList: [], // 团队原始数据
			dataList: [], // 数据列表
			totalObj: {}, // 数据总计
			dateList: [
				{
					name: "昨日",
					value: 7,
				},
				{
					name: "上周",
					value: 3,
				},
				{
					name: "上月",
					value: 5,
				},
				{
					name: "近7日",
					value: 0,
				},
				{
					name: "近30日",
					value: 1,
				},
			],
			tabInfo: {
				list: [
					{
						name: "全部成员",
						num: 0,
						tip: 0,
						classify: 2,
					},
					{
						name: "团队排序",
						num: 0,
						tip: 1,
						classify: 3,
					},
				],
				active: 0,
			},
			dateList: [
				{
					name: "昨日",
					value: 7,
				},
				{
					name: "上周",
					value: 3,
				},
				{
					name: "上月",
					value: 5,
				},
				{
					name: "近7日",
					value: 0,
				},
				{
					name: "近30日",
					value: 1,
				},
			],
		};
	},
	created() {},
	watch: {
		dropdownShow(nval, oval) {
			console.log(nval, oval);
		},
	},
	methods: {
		handleUpdateTab(e) {
			console.log(e);
			this.tabInfo.active = e;
			this.sortType = e;
			this.getGroupList("all");
		},
		showDroundown() {
			uni.vibrateShort({
				type: "heavy",
				success: function (e) {
					console.log(e);
				},
			});
			this.dropdownShow = !this.dropdownShow;
		},
		setDate(e) {
			let that = this;
			console.log(e);
			uni.vibrateShort({
				type: "heavy",
				success: function (e) {
					console.log(e);
				},
			});
			that.dateList.forEach((item) => {
				if (item.value == e.value) {
					console.log(item.value);
					that.dateType = item.name;
					that.dateVal = item.value;
					that.dropdownShow = false;
					that.notCustom = true;
				}
			});
			that.formatDate(that.dateVal);
		},
		setOutDate(e) {
			console.log(e);
			uni.vibrateShort({
				type: "heavy",
				success: function (e) {
					console.log(e);
				},
			});
			this.dateType = "";
			this.dateVal = e;
			this.notCustom = true;
			this.formatDate(this.dateVal);
		},
		changeDateTime(e, type) {
			console.log(e);
			if (type == "start") {
				this.startTime = e.detail.value;
			} else if (type == "end") {
				this.endTime = e.detail.value;
			}
			let time1 = new Date(this.startTime).getTime();
			let time2 = new Date(this.endTime).getTime();
			console.log(time1);
			console.log(time2);
			if (time1 > time2) {
				uni.showToast({
					duration: 2000,
					title: "结束时间不能早于开始时间",
					mask: true,
					icon: "none",
				});
				return;
			}
			this.dateVal = -1;
			this.notCustom = false;
			this.getGroupList();
		},
		formatDate(tag) {
			let start, end;
			console.log(tag);
			if (tag == 0) {
				start = dayjs().add(-6, "day").format("YYYY-MM-DD");
				end = dayjs().format("YYYY-MM-DD");
			} else if (tag == 1) {
				start = dayjs().add(-29, "day").format("YYYY-MM-DD");
				end = dayjs().format("YYYY-MM-DD");
			} else if (tag == 2) {
				start = dayjs().startOf("week").format("YYYY-MM-DD");
				end = dayjs().format("YYYY-MM-DD");
			} else if (tag == 3) {
				start = dayjs()
					.week(dayjs().week() - 1)
					.startOf("week")
					.format("YYYY-MM-DD");
				end = dayjs()
					.week(dayjs().week() - 1)
					.endOf("week")
					.format("YYYY-MM-DD");
				console.log(start);
				console.log(end);
			} else if (tag == 4) {
				start = dayjs().startOf("month").format("YYYY-MM-DD");
				end = dayjs().format("YYYY-MM-DD");
			} else if (tag == 5) {
				start = dayjs().subtract(1, "month").startOf("month").format("YYYY-MM-DD");
				end = dayjs().subtract(1, "month").endOf("month").format("YYYY-MM-DD");
			} else if (tag == 6) {
				start = dayjs().add(0, "day").format("YYYY-MM-DD");
				end = dayjs().format("YYYY-MM-DD");
			} else if (tag == 7) {
				start = dayjs().subtract(1, "day").format("YYYY-MM-DD");
				end = dayjs().subtract(1, "day").format("YYYY-MM-DD");
			}
			this.startTime = start;
			this.endTime = end;
			console.log(start);
			console.log(end);
			this.getGroupList();
		},
		/**
		 * 获取团队列表
		 */
		getGroupList() {
			let that = this;
			that.G.Post(that.api.merchantManagement_userGlobalData, { start: this.startTime, end: this.endTime }, (res) => {
				console.log(res);
				that.globalData = res.data;
			});
			that.G.Post(that.api.merchantManagement_todayData, { start: this.startTime, end: this.endTime }, (res) => {
				let list = [];
				res.list.forEach((item) => {
					list = list.concat(item.users);
				});

				console.log(list);
				let totalObj = {
					arrived: 0,
					entry: 0,
					obJob: 0,
					passed: 0,
					signUps: 0,
					userNum: 0,
					applyClueNum: 0,
					activeUserNum: 0,
					finshedGPA: 0,
					entryGPA: 0,
				};
				list.forEach((item, index) => {
					console.log(item);
					totalObj.arrived += item.arrived;
					totalObj.entry += item.entry;
					totalObj.obJob += item.obJob;
					totalObj.passed += item.passed;
					totalObj.signUps += item.signUps;
					totalObj.userNum = totalObj.userNum + Number(item.userNum) || 0;
					totalObj.applyClueNum = totalObj.applyClueNum + Number(item.applyClueNum) || 0;
					totalObj.activeUserNum = totalObj.activeUserNum + Number(item.activeUserNum) || 0;
					totalObj.finshedGPA += item.finshedGPA;
					totalObj.entryGPA += item.entryGPA;
					totalObj.index = index + 2;
				});
				that.totalObj = totalObj;
				console.log("totalObj", totalObj);
				let newList = [];
				// list.forEach((item, index) => {
				// 	newList = newList.concat(item.users);
				// 	console.log(item);
				// 	console.log(index);
				// });
				console.log(newList);
				// if (that.sortType != 0) {
				that.dataList = that.G.fullCopy(list);
				if (that.currentGroup) {
					that.selectGroup(that.currentGroup);
				}
				// } else {
				// 	list.sort((a, b) => b.funnel - a.funnel);
				// 	that.dataList = that.G.fullCopy(list);
				// }
				console.log("that.dataList", that.dataList);
				that.groupDataList = that.G.fullCopy(list);

				// that.isspinning = false

				that.groupDataList.forEach((item) => {
					console.log(item);
					item.title = item.agencyTeamName;
				});
				that.groupDataList.unshift({
					title: "全部部门",
					agencyTeamId: 12,
					agencyTeamIdx: 2,
					arrived: 3,
					entry: 1,
					entryGPA: 0.03,
					finshedGPA: 1.86,
					funnel: 3.2,
					obJob: 71,
					packageIdx: 138,
					passed: 2,
					signUps: 8,
				});
			});
		},
		toDataDetail() {},
	},
};
</script>

<style lang="less">
page {
	background: #f5f5f5;
}
.dateSelect {
	display: flex;
	justify-content: space-between;
	padding: 10px 20px;
}
.dateSelect > div {
	width: 147px;
	height: 30px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tableTitle {
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	// padding-right: 24px;
}
.tableSub {
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border-top: 1px solid #f5f5f5;
	/* overflow: hidden; */
	.dataNum {
		/* padding-left: 8px; */
		flex: 1;
		text-align: center;
		// color: #576b95;
		// text-decoration: underline;
	}
}
.show_all {
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
</style>
