<template>
  <AppLayout title="" :use-scroll-view="false">
    <template #headerleft>
      <view class="btnback">
        <image src="@/static/icon/back.png" @click="navBack"></image>
      </view>
    </template>
    <template #headerright>
      <view class="btn mar_ri10">
        <image
          src="@/static/icon/collect3.png"
          v-if="!companyInfo.isCollection"
        ></image>
        <image src="@/static/icon/collect2.png" v-else></image>
      </view>
    </template>
    <view class="content">
      <view class="content-top">
        <view class="companyinfo-left">
          <image src="@/static/icon/companyIcon.png" mode=""></image>
        </view>
        <view class="companyinfo-right">
          <view class="row1">{{ companyInfo?.companyName }}</view>
          <view class="row2">
            {{ companyInfo?.scale }}
          </view>
        </view>
      </view>
      <view class="conetent-info" :class="{ expanded: isExpanded }">
        <view class="info-title">公司介绍</view>
        <view class="info-desirption">{{
          companyInfo.companyIntroduction
        }}</view>
        <!-- <view class="info-title title2">公司地址</view>
                <view class="locationCompany"></view> -->
      </view>
      <view class="expand" @click="expand">
        <text>{{ isExpanded ? "收起" : "展开" }}</text>
        <image
          class="expand-img"
          :class="{ 'expand-img-active': !isExpanded }"
          src="@/static/icon/downs.png"
        ></image>
      </view>
      <scroll-view scroll-y class="Detailscroll-view">
        <view class="views">
          <view class="Detail-title"><text class="title">在招职位</text></view>
          <template v-if="companyInfo.jobInfoList.length != 0">
            <view v-for="job in companyInfo.jobInfoList" :key="job.id">
              <!-- @click="navTo(`/packageA/pages/post/post?jobId=${JSON.stringify(job)}`)" -->
              <view class="cards" :style="getItemBackgroundStyle('bj2.png')">
                <view class="card-company">
                  <text class="company">{{ job.jobTitle }}</text>
                  <view class="salary"> ￥{{ job.salaryRange }}/月 </view>
                </view>
                <view class="card-tags">
                  <view class="tag jy">
									  <image :src="`${baseUrl}/jobfair/jy.png`" mode=""></image>
                    {{ job.experienceRequirement }}
                  </view>
                  <view class="tag xl">
									<image :src="`${baseUrl}/jobfair/xx.png`" mode=""></image>
                    {{ job.educationRequirement }}
                  </view>
                  <view class="tag yd" v-if="job.jobRequirement">
									<image :src="`${baseUrl}/jobfair/lx-1.png`" mode=""></image>
                    {{ job.jobRequirement }}
                  </view>
                </view>
                <view class="card-companyName">
									<image :src="`${baseUrl}/jobfair/hd.png`" mode=""></image>
                  {{ job.jobDescription }}
                  </view>

              </view>
            </view>
          </template>
          <empty v-else pdTop="200"></empty>
        </view>
      </scroll-view>
    </view>
  </AppLayout>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import dictLabel from "@/components/dict-Label/dict-Label.vue";
import config from "@/config.js";
import { storeToRefs } from "pinia";
import useLocationStore from "@/stores/useLocationStore";
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, vacanciesTo, navBack } = inject("globalFunction");
const isExpanded = ref(false);
const pageState = reactive({
  page: 0,
  list: [],
  total: 0,
  maxPage: 1,
  pageSize: 10,
});
const companyInfo = ref({
  jobInfoList: [],
});

const baseUrl = config.imgBaseUrl;
const getItemBackgroundStyle = (imageName) => ({
  backgroundImage: `url(${baseUrl}/jobfair/${imageName})`,
  backgroundSize: "100% 100%", // 覆盖整个容器
  backgroundPosition: "center", // 居中
  backgroundRepeat: "no-repeat",
});

onLoad((options) => {
  companyInfo.value = JSON.parse(options.job);
  console.log(companyInfo.value, "companyInfo.value");
});

function expand() {
  isExpanded.value = !isExpanded.value;
}
</script>

<style lang="stylus" scoped>
.btnback {
  width: 64rpx;
  height: 64rpx;
}

.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 52rpx;
  height: 52rpx;
}

image {
  height: 100%;
  width: 100%;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-top {
    padding: 28rpx;
    padding-top: 50rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    .companyinfo-left {
      width: 96rpx;
      height: 96rpx;
      margin-right: 24rpx;
    }

    .companyinfo-right {
      .row1 {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }

      .row2 {
        font-weight: 400;
        font-size: 28rpx;
        color: #6C7282;
        line-height: 45rpx;
      }
    }
  }

  .conetent-info {
    padding: 0 28rpx;
    overflow: hidden;
    max-height: 0rpx;
    transition: max-height 0.3s ease;

    .info-title {
      font-weight: 600;
      font-size: 28rpx;
      color: #000000;
    }

    .info-desirption {
      margin-top: 12rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #495265;
      text-align: justified;
    }

    .title2 {
      margin-top: 48rpx;
    }
  }

  .expanded {
    max-height: 1000rpx; // 足够显示完整内容
  }

  .expand {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    margin-top: 20rpx;
    margin-bottom: 28rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #256BFA;

    .expand-img {
      width: 40rpx;
      height: 40rpx;
    }

    .expand-img-active {
      transform: rotate(180deg);
    }
  }
}

.Detailscroll-view {
  flex: 1;
  overflow: hidden;
  background: #F4F4F4;

  .views {
    padding: 28rpx;

    .Detail-title {
      font-weight: 600;
      font-size: 32rpx;
      color: #000000;
      position: relative;
      display: flex;
      justify-content: space-between;

      .title {
        position: relative;
        z-index: 2;
      }
    }

    .Detail-title::before {
      position: absolute;
      content: '';
      left: -14rpx;
      bottom: 0;
      height: 16rpx;
      width: 108rpx;
      background: linear-gradient(to right, #CBDEFF, #FFFFFF);
      border-radius: 8rpx;
      z-index: 1;
    }

    .cards {
      padding: 32rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.04);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 22rpx;
      padding-bottom: 18rpx;

      .card-company {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .company {
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;
        }

        .salary {
          font-weight: 600;
          font-size: 28rpx;
          color: #F83A3C;
          white-space: nowrap;
          line-height: 48rpx;
        }
      }

      .card-companyName {
        font-weight: 400;
        font-size: 28rpx;
        color: #fff;
        margin-top: 23rpx;
        display: flex;
        align-items: center;
        image{
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }

      .card-tags {
        display: flex;
        flex-wrap: wrap;
          margin: 25rpx 0 35rpx;
          image{
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
        .jy {
          background: #D9EDFF;
          color: #0086FF;
        }

        .xl {
          background: #FFF1D5;
          color: #FF7F01;
        }
        .yd {
          background: #FFD8D8;
          color: #F83A3C;
        }

        .tag {
          width: fit-content;
          height: 30rpx;
          border-radius: 4rpx;
          padding: 6rpx 20rpx;
          line-height: 30rpx;
          font-weight: 400;
          font-size: 24rpx;
          text-align: center;
          white-space: nowrap;
          margin-right: 20rpx;
          display: flex;
          align-items: center;
        }
      }

      .card-bottom {
        margin-top: 32rpx;
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #6C7282;
      }
    }
  }
}
</style>
