<template>
	<view class="page" :class="{'h5-pc-page': isH5}" style="background-image: url(../../../packageRc/static/pageBg.png);">
    <scroll-view :scroll-y="true" style="height: 100vh;position: relative;z-index: 1;" :show-scrollbar="false">
      <view class="input-outer-part"
        style="padding: 24rpx 32rpx 0;max-height: unset;">
        <view class="basic-info-content-main" v-if="!loading">
					<view class="part-item" style="padding-top: 20rpx;">
						<view style="display: flex" class="top-line">
							<view
								class="left"
							>
								<image src="/packageRc/static/cyzc.png" />
							</view>
							<view class="right">
								<view class="title-line">{{ policyDetail.zcmc }}</view>
							</view>
						</view>
						<view class="tags">
							<view class="tag">政策级别：{{ policyDetail.zcLevel }}</view>
						</view>
						<view class="infos">
							<view class="info">发文单位：{{ policyDetail.sourceUnit }}</view>
							<view class="info">发布时间：{{ policyDetail.publishTime || '--' }}</view>
							<view class="info">浏览量：{{ policyDetail.viewNum || 0 }}</view>
						</view>
					</view>
          <view class="main-ceontent-list">
            <!-- 人才政策 -->
            <view>
              <view
                class="main-ceontent-list-item"
                v-if="policyDetail.applicableObjects"
              >
                <view :class="['main-ceontent-list-item-title', isPc ? 'pc-main-ceontent-list-item-title' : '']">政策对象</view>
                <view :class="['main-ceontent-list-item-content', isPc ? 'pc-main-ceontent-list-item-content' : '']">
                  <span
                    v-if="policyDetail.applicableObjects"
                    v-html="policyDetail.applicableObjects"
                  ></span>
                  <span v-else> -- </span>
                </view>
              </view>
              <view
                class="main-ceontent-list-item"
                v-if="policyDetail.policyExplanation"
              >
                <view class="main-ceontent-list-item-title">政策说明</view>
                <view class="main-ceontent-list-item-content">
                  <span
                    v-if="policyDetail.policyExplanation"
                    v-html="policyDetail.policyExplanation"
                  ></span>
                  <span v-else> -- </span>
                </view>
              </view>
              <view
                class="main-ceontent-list-item"
                v-if="policyDetail.applyCondition"
              >
                <view class="main-ceontent-list-item-title">申报条件</view>
                <view class="main-ceontent-list-item-content">
                  <span
                    v-if="policyDetail.applyCondition"
                    v-html="policyDetail.applyCondition"
                  ></span>
                  <span v-else> -- </span>
                </view>
              </view>
              <view class="main-ceontent-list-item">
                <view class="main-ceontent-list-item-title">政策内容</view>
                <view class="main-ceontent-list-item-content">
                  <span v-if="policyDetail.zczc" v-html="policyDetail.zczc"></span>
                  <span v-else> -- </span>
                </view>
              </view>
            </view>
            <view class="main-ceontent-list-item" >
              <view class="main-ceontent-list-item-title">补贴标准</view>
              <view class="main-ceontent-list-item-content">
                <span v-if="policyDetail.btbz" v-html="policyDetail.btbz"></span>
                <span v-else> -- </span>
              </view>
            </view>

            <view class="main-ceontent-list-item" >
              <view class="main-ceontent-list-item-title">经办渠道</view>
              <view class="main-ceontent-list-item-content">
                <span v-if="policyDetail.jbqd" v-html="policyDetail.jbqd"></span>
                <span v-else> -- </span>
              </view>
            </view>
          </view>
				</view>
      </view>
    </scroll-view>
	</view>
