<template>
	<view>
		<view class="page-top">
			<u-navbar title="个人中心" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
			</u-navbar>
			<view class="search-bar">
				<u--input placeholder="请输入项目名称" prefixIcon="search" prefixIconStyle="font-size: 32px;color: #909399">
				</u--input>
			</view>

			<u-tabs :list="tabList" itemStyle="width:18%;height:80rpx" activeStyle="color:white"
				inactiveStyle="color:white"></u-tabs>
		</view>
		<view class="sized-box" style="height: 248rpx;"></view>
		<view class="sized-box" style="height:var(--status-bar-height);"></view>
		<view class="filter-bar">
			<view class="filter-item">
				<text>时间</text>
				<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
			</view>
			<view class="filter-item">
				<text>金额</text>
				<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
			</view>
			<view class="filter-item">
				<text>级别</text>
				<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
			</view>
			<view class="filter-item">
				<text>筛选</text>
				<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
			</view>
		</view>

		<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
			<u-swipe-action-item :options="options">
				<view class="project-item" @tap="goDetail">
					<view class="project-status"
						:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
						<text>{{statusDict[item.status].name}}</text>
					</view>
					<text>{{item.name}}</text>
					<view class="project-desc">

						<view class="project-desc-item">
							<text class="project-desc-key">
								建设性质
							</text>
							<text class="project-desc-value">
								{{item.type}}
							</text>
						</view>
						<view class="project-desc-item" style="text-align: end;">
							<text class="project-desc-key">
								施工单位
							</text>
							<text class="project-desc-value">
								{{item.unit}}
							</text>
						</view>
						<view class="project-desc-item">
							<text class="project-desc-key">
								监理单位
							</text>
							<text class="project-desc-value">
								{{item.supervisorUnit}}
							</text>
						</view>
						<view class="project-desc-item" style="text-align: end;">
							<text class="project-desc-key">
								总面积
							</text>
							<text class="project-desc-value">
								{{item.area}}平方
							</text>
						</view>
						<view class="project-desc-item">
							<text class="project-desc-key">
								总投资
							</text>
							<text class="project-desc-value">
								{{item.invest}}万元
							</text>
						</view>
						<view class="project-desc-item" style="text-align: end;">
							<text class="project-desc-key">
								建设性质
							</text>
							<text class="project-desc-value">
								{{item.responsible}}
							</text>
						</view>
						<view class="divider"></view>
						<!-- <divider></divider> -->
						<view class="project-desc-item">
							<text class="project-desc-key">
								项目编号
							</text>
							<text class="project-desc-value">
								{{item.id}}
							</text>
						</view>
						<view class="project-desc-item" style="text-align: end;">
							<text class="project-desc-key">
								立项时间
							</text>
							<text class="project-desc-value">
								{{item.createTime}}
							</text>
						</view>
					</view>
				</view>

				<!-- </navigator> -->
			</u-swipe-action-item>
		</u-swipe-action>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusDict: {
					0: {
						name: '已立项',
						color1: '#39DAAA',
						color2: '#02C489'
					},
					1: {
						name: '进行中',
						color1: '#FD934E',
						color2: '#FF7442'
					},
					2: {
						name: '已完成',
						color1: '#39DAAA',
						color2: '#02C489'
					}
				},
				options: [{
						text: '编辑',
						style: {
							backgroundColor: '#e99d42'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#f56c6c'
						}
					}
				],
				tabList: [{
						name: '全部'
					},
					{
						name: '已立项'
					},
					{
						name: '进行中'
					},
					{
						name: '已验收'
					},
				],
				projectList: [{
						name: '六院信息化项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e13werwr313",
						createTime: '2022-02-32'
					},
					{
						name: '工棚改造项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e1rwerw748313",
						createTime: '2022-02-32'
					},
					{
						name: '工棚改造项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e13wrw77587err",
						createTime: '2022-02-32'
					},
					{
						name: '工棚改造项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e13wrw643542err",
						createTime: '2022-02-32'
					},
					{
						name: '工棚改造项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e1335626wrwerr",
						createTime: '2022-02-32'
					},
					{
						name: '工棚改造项目',
						type: '商用',
						unit: '内蒙航天建工集团',
						supervisorUnit: '建华监理单位',
						area: 1500,
						invest: 200,
						status: 0, //0:已立项, 1:进行中, 2:已完成
						responsible: '郝昊',
						id: "0e312313wrwerr",
						createTime: '2022-02-32'
					}
				]
			}
		},
		methods: {
			goDetail() {
				console.log('跳转')
				uni.navigateTo({
					url: '/pages/project_supervision/project_detail/project_detail',
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.page-top {
		width: 100%;
		z-index: 9999;
		position: fixed;
		background: linear-gradient(to top right, #496df6, #2e9ee8);
	}

	.search-bar {
		margin: 0 32rpx 0;
		height: 80rpx;

		.u-input {
			height: 48rpx;
			background-color: white;
		}
	}

	.filter-bar {
		height: 80rpx;
		padding: 0 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.filter-item {
			display: flex;

			text {
				color: #8F959E;
				// margin-right: 8rpx;
			}
		}
	}

	.scroll-y {
		height: 100%;
		overflow-y: scroll;
	}

	.swiper-item {
		margin: 0rpx 16rpx 0rpx;
	}

	.swiper-item:not(:last-child) {
		margin-bottom: 20rpx;
	}

	.project-item {
		position: relative;
		background-color: white;

		padding: 28rpx 20rpx 28rpx;
		border-radius: 8rpx;

		.project-status {
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 112rpx;
			height: 48rpx;
			background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
			border-radius: 0 8rpx 0 32rpx;

			text {
				font-size: 12rpx;
				color: #fff;
			}
		}

		.project-desc {
			display: flex;
			flex-wrap: wrap;

			.project-desc-item {
				width: 50%;

				.project-desc-key {
					color: #8F959E;
					font-size: 24rpx;
				}

				.project-desc-value {
					margin-left: 8rpx;
					color: #333;
					font-size: 24rpx;
				}
			}

			.divider {
				margin: 15rpx 0 15rpx;
				width: 100%;
				height: 3rpx;
				background-color: #f2f2f2;
			}

		}

	}
</style>
