<template>
  <div v-loading="loading" class="home-container">
    <div style="position: relative; width: 100%">
      <img
        :src="baseURL + '/' + homeData?.HbData?.[0].FPOSTERPICTURE"
        height="480"
        style="width: 100%"
      />
      <div class="img-ct banner">
        <div>深圳市南山区公共就业服务平台</div>
        <div>
          深圳市南山区公共就业服务平台为当地的就业困难人员、高校毕业生以及外来务工人员等提供了全方位、多渠道的公共就业创业服务。平台通过各种方式，如招聘活动、职业培训、就业指导等，帮助对应人群找到适合自己的工作或者创业机会。
        </div>
      </div>
    </div>
    <div class="container">
      <div class="home-tp flx-direction-column">
        <div class="n-title">公共就业服务政策</div>
        <div class="flx-justify-between policy-bottom">
          <policy title="南山就业政策公告" :list="homeData?.GgData" @change="handleChange" />
          <policy title="南山就业活动" :list="homeData?.HdData" @change="handleChange" />
        </div>
      </div>
      <div class="home-tp">
        <div class="n-title">街道办招聘</div>
        <div class="recruit">
          <div
            v-for="(item, index) in homeData?.JdData"
            :key="index"
            class="recruit-item"
            @click="toStreet(item)"
          >
            <img :src="baseURL + '/' + item.FSTREETPICTURE" width="318" height="130" />
            <div class="recruit-item-detail">{{ item.FNAME }}</div>
          </div>
        </div>
      </div>

      <div class="flx-justify-between policy-bottom">
        <div class="employment-training">
          <div class="n-title">灵活就业</div>
          <div class="employment">
            <div
              v-for="(item, index) in employmentList"
              :key="index"
              class="employment-item"
              @click="router.push('/flexibleEmploym')"
            >
              <div class="flx-align-center">
                <div style="color: #177cfa">{{ item.name }}</div>
                <img :src="item.url" style="margin-left: 4px" />
              </div>
              <img src="@/assets/img/icon-back.png" />
            </div>
          </div>
        </div>
        <div class="employment-training">
          <div class="n-title">技能培训</div>
          <div class="train">
            <div style="position: relative; height: 100px; cursor: pointer" @click="toTtrain('A')">
              <img src="@/assets/img/pic-an.png" width="645" height="100" />
              <div class="img-ct">基础安全培训</div>
            </div>
            <div style="display: flex; margin-top: 18px; cursor: pointer">
              <div
                class="train-item flx-center"
                style="width: 253px; margin-right: 15px"
                @click="toTtrain('B')"
              >
                专业技能培训
              </div>
              <div
                class="train-item flx-center"
                style="width: 377px; cursor: pointer"
                @click="toTtrain('C')"
              >
                专业知识培训
              </div>
            </div>
            <div style="display: flex; margin: 18px 0 0">
              <div
                style="position: relative; height: 100px; cursor: pointer"
                @click="toTtrain('D')"
              >
                <img src="@/assets/img/pic-zhi.png" width="377" height="100" />
                <div class="img-ct">职业发展培训</div>
              </div>
              <div
                class="train-item flx-center"
                style="width: 253px; margin-left: 15px; cursor: pointer"
                @click="toTtrain('E')"
              >
                团队管理培训
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="guarantee">
      <img src="@/assets/img/BG.png" height="560" />
      <div class="img-ct guarantee-content">
        <div class="n-title">劳动权益保障</div>
        <div class="guarantee-detail">
          <p>劳动权益保障是指劳动者在就业过程中所享有的各种权利和利益，包括但不限于以下几个方面:</p>
          <p>1、平等就业的职业选择权:劳动者有权选择适合自己的职业，并获得平等的就业机会。</p>
          <p>
            2、取得相等劳动报酬的权利:劳动者应该获得与自己付出相对应的劳动报酬，包括基本工资、加班费、津贴、奖金等。
          </p>
          <p>3、法定的节假休息的权利:劳动者享有法定的节假日休息和带薪年假等。</p>
          <p>
            4、劳动安全卫生得到保护:劳动者有权获得安全卫生的工作环境，并遵守国家和地方的安全卫生法规。
          </p>
          <p style="line-height: 24px">
            为了保障劳动者的权益，国家、企业和个人都需要共同努力。家需要加强劳动法律法规的制定和实施，建立健全社会保障体系，加强劳动力市场监管以及建立和完善劳动争议处理机制等。企业则需要遵守国家和地方的劳动法律法规，提供合法的劳动保护和劳动条件，按时支付劳动者的工资和福利待遇，保障劳动者的合法权益。个人则需要了解自己的权利和义务，自觉遵守国家和地方的劳动法律法规，积极维护自己的合法权益。
          </p>
        </div>
      </div>
    </div>

    <div class="container" style="margin: 64px 60px">
      <div class="n-title" style="text-align: center">重点就业情景</div>
      <div class="scene">
        <div v-for="(item, index) in sceneList" :key="index">
          <router-link :to="{ path: item.link }" style="text-decoration: none" class="scene-item">
            <img :src="item.url" width="24" height="24" style="margin-left: 4px" />
            <div>{{ item.name }}</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { getHome } from '@/services/api/home'
import { employmentList, sceneList } from './index'
import policy from '../../components/policy.vue'

const router = useRouter()

const loading = ref(true)
const homeData = ref()

const handleChange = (row: any) => {
  router.push({ path: '/commonDetail', query: { FID: row.FID, FormType: 'B', FTITLE: row.FTITLE } })
}

const toStreet = (row: any) => {
  router.push({ path: '/streetOfficeSpecialTopic', query: { FID: row.FID } })
}
const toTtrain = (type: string) => {
  router.push({ path: '/skillTraining', query: { type } })
}

const init = async () => {
  loading.value = false
  const res: any = await getHome()
  if (res.code === 200) {
    homeData.value = res.data
  }
}

init()
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