</template>
<script>
import { getPolicyDetail } from "@/packageRc/apiRc/policy";
	export default {
		data() {
			return {
        policyDetail: {},
				loading: false,
				isH5: false,
				isPc: false,
			}
		},
		onLoad(options) {
			// #ifdef H5
			this.isH5 = true;
			this.isPc = true;
			// #endif
      this.getPolicy(options.id);
		},
		onShow() {
		},
		methods: {
			getPolicy(id) {
        getPolicyDetail({id}).then(res => {
          this.policyDetail = res.data
        // }).finally(err => {
				// 	console.log(342324)
        //   // #ifdef H5 || APP-PLUS
        //   // 仅在测试环境下，注入大段文本验证排版
        //   this.policyDetail = {
        //     zcmc: '【条件编译测试】支持高校毕业生在本地创业就业的若干激励措施(接口失败模拟)',
        //     zcLevel: '省级重点',
        //     sourceUnit: '人社测试局',
        //     publishTime: '2026-03-10',
        //     viewNum: 9999,
        //     applicableObjects: '1. 本市户籍的高校毕业生；<br/>2. 创业青年群体。',
        //     policyExplanation: '本政策旨在吸引更多高素质人才留在本市发展。',
        //     applyCondition: '具有全日制本科及以上学历且毕业在5年内。',
        //     zczc: '最高50万元奖励，办公场地免租3年。',
        //     btbz: '本科5000元/月，硕士10000元/月，连续发放3年。',
        //     jbqd: '政务中心2楼窗口、线上小程序入口。'
        //   }
        //   // #endif
        })
			},
			getDictLabel(value, list) {
				if (list) {
					let arr = list.filter(ele => ele.dictValue == value)
					if (arr.length) {
						return arr[0].dictLabel
					} else {
						return '--'
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
	.page {
		background-color: #f4f4f4 !important;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

  
.basic-info-content-main {
	margin: 0 auto;
	box-sizing: border-box;
}
	.part-item{
		background: #fff;
		border-radius: 16rpx;
		padding: 40rpx 32rpx;
		margin-bottom: 32rpx;
	}

	.top-line {
		display: flex;
		margin-bottom: 24rpx;
		align-items: center;
		.left {
			margin-right: 24rpx;
			width: 86rpx;
			color: #fff;
			font-size: 22rpx;
			height: 86rpx;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 100%;
				height: 100%;
			}
			.text {
				text-align: center;
			}
		}
		.right {
			width: calc(100% - 110rpx);
			.title-line {
				font-size: 32rpx;
				font-weight: bold;
				color: #3d3d3d;
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.infos{
		margin-top: 16rpx;
		font-size: 24rpx;
		.info{
			margin-top: 5rpx;
			color: #3D3D3D;
		}
	}
	.part-title{
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 32rpx;
	}
	.part-info{
		font-size: 28rpx;
	}
	.part-inline{
		margin-bottom: 32rpx;
		display: flex;
		.part-title{
			width: 180rpx;
			text-align: right;
			margin-bottom: 0;
		}
		.part-info{
			margin-left: 20rpx;
			flex-grow: 1;
			flex-shrink: 1;
		}
	}
	.notice-list {
		.notice-item {
			background-color: #fff;
			color: #333;
			// box-shadow: 0 0 10px #e4e4e4;
		}

		.title {
			font-size: 36rpx;
			text-align: center;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.from-title {
			font-size: 24rpx;
			color: #a9b4c3;
			text-align: center;
		}

		.notice-content {
			min-height: 800rpx;
			font-size: 24rpx;
			text-align: justify;
			padding-top: 20rpx;
			border-top: 1rpx solid #d8d8d8;
			margin-top: 14rpx;
		}
	}

	.enclosure-list {
		margin: 30rpx 0;
		padding: 0 40rpx;

		.enclosure-item {
			font-size: 24rpx;
			color: #006cd9;
		}
	}



.main-ceontent-list {
  width: 100%;
  border-radius: 4px;
  min-height: 80rpx;
  padding: 32rpx;
  margin-top: 24rpx;
  background-color: #fff;
  box-sizing: border-box;

  .main-ceontent-list-top {
    font-family: Alimama ShuHeiTi;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
  }

  .main-ceontent-list-title {
    font-family: Source Han Sans;
    font-size: 28rpx;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    font-feature-settings: "kern" on;
    color: #3d3d3d;
    margin-top: 24rpx;
  }
}

.main-ceontent-list-item {
  margin-bottom: 24rpx;

  .main-ceontent-list-item-title {
    font-family: Source Han Sans;
    font-size: 28rpx;
    font-weight: bold;
    line-height: 40rpx;
    letter-spacing: 0.04em;
    margin-bottom: 16rpx;

    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #055ed9;
  }

  .main-ceontent-list-item-content {
    flex-direction: column;
    box-sizing: border-box;
    padding: 10px;
    gap: 10px;
    font-family: Source Han Sans;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 40rpx;
    letter-spacing: 0.04em;

    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #000000;
    background: linear-gradient(
      270deg,
      rgba(222, 233, 245, 0.32) 0%,
      #dee9f5 100%
    );
  }
}

/* #ifdef H5 */
.h5-pc-page {
	width: 100% !important;

	.input-outer-part {
		width: 80% !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.title-line {
		font-size: 24px !important;
    font-weight: 600;
    line-height: 1.4 !important;
	}
	.infos {
		font-size: 20px !important;
    line-height: 1.8 !important;
    .info {
      margin-top: 10rpx !important;
    }
	}
	.main-ceontent-list-item-title {
		font-size: 24px !important;
    font-weight: 600;
		line-height: 1.6 !important;
    margin-bottom: 24rpx !important;
	}
	.main-ceontent-list-item-content {
		font-size: 20px !important;
		line-height: 1.6 !important;
    padding: 24rpx !important;
	}
	.tag {
		font-size: 20px !important;
	}
  .main-ceontent-list-title {
    font-size: 24px !important;
    font-weight: 600 !important;
  }
  .part-title {
    font-size: 24px !important;
    font-weight: 600 !important;
  }
  .part-info {
    font-size: 20px !important;
  }
  .notice-list .title {
    font-size: 24px !important;
    font-weight: 600 !important;
  }
  .notice-content {
    font-size: 20px !important;
  }
  .enclosure-item {
    font-size: 20px !important;
  }
}
/* #endif */
</style>
