<template>
  <AppLayout :title="title" :show-bg-image="false">
    <view class="main-list" :style="getBackgroundStyle('k.png')">
      <view class="list-top">
        <view class="list-title">
          <text>岗位推荐列表</text>
          <view class="title-line" style="left: 70rpx"></view>
        </view>
      </view>
      <view class="jobListBox">
        <view class="item" v-for="(job, index) in list" :key="index">
          <view class="falls-card">
            <view class="falls-card-pay">
              <view class="pay-text">
                <Salary-Expectation
                  :max-salary="job.maxSalary"
                  :min-salary="job.minSalary"
                  :is-month="true"
                ></Salary-Expectation>
              </view>
              <image
                v-if="job.isHot"
                class="flame"
                src="/static/icon/flame.png"
              ></image>
            </view>
            <view class="falls-card-title">{{ job.jobTitle }}</view>
            <view class="fl_box fl_warp">
              <view class="falls-card-education mar_ri10" v-if="job.education">
                <dict-Label
                  dictType="education"
                  :value="job.education"
                ></dict-Label>
              </view>
              <view class="falls-card-experience" v-if="job.experience">
                <dict-Label
                  dictType="experience"
                  :value="job.experience"
                ></dict-Label>
              </view>
            </view>
            <view class="falls-card-company">
              {{ config.appInfo.areaName }}
              <dict-Label
                dictType="area"
                :value="job.jobLocationAreaCode"
              ></dict-Label>
            </view>
            <view class="falls-card-pepleNumber">
              <view>
                <image class="point2" src="/static/icon/pintDate.png"></image>
                <view class="fl_1">
                  {{ job.postingDate || "发布日期" }}
                </view>
              </view>
              <view>
                <image
                  class="point3"
                  src="/static/icon/pointpeople.png"
                ></image>
                <view class="fl_1">
                  {{ vacanciesTo(job.vacancies) }}
                </view>
              </view>
            </view>
            <view class="falls-card-company2">
              <image class="point3" src="/static/icon/point3.png"></image>
              <view class="fl_1">
                {{ job.companyName }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="main-list" :style="getBackgroundStyle('k.png')">
      <view class="list-top">
        <view class="list-title">
          <text>政策推荐列表</text>
          <view class="title-line" style="left: 70rpx"></view>
        </view>
      </view>
      <view
        style="margin-bottom: 24rpx; border-radius: 16rpx"
        class="policy-list"
        v-for="(item, index) in policyList"
        :key="index"
        @click="goPolicyDetail(item)"
      >
        <view class="sign">推荐</view>
        <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.createTime }}</view
          >
          <view>
            <!-- 浏览数<text style="color: #6aa7e8">{{ item.viewNum }}</text> -->
          </view>
        </view>
      </view>
    </view>
  </AppLayout>
</template>

<script setup>
import { inject, ref, reactive, onMounted } from "vue";
const { $api, navTo, navBack, vacanciesTo } = inject("globalFunction");
import config from "@/config.js";
import { getPolicyList } from "@/packageB/apiRc/policy/index.js";
import AppLayout from "@/components/AppLayout/AppLayout.vue";
import dictLabel from "@/components/dict-Label/dict-Label.vue";
const title = ref("");
const baseUrl = config.imgBaseUrl;
const list = ref([]);
const getBackgroundStyle = (imageName) => ({
  backgroundImage: `url(${baseUrl}/dispatch/${imageName})`,
  backgroundSize: "cover", // 覆盖整个容器
  backgroundPosition: "center", // 居中
  backgroundRepeat: "no-repeat",
});
onMounted(() => {
  getJobRecommend();
  getPolicyData();
});
function getJobRecommend() {
  $api
    .createRequest(
      "/cms/job/recommend",
      { pageSize: 8 },
      "GET",
      false,
      {},
      false
    )
    .then((resData) => {
      if (resData.code == 200) {
        list.value = resData.data
      }
    });
}
const policyList = ref([]);
function getPolicyData() {
  getPolicyList({ pageNum: 1, pageSize: 8 }).then((res) => {
    if(res.code == 200){
      policyList.value = res.rows;
    }
  });
}

function goPolicyDetail(item) {
  uni.navigateTo({
    url: `/packageRc/pages/policy/policyDetail?id=${item.id}`
  });
}
</script>

<style lang="scss" scoped>
.main-list {
  background-color: #ffffff;
  padding: 20rpx 25rpx 28rpx 25rpx;
  margin: 30rpx 30rpx;
  box-shadow: 0px 3px 20px 0px rgba(0, 105, 234, 0.1);
  border-radius: 12px;
}

.list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-title {
  font-weight: bold;
  font-size: 36rpx;
  color: #404040;
  position: relative;
}

.title-line {
  position: absolute;
  bottom: -10rpx;
  left: 36rpx;
  width: 70rpx;
  height: 8rpx;
  background: linear-gradient(90deg, #ffad58 0%, #ff7a5b 100%);
  border-radius: 4rpx;
}

.jobListBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 28rpx;
  margin-top: 10rpx;
}

.item {
  width: 48%;
  position: relative;
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);

  .falls-card {
    padding: 30rpx;

    .falls-card-title {
      font-family: "PingFangSC-Medium", "PingFang SC", "Helvetica Neue",
        Helvetica, Arial, "Microsoft YaHei", sans-serif;
      color: #606060;
      text-align: left;
      word-break: break-all;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      margin-top: 10rpx;
    }

    .falls-card-pay {
      // height: 50rpx;
      word-break: break-all;
      color: #002979;
      text-align: left;
      display: flex;
      align-items: end;
      position: relative;

      .pay-text {
        font-family: DIN-Medium;
        color: #4c6efb;
        padding-right: 10rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #4c6efb;
        line-height: 45rpx;
        text-align: left;
      }

      .flame {
        position: absolute;
        bottom: 0;
        right: -10rpx;
        transform: translate(0, -30%);
        width: 24rpx;
        height: 31rpx;
      }
    }

    .falls-card-education,
    .falls-card-experience {
      width: fit-content;
      height: 30rpx;
      background: #f4f4f4;
      border-radius: 4rpx;
      padding: 6rpx 20rpx;
      line-height: 30rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #6c7282;
      text-align: center;
      margin-top: 20rpx;
      white-space: nowrap;
    }

    .falls-card-company,
    .falls-card-pepleNumber {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #999999;
      line-height: 25rpx;
      text-align: left;
    }

    .falls-card-pepleNumber {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 10rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 46rpx;

      view {
        display: flex;
        align-items: center;
        white-space: nowrap;

        .point2 {
          margin: 0rpx 6rpx 0 2rpx;
          height: 22rpx;
          width: 22rpx;
        }

        .point3 {
          margin: 0rpx 4rpx 0 0;
          height: 28rpx;
          width: 28rpx;
        }
      }
    }

    .falls-card-matchingrate {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 21rpx;
      color: #4778ec;
      text-align: left;
    }

    .falls-card-company2 {
      margin-top: 4rpx;
      font-size: 24rpx;
      color: #999999;
      text-align: left;
      display: flex;

      .point3 {
        margin: 4rpx 4rpx 0 0;
        height: 26rpx;
        width: 26rpx;
      }
    }
  }
}

.policy-list {
  width: 100%;
  margin: 0 auto;
  color: #333333;
  border-radius: 24rpx;
  background: #ffffff;
  padding: 28rpx 22rpx;
  margin-top: 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>