<template>
	<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
    <scroll-view :scroll-y="true" style="height: 100vh;position: relative;z-index: 1;">
      <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.acceptingUnit }}</view>
							<view class="info">发布时间：{{ policyDetail.publishTime || '--' }}</view>
							<view class="info">浏览次数：{{ policyDetail.viewNum }}</view>
						</view>
					</view>
          <view class="main-ceontent-list">
            <!-- 人才政策 -->
            <view v-if="policyDetail.zcsylx == '1'">
              <view
                class="main-ceontent-list-item"
                v-if="policyDetail.applicableObjects"
              >
                <view class="main-ceontent-list-item-title">政策对象</view>
                <view class="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" v-if="policyDetail.zczc">
                <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 class="main-ceontent-list-item" v-if="policyDetail.validity">
                <view class="main-ceontent-list-item-title">政策申报时间</view>
                <view class="main-ceontent-list-item-content">
                  {{ policyDetail.validity || "--" }}
                </view>
              </view>
            </view>

            <view class="main-ceontent-list-item" v-if="policyDetail.zcsylx == '2'">
              <view class="main-ceontent-list-item-title">政策文件</view>
              <view class="main-ceontent-list-item-content">
                <span v-if="policyDetail.zcwj" v-html="policyDetail.zcwj"></span>
                <span v-else> -- </span>
              </view>
            </view>

            <view class="main-ceontent-list-item" v-if="policyDetail.zcsylx == '2'">
              <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" v-if="policyDetail.zcsylx == '2'">
              <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 class="main-ceontent-list-item" v-if="policyDetail.zcsylx == '2'">
              <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>

          <!-- 社保政策 -->
          <view class="main-ceontent-list" v-if="policyDetail.zcsylx == '3'">
            <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">
            <view class="main-ceontent-list-item" v-if="policyDetail.sourceUnit">
              <view class="main-ceontent-list-item-title">发文单位</view>
              <view class="main-ceontent-list-item-content">
                {{ policyDetail.sourceUnit || "--" }}
              </view>
            </view>
            <view class="main-ceontent-list-item" v-if="policyDetail.publishTime">
              <view class="main-ceontent-list-item-title">发文时间</view>
              <view class="main-ceontent-list-item-content">
                {{ policyDetail.publishTime || "--" }}
              </view>
            </view>
            <view class="main-ceontent-list-item" v-if="policyDetail.acceptingUnit">
              <view class="main-ceontent-list-item-title">受理单位</view>
              <view class="main-ceontent-list-item-content">
                {{ policyDetail.acceptingUnit || "--" }}
              </view>
            </view>
            <view class="main-ceontent-list-item" v-if="policyDetail.phone">
              <view class="main-ceontent-list-item-title">咨询电话</view>
              <view class="main-ceontent-list-item-content">
                <span v-if="policyDetail.phone" v-html="policyDetail.phone"></span>
                <span v-else> -- </span>
              </view>
            </view>
          </view>
          <view
            class="main-ceontent-list"
            v-if="
              policyDetail.applyGuide && policyDetail.zcsylx == '2' && policyDetail.sqcl
            "
          >
            <view class="main-ceontent-list-item" v-if="policyDetail.applyGuide">
              <view class="main-ceontent-list-item-title">申报指南</view>
              <view class="main-ceontent-list-item-content">
                <span
                  v-if="policyDetail.applyGuide"
                  v-html="policyDetail.applyGuide"
                ></span>
                <span v-else> -- </span>
              </view>
            </view>
            <!-- <view
              class="main-ceontent-list-item"
              v-if="policyDetail.zcsylx == '1' && policyDetail.practicable"
            >
              <view class="main-ceontent-list-item-title">申报流程</view>
              <view class="main-ceontent-list-item-content">
                {{ policyDetail.practicable || "--" }}
              </view>
            </view> -->
            <view class="main-ceontent-list-item" v-if="policyDetail.zcsylx == '2'">
              <view class="main-ceontent-list-item-title">申请材料</view>
              <view class="main-ceontent-list-item-content">
                <span v-if="policyDetail.sqcl" v-html="policyDetail.sqcl"></span>
                <span v-else> -- </span>
              </view>
            </view>
          </view>
          <!-- <view class="main-ceontent-list" v-if="policyDetail.fileList">
          <view class="main-ceontent-list-item">
            <view class="main-ceontent-list-item-title">文件列表</view>
            <view class="main-ceontent-list-item-content">
              <el-table
                ref="fileTable"
                v-loading="fileTableLoading"
                :data="fileTableData"
                highlight-current-row
                style="width: 100%"
                header-row-class-name="header_class"
                border
              >
                <el-table-column
                  label="序号"
                  type="index"
                  align="center"
                  width="100"
                />
                <el-table-column
                  prop="fileName"
                  label="文件名称"
                  align="center"
                  show-overflow-tooltip=""
                >
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      @click="downLoadFile(scope.row)"
                    >
                      {{ scope.row.fileName }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operation"
                  label="操作"
                  align="center"
                  width="200"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <el-button
                      type="primary"
                      link
                      @click.stop="downLoadFile(scope.row)"
                    >
                      下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </view>
          </view>
        </view> -->
				</view>
      </view>
    </scroll-view>
	</view>
</template>
<script>
import { getPolicyDetail } from "@/apiRc/policy";
	export default {
		data() {
			return {
        policyDetail: {},
				loading: false,
			}
		},
		onLoad(options) {
      this.getPolicy(options.id);
		},
		onShow() {
		},
		methods: {
			getPolicy(id) {
        getPolicyDetail({id}).then(res => {
          this.policyDetail = res.data
        })
			},
			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>
	.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%
    );
  }
}
</style>
