<!-- 搜索页面的职位详情-长条 -->
<template>
  <v-card class="positionItem" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
    <!-- 职位、公司 -->
    <div class="position-and-company" @click="handlePosition(item)">
      <div class="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false">
        <p :class="['title1', {'default-active': item.positionActive }]">{{ item.job.name }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</p>
        <div class="d-flex row2">
          <div class="salary">
            <span>16-18K</span>
            <span>·13薪</span>
          </div>
          <template v-if="item.job?.tagList?.length">
            <v-chip class="tipClsss" size="x-small" label v-for="(tip, i) in item.job.tagList" :key="i" color="#666">{{ tip }}</v-chip>
            <v-chip v-bind="props" class="tipClsss" prepend-icon="mdi-message-processing" size="x-small" label color="secondary" variant="outlined">
              <span v-if="item.active">立即沟通</span>
              <template v-else>
                <span class="textColor666">{{ item.contact.name }}</span>
                <span style="margin: 0 2px;">|</span>
                <span class="textColor666">{{ item.contact.postNameCn }}</span>
              </template>
            </v-chip>
            <v-chip v-if="item.contact.status === 1" size="x-small" label color="green" variant="outlined">在线</v-chip>
          </template>
        </div>
      </div>
      <div class="company">
        <v-img  class="companyLogo" :src="item.enterprise.logoUrl" />
        <div>
          <v-hover>
            <template v-slot:default="{ isHovering, props }">
              <p v-bind="props" :class="['title1', {'default-active': isHovering }]">{{ item.enterprise.anotherName }}</p>
            </template>
          </v-hover>
          <v-chip  class="tipClsss" size="x-small" label v-for="(tip, i) in item.enterprise.tags" :key="i" color="#666">{{ tip }}</v-chip>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer-left">
        <template v-for="(jobTag, jobTagsIndex) in item.enterprise.tags1" :key="jobTagsIndex">
          <span class="textColor666 mx-1" v-if="jobTagsIndex">|</span>
          <span class="textColor666">{{ jobTag }}</span>
        </template>
      </div>
      <div class="footer-right" v-if="item.enterprise.welfareList?.length">
        {{ item.enterprise.welfareList.join('、') }}
      </div>
    </div>
  </v-card>
</template>

<script setup>
defineOptions({ name: 'long-strip-position-card-item' })
import { ref, watch } from 'vue'
const props = defineProps({
  items: {
    type: Object,
    default: () => ({ data: [], total: 0 })
  }
})
const list = ref([])
watch(
  () => props.items, 
  (newVal) => {
    list.value = newVal
  },
  { immediate: true },
  { deep: true }
)

const emits = defineEmits(['position', 'enterprise'])
const handlePosition = (item) => {
  emits('position', item)
}
</script>

<style lang="scss" scoped>

.tipClsss { margin-right: 4px; }
.title1 { font-size: 16px; font-weight: 500; line-height: 28px;}
.textColor666 { color: #666; }
.positionItem {
  width: 884px;
  margin-bottom: 20px;
  border-radius: 12px;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s linear;
  background-color: #fff;
  &:hover {
    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
  }
  .position-and-company {
    display: flex;
    padding: 16px 20px;
    width: 100%;
    .position {
      width: 440px;
      padding-right: 12px;
      .row2 {
        display: flex;
        align-items: center;
        flex-wrap: wrap; /* 允许换行 */
        width: 100%; /* 设置容器宽度 */
        .salary {
          display: inline;
          font-size: 16px;
          font-weight: 500;
          color: #fe574a;
          line-height: 32px;
          float: left;
          margin-right: 16px;
        }
      }
    }
    .company {
      flex: 1;
      display: flex;
      .companyLogo {
        height: 54px;
        width: 54px;
        min-width: 54px;
        min-height: 54px;
        max-width: 54px;
        max-height: 54px;
        margin-right: 20px;
        border-radius: 8px;
      }
    }
  }
  .footer {
    height: 48px;
    line-height: 48px;
    padding: 0px 20px;
    font-size: 14px;
    background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
    display: flex;
    .footer-left {
      width: 440px;
      padding-right: 12px;
    }
    .footer-right {
      flex: 1;
    }
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .ellipsisStyle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>