<template>
	<Card title="工作一览">
		<div class="schedule-plan">
			<div class="select-right">
				<el-select v-model="selectDay" style="width: 85%" size="small" @change="selectChange">
					<el-option v-for="(item, index) in dayList" :key="index" :label="item.dayType" :value="item.value" />
				</el-select>
			</div>

			<!-- 本月 -->
			<div class="current-month">
				<div class="realtime-data">
					<div class="realtime-box">
						<div class="text">工作总数</div>
						<div class="num">{{ workTotal.workCount || 0 }}</div>
					</div>
					<div class="realtime-box" v-if="tabIndex === 1">
						<div class="text">延迟工作</div>
						<div class="num">{{ workTotal.delayCount || 0 }}</div>
					</div>
					<div class="realtime-box" v-if="tabIndex === 1">
						<div class="text">提前工作</div>
						<div class="num">{{ workTotal.aheadCount || 0 }}</div>
					</div>
				</div>
				<div class="work-state">
					<div v-if="tabIndex === 1" class="state-text" :class="checked == 1 ? 'active' : ''" @click="stateChange(1)">进行中</div>
					<div v-if="tabIndex === 1" class="state-text" :class="checked == 0 ? 'active' : ''" @click="stateChange(0)">未开始</div>
					<div v-if="tabIndex === 1" class="state-text" :class="checked == 2 ? 'active' : ''" @click="stateChange(2)">已完成</div>
				</div>

				<div class="monitor-list">
					<el-scrollbar style="height: 88%">
						<div class="monitor-item" v-for="item in raskList" :key="item.id">
							<div class="item-top">
								<div class="top-title">{{ item.taskName }}</div>
								<div
									class="top-state"
									v-if="item.mergeWarning"
									:style="{ background: formworkOption[item.mergeWarning - 1].color }"
								>
									<div>
										{{ formworkOption[item.mergeWarning - 1].label }}
									</div>
								</div>
							</div>
							<div class="item-bottom">
								<div class="bottom-text" style="width: 60%">计划开始: {{ item.startDate || "" }}</div>
								<div class="bottom-text">实际开始: {{ item.actualStartDate || "" }}</div>
							</div>
							<div class="item-bottom">
								<div class="bottom-text" style="width: 60%">计划结束: {{ item.finishDate || "" }}</div>
								<div class="bottom-text">实际结束: {{ item.actualFinishDate || "" }}</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div>

			<!-- 下月 -->
			<!-- <div class="next-month" v-if="tabIndex === 2">
				<div class="realtime-data">
					<div class="realtime-box">
						<div class="text">工作总数</div>
						<div class="num">{{ workTotal.workCount }}</div>
					</div>
					<div class="realtime-box">
						<div class="text">延迟工作</div>
						<div class="num">{{ workTotal.delayCount }}</div>
					</div>
					<div class="realtime-box">
						<div class="text">提前工作</div>
						<div class="num">{{ workTotal.aheadCount }}</div>
					</div>
				</div>
				<div class="work-state">
					<div class="state-text" :class="checked == 1 ? 'active' : ''" @click="stateChange(1)">进行中</div>
					<div class="state-text" :class="checked == 0 ? 'active' : ''" @click="stateChange(0)">未开始</div>
					<div class="state-text" :class="checked == 2 ? 'active' : ''" @click="stateChange(2)">已完成</div>
				</div>
				<div class="monitor-list">
					<el-scrollbar style="height: 88%">
						<div class="monitor-item" v-for="item in raskList" :key="item.id">
							<div class="item-top">
								<div class="top-title">{{ item.taskName }}</div>
							</div>
							<div class="item-bottom">
								<div class="bottom-text" style="width: 60%">计划开始: {{ item.startDate || "" }}</div>
								<div class="bottom-text">实际开始: {{ item.actualStartDate || "" }}</div>
							</div>
							<div class="item-bottom">
								<div class="bottom-text" style="width: 60%">计划结束: {{ item.finishDate || "" }}</div>
								<div class="bottom-text">实际结束: {{ item.actualFinishDate || "" }}</div>
							</div>
						</div>
					</el-scrollbar>
				</div>
			</div> -->
			<div class="notoDta" v-if="raskList.length === 0">
				<img src="@/assets/images/noData.png" alt="" />
				<p>暂无数据</p>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
import { getCountTaskProgress, getTaskProgressList } from "@/api/modules/schedulePlan";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

let formworkOption = ref([
	{
		value: 1,
		label: "提前",
		color: "#4AC0F3"
	},
	{
		value: 2,
		label: "正常",
		color: "#48DA39"
	},
	{
		value: 3,
		label: "逾期",
		color: "#EC6266"
	}
]);

const nextMonthList = reactive([
	{
		id: 1,
		workTitle: "11层机电预留预埋",
		workType: 0,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 2,
		workTitle: "11层墙柱合模",
		workType: 2,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 3,
		workTitle: "11层顶模及支撑体系安装",
		workType: 1,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 4,
		workTitle: "11层墙柱合模",
		workType: 2,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 5,
		workTitle: "11层墙柱合模",
		workType: 1,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	}
]);

