<template>
	<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
		<view class="input-outer-part"
			style="padding: 24rpx 32rpx 0;max-height: unset;">
			<view class="search-line">
				<input style="width: 100%;" placeholder="请输入政策名称进行搜索" v-model="queryParams.searchValue" border="none" />
				<img src="https://rc.jinan.gov.cn/qcwjyH5/static/images/person/search.png" class="search-icon" @click="search()" />
			</view>
			<view v-if="total" style="position: relative;padding: 32rpx 0;color: #000;">
			<!-- <view v-if="total" style="position: relative;padding-bottom: 16px;color: #000;"> -->
				<text>共 {{ total }} 条</text>
			</view>
			<!-- <scroll-view :scroll-y="true" style="height: calc(100vh - 342rpx);position: relative;z-index: 1;" -->
			<scroll-view :scroll-y="true" style="height: calc(100vh - 232rpx);position: relative;z-index: 1;"
				@scrolltolower="getBottomList">
        <view style="margin-bottom: 24rpx;border-radius: 16rpx;" class="policy-list" v-for="(item, index) in tableData" :key="index" @click="goPolicyDetail(item)">
          <view class="title">
            <image src="../../../packageRc/static/zcLeft.png"/>
            {{item.zcmc}}</view>
          <view class="infos">
            <view v-if="item.zcLevel">{{item.zcLevel}}</view>
            <view v-if="item.sourceUnit">{{item.sourceUnit}}</view>
          </view>
          <view class="bottom-line">
            <view><uni-icons color="#A2A2A2" type="info" size="12"></uni-icons>发文日期：{{item.publishTime}}</view>
          </view>
        </view>
				<view style="padding-bottom: 24rpx;">
					<img v-if="!total&&!loading" src="https://rc.jinan.gov.cn/qcwjyH5/static/images/person/empty.png"
						style="width: 100%;display: block;margin: 0 auto;" />
					<view v-if="loading"><u-loading-icon></u-loading-icon>
						<view style="text-align: center;color: #8E8E8E;font-size: 24rpx;">加载中~</view>
					</view>
					<view v-else-if="showMorePage" style="text-align: center;color: #1A62CE;font-size: 24rpx;">加载更多
					</view>
					<view style="text-align: center;color: #8E8E8E;font-size: 24rpx;" v-else>没有更多数据了~</view>
				</view>  
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import PopupList from "/packageRc/components/PopupLists.vue";
import { getPolicyList } from "@/packageRc/apiRc/policy";
	export default {
		components: {
			PopupList,
		},
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				total: 0,
				showMorePage: true,
				tableData: [],
				loading: false,
			}
		},
		onLoad(options) {
			this.queryParams.zclx = options.zclx
		},
		onShow() {
			this.search();
		},
		methods: {
			goPolicyDetail(item) {
				uni.navigateTo({
					url: `/packageRc/pages/policy/policyDetail?id=${item.id}`
				})
			},
			search() {
				this.showMorePage = true;
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 20;
				this.tableData = [];
				this.total = 0;
				this.getList();
			},
			// 触底加载
			getBottomList() {
				if (
					this.queryParams.pageNum * this.queryParams.pageSize >=
					this.total
				) {
					this.showMorePage = false;
				} else if (
					this.queryParams.pageNum * this.queryParams.pageSize <
					this.total
				) {
					this.queryParams.pageNum++;
					this.getList();
					if (
						this.queryParams.pageNum * this.queryParams.pageSize >=
						this.total
					) {
						this.showMorePage = false;
					}
				}
			},
			// 获取列表
			async getList() {
				this.loading = true;
        getPolicyList(this.queryParams).then((res) => {
          this.gettedData(res)
        });
			},
			gettedData(res) {
				if (res.code == 200) {
					if (res.rows.length < 10) {
						this.showMorePage = false;
					}
					this.loading = false;
					this.tableData = this.tableData.concat(res.rows);
					this.total = res.total;
				} else {
					this.loading = false;
					uni.showToast({
						title: res.msg,
						icon: "none",
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f4f4f4 !important;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.search-line {
		border-radius: 32px;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #107AFD;
		height: 64rpx;
		border-radius: 32rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;
		margin-top: 24rpx;

		.search-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.job-item {
		position: relative;
		margin-bottom: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		.item_btn{
			height: 100rpx;
			border-top: 1px solid #e3e8ee;
		}
		.line{
			position: absolute;
			right: 50%;
			bottom: 20rpx;
			width: 1px;
			height: 60rpx;
			background-color: #e3e8ee;
		}
		.status-card {
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 0 16rpx 0 16rpx;
			width: 160rpx;
			line-height: 40rpx;
			text-align: center;
			color: #fff;
			background: #B2C0D1;
			border: 1px solid #9BA9B9;
			font-size: 24rpx;

			&.in {
				background: #29D297;
				border: 1px solid #1BBA83;
			}

			&.out {
				background: #ECB83D;
				border: 1px solid #D7892B;
			}

			&.far {
				background: #EC7737;
				border: 1px solid #C24F1A;
			}
		}

		.top-container {
			padding: 32rpx;

			// margin-bottom: 24rpx;
			.title-line {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 16rpx;

				.type-tag {
					line-height: 40rpx;
					width: 128rpx;
					font-size: 24rpx;
					color: #fff;
					text-align: center;

					&.qz {
						background: #28CB5E;
					}

					&.yz {
						background: #DD6728;
					}

					&.cy {
						background: #23B5C5;
					}

					&.px {
						background: #DDA728;
					}

					&.qt {
						background: #2870DD;
					}
				}

				.title {
					color: #3D3D3D;
					width: calc(100% - 137rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: 40rpx;
				}

				.salary {
					width: 33%;
					color: #FA6553;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: right
				}
			}

			.info {
				color: #3D3D3D;
				margin-bottom: 7rpx;
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				text {
					color: #8E8E8E;
				}

				.not {
					color: #EC7737;
					font-weight: bold;
				}

				.ing {
					color: #ECB83D;
					font-weight: bold;
				}

				.finish {
					color: #21C88D;
					font-weight: bold;
				}
			}
		}

		.function-btn {
			color: #BF5818;
			border-top: 1px solid #E2E8EF;
			padding-bottom: 6rpx;
			line-height: 90rpx;
			text-align: center;
		}
	}

	.self-form {
		padding: 32rpx;

		.bordered {
			border: 1rpx solid #dadbde;
			padding: 9px;
			border-radius: 4px;
		}
	}

	.button-area {
		padding: 24rpx 32rpx 68rpx;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		border-radius: 16px 16px 0px 0px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

		.btn {
			line-height: 72rpx;
			width: 176rpx;
			margin-right: 16rpx;
			font-size: 28rpx;
			border: 1px solid #B8C5D4;
			color: #282828;
			text-align: center;
			border-radius: 8rpx;
		}

		.reset {
			background: #DCE2E9;
		}

		.save {
			background: linear-gradient(103deg, #1D64CF 0%, #1590D4 99%);
			color: #fff;
			border: 0;
			flex-grow: 1;
		}
	}

	.noValue {
		color: rgb(192, 196, 204);
	}

	.addNeeds {
		position: fixed;
		right: 0;
		bottom: 150rpx;
		width: 150rpx;
		overflow: hidden;
		z-index: 10;
		border-radius: 44rpx;
		border-radius: 75rpx;

		img {
			display: block;
			width: 100%;
		}
	}
	
	.df_flex{
		display: flex;
		view{
			flex-grow: 1;
			text-align: center;
			color: #4c6efb;
		}
}
.df_flex_1{
	flex: 1;
}
.df__direction_column {
	flex-direction: column;
}
.df_align_center{
	align-items: center;
}
.df_justify_center{
	justify-content: center;
}
.df_content_between{
	justify-content: space-between;
}
.df_shrink_0{
	flex-shrink: 0;
}

/* 日期选择器样式 */
.date-picker-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24rpx;
  height: 64rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

// .date-picker-wrapper.noValue {
//   background-color: #f9f9f9;
// }

.date-value {
  color: #333;
  width: 100%
}

.policy-list{
  width: 100%;
  margin: 0 auto;
  color: #333333;
  border-radius: 24rpx;
  background: #FFFFFF;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-sizing: border-box;
  position: relative;
  .sign{
    position: absolute;
    font-size: 24rpx;
    right: 0;
    top: 0;
    padding: 4rpx 14rpx;
    border: 1rpx solid #EC4827;
    background: rgba(227, 79, 49, 0.09);
    border-top-right-radius: 24rpx;
    border-bottom-left-radius: 24rpx;
    color: #EC4827;
  }
  .top-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-bottom: 16rpx;
    .salary{
      font-size: 32rpx;
      color: #4C6EFB;
      font-weight: bold;
    }
  }
  .title{
    font-size: 32rpx;
    font-weight: bold;
    color: #282828;
    margin-bottom: 16rpx;
    display: flex;
    image{
      width: 46rpx;
      height: 46rpx;
      margin-right: 11rpx;
    }
  }
  .infos{
    display: flex;
    flex-wrap: wrap;
    font-size: 24rpx;
    margin-bottom: 16rpx;
    line-height: 42rpx;
    view{
      padding: 0 16rpx;
      margin-right: 10rpx;
      background: #F2F2F2;
    }
  }
  .bottom-line{
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #A2A2A2;
    margin-top: 12rpx;
  }
}
</style>
