<template>
  <NuxtLink
    class="flex space-x-10 py-15 border-b box-border"
    :to="`/labour/${itemData.id}`"
  >
    <van-image
      :src="itemData.jobUrlsAfterConvert[0]"
      class="w-108 h-114 shrink"
      fit="cover"
    />
    <div class="flex-1 w-0">
      <div class="text-base text-black-3 truncate font-semibold">
        {{ itemData.jobTitle }}
      </div>
      <div class="text-sm text-[#999999] line-clamp-3 pt-5">
        {{ itemData.remarks }}
      </div>
      <div class="flex items-center flex-wrap text-sm mt-5 gap-5 content-start">
        <span
          v-for="item in lableList"
          :key="item"
          class="bg-[#FFF5ED] text-[#555D6C] h-18 px-3 flex items-center justify-center"
          >{{ item }}</span
        >
      </div>
      <div class="text-sm text-[#666666] mt-10 flex justify-end">
        {{ itemData.updateTime.split(" ")[0] }}发布
      </div>
      <div class="flex justify-end">
        <span class="text-xl font-semibold text-[#FF3D00]"
          >{{ itemData.salaryCap }}-{{ itemData.salaryFloor
          }}{{ itemData.salaryUnit }}</span
        >
      </div>
    </div>
  </NuxtLink>
</template>

<script setup>
const props = defineProps({
  itemData: {
    type: Object,
    default: () => {},
  },
});

const lableList = computed(() => {
  const tmpList = props.itemData.jobLabel?.split("&") ?? [];
  return [
    `招聘人数：${props.itemData.jobPeople}人`,
    ...tmpList,
    `${props.itemData.jobArea}`,
  ];
});
</script>

<style lang="scss" scoped></style>
