<template>
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				计划列表
				<view class="headerBack" @click="returnBack">
					<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
				</view>
			</view>
		</headers>
		<view class="list-search">
			<u-search v-model="beamNumSearch" input-align="left" height="70" :action-style="searchStyle"
				@custom="searchBeamSection" placeholder="搜索梁号名称"></u-search>
		</view>
		<view class="plan-list">
			<view class="list-item" v-for="item in planList" :key="item.id">
				<view class="item-detail">
					<view class="text-title">
						梁号：
					</view>
					<view class="text-detail">
						{{ item.beamNo }}
					</view>
				</view>
				<view class="item-detail">
					<view class="text-title">
						所属桥段:
					</view>
					<view class="text-detail">
						{{ item.bridgeSectionName }}
					</view>
				</view>
				<view class="item-detail">
					<view class="text-title">
						梁板类型:
					</view>
					<view class="text-detail">
						{{ item.beamAndPlateType }}
					</view>
				</view>
				<view class="diliver-line">

				</view>
				<view class="item-tool">
					<view class="edit-btn">
						编辑
					</view>
					<view class="delete-btn">
						删除
					</view>
				</view>
				<view class="item-state">
					未开始
				</view>
				<view class="open-detail" @click="openDetail(item)">
					查看详情
				</view>
			</view>
		</view>
		<view class="addMakeBeam" @click="toAddPlanTask">
			新增计划
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				beamSectionId: "", // 桥段ID
				beamNumSearch: "",
				searchStyle: {
					position: "absolute",
					display: "flex",
					alignItems: "center",
					justifyContent: "center",
					right: "13%",
					width: "90rpx",
					height: "40rpx",
					color: "#fff",
					fontSize: "23rpx",
					background: "#5181F6",
					borderRadius: "35px 35px 35px 35px",
				},
				planList: [],
				saveBeamList: [],
				makeBeamList: [],
				projectDetail: {},
			};
		},
		onLoad(e) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			if (e) {
				console.log("跳转携带参数", e)
				this.beamSectionId = e.detailId
			}
			this.getSectionList()
		},
		onShow() {
			if (this.beamSectionId != '') {
				this.getSectionList()
			}
		},
		methods: {
			openDetail(item) {
				uni.navigateTo({
					url: "/pages/projectEnd/smartBeamField/planTaskDetail?smartBeamFieldBridgeSectionId=" + item.id
				})
			},
			toAddPlanTask() {
				uni.navigateTo({
					url: "/pages/projectEnd/smartBeamField/addPlanTask?smartBeamFieldBridgeSectionId=" + this.beamSectionId
				})
			},
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			searchBeamSection(e) {
				console.log("搜索梁号", e)
			},
			//获取计划列表
			getSectionList() {
				this.sendRequest({
					url: "xmgl/smartBeamFieldBeam/list",
					data: {
						projectSn: this.projectDetail.projectSn,
						beamNo: this.beamNumSearch,
						smartBeamFieldBridgeSectionId: this.beamSectionId
					},
					method: "get",
					success: res => {
						console.log("获取计划列表", res, this.planList)
						this.planList = res.result
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.list-search {
		padding: 0 40rpx;
		margin-top: 30rpx;
	}

	.plan-list {
		padding-bottom: 100rpx;
		.list-item {
			width: 688rpx;
			height: 315rpx;
			padding: 0rpx 22rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 0 19rpx 0px #E6E6E6;
			border-radius: 19rpx;
			position: relative;

			.item-detail {
				display: flex;
				padding-top: 30rpx;

				.text-title {
					width: 150rpx;
					font-size: 27rpx;
					font-family: Advent Pro, Advent Pro;
					color: #8C8C8C;
				}

				.text-detail {
					font-size: 27rpx;
					font-family: Advent Pro, Advent Pro;
					color: #595959;
				}
			}

			.diliver-line {
				margin-top: 20rpx;
				border-bottom: 2px solid #E7E7E7;
			}

			.item-tool {
				display: flex;
				position: absolute;
				left: 30rpx;
				bottom: 30rpx;

				.edit-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 77rpx;
					height: 40rpx;
					cursor: pointer;
					color: #5680FA;
					font-size: 20rpx;
					background: rgba(86, 128, 250, 0.1);
					border-radius: 8rpx;
				}

				.delete-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 77rpx;
					height: 40rpx;
					cursor: pointer;
					color: #EA3941;
					font-size: 20rpx;
					margin-left: 24rpx;
					background: rgba(234, 57, 65, 0.1);
					border-radius: 8rpx;
				}
			}

			.item-state {
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 110rpx;
				height: 40rpx;
				font-size: 20rpx;
				color: #F09657;
				background: #fef5ee;
				border-radius: 58rpx;
			}

			.open-detail {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 40rpx;
				font-family: Advent Pro, Advent Pro;
				position: absolute;
				right: 30rpx;
				bottom: 30rpx;
				font-size: 20rpx;
				color: #fff;
				background: #5680FA;
				border-radius: 8rpx;
			}
		}
	}
	.addMakeBeam {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 20rpx;
		width: 665rpx;
		height: 69rpx;
		color: #FFFFFF;
		font-size: 27rpx;
		margin-left: 40rpx;
		background: #5181F6;
		border-radius: 142rpx;
	}
</style>