const list = reactive([
	{
		id: 1,
		workTitle: "消防施工",
		workType: 0,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 2,
		workTitle: "通风空调",
		workType: 2,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 3,
		workTitle: "机电安装",
		workType: 1,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 4,
		workTitle: "消防施工",
		workType: 2,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	},
	{
		id: 5,
		workTitle: "消防施工",
		workType: 1,
		planStartTime: "2023.06.08 12:00:00",
		planEndTime: "2023.06.08 12:00:00",
		realStartTime: "2023.06.08 12:00:00",
		realEndTime: "2023.06.08 12:00:00"
	}
]);

let checked = ref(1 as any);
const stateChange = async (e: any) => {
	checked.value = e;
	// await getProjectInfo();
	await getRaskList();
};

// 当前对应的种类
let selectDay = ref(1);
let dayList = ref([
	{
		value: 1,
		dayType: "本月工作一览"
	},
	{
		value: 2,
		dayType: "下月工作一览"
	}
]);
let tabIndex = ref(1 as any);
const selectChange = async (e: any) => {
	if (e === 1) {
		checked.value = 1;
	} else {
		checked.value = "";
	}
	tabIndex.value = e;
	await getProjectInfo();
	await getRaskList();
};

//工作一览（统计）
const workTotal = ref({} as any);
const getProjectInfo = async () => {
	const res: any = await getCountTaskProgress({ projectSn: store.sn, type: tabIndex.value });
	console.log("工作一览（统计）", res);
	workTotal.value = res.result;
};

//列表查询任务进度甘特图信息
const raskList = ref([] as any);
const getRaskList = async () => {
	const res: any = await getTaskProgressList({ projectSn: store.sn, type: tabIndex.value, status: checked.value });
	console.log("列表查询任务进度甘特图信息", res);
	raskList.value = res.result;
};

onMounted(async () => {
	await getProjectInfo();
	await getRaskList();
	// console.log("Mount_type", dialogIndex.value);
});
</script>

<style scoped lang="scss">
.notoDta {
	bottom: 30%;
	width: 50%;
	left: 25%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 37%;
	}
}
:deep(.el-input__wrapper) {
	background: #112d59;
}
:deep(.el-input__inner) {
	color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}
.schedule-plan {
	width: 100%;
	height: 100%;
	position: relative;
	.select-right {
		position: absolute;
		right: 0%;
		width: 30%;
		top: -9%;
		z-index: 9;
	}
	.current-month {
		width: 100%;
		height: 100%;
		.work-state {
			display: flex;
			margin-top: 4%;
			.state-text {
				font-size: 16px;
				color: #fff;
				margin-left: 5%;
				cursor: pointer;
			}
			.active {
				color: #65d7f9;
			}
		}
		.monitor-list {
			width: 100%;
			height: 70%;
			margin-top: 5%;
			.monitor-item {
				width: 94%;
				margin: auto;
				padding-bottom: 2%;
				margin-bottom: 3%;
				background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
				background-size: 100% 100%;
				.item-top {
					display: flex;
					align-items: center;
					padding-top: 3%;
					padding-left: 3%;
					.top-title {
						font-size: 16px;
						color: #fff;
					}
					.top-state {
						padding: 0% 1%;
						font-size: 12px;
						margin-left: 2%;
						color: #fff;
						background: #ec6266;
						border-radius: 2px 2px 2px 2px;
					}
				}
				.item-bottom {
					display: flex;
					// justify-content: space-between;
					margin-left: 3%;
					margin-top: 2%;
					margin-right: 6%;
					.bottom-text {
						font-size: 12px;
						color: #a1accb;
					}
				}
			}
		}
	}

	.next-month {
		width: 100%;
		height: 100%;
		.work-state {
			display: flex;
			margin-top: 4%;
			.state-text {
				font-size: 16px;
				color: #fff;
				margin-left: 5%;
				cursor: pointer;
			}
			.active {
				color: #65d7f9;
			}
		}
		.monitor-list {
			width: 100%;
			height: 70%;
			margin-top: 12%;
			.monitor-item {
				width: 94%;
				margin: auto;
				padding-bottom: 2%;
				margin-bottom: 3%;
				background: url("@/assets/images/concreteMonitor/listBg.png") no-repeat;
				background-size: 100% 100%;
				.item-top {
					display: flex;
					align-items: center;
					padding-top: 3%;
					padding-left: 3%;
					.top-title {
						font-size: 16px;
						color: #fff;
					}
					.top-state {
						padding: 0% 1%;
						font-size: 12px;
						margin-left: 2%;
						color: #fff;
						background: #ec6266;
						border-radius: 2px 2px 2px 2px;
					}
				}
				.item-bottom {
					display: flex;
					// justify-content: space-between;
					margin-left: 3%;
					margin-top: 2%;
					margin-right: 6%;
					.bottom-text {
						font-size: 12px;
						color: #a1accb;
					}
				}
			}
		}
	}
}

.realtime-data {
	width: 100%;
	height: 15%;
	padding-top: 4%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.realtime-box {
		box-sizing: border-box;
		padding: 2% 3%;
		width: 28%;
		height: 100%;
		background: url("@/assets/images/loadometerManage/dataBg.png") no-repeat;
		background-size: 100% 100%;
		.text {
			font-size: calc(100vw * 16 / 1920);
			color: #fff;
		}
		.num {
			margin-top: 5%;
			font-family: PangMenZhengDao-Regular;
			font-weight: bold;
			font-size: 24px;
			color: #65d7f9;
		}
	}
}
</style>
