<template>
  <div class="company-box">
    <div class="sub-li" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
      <div class="company-info-top" @click="handleClickEnterprise(item)">
        <div class="float-left">
          <v-img :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
        </div>
        <div class="company-info">
          <h3 :class="{'default-active': item.active }" style="width: 200px;">{{ item.anotherName }}</h3>
          <p>{{ item.financingName }}<span class="mx-2" v-if="item.financingName && item.industryName">|</span>{{ item.industryName }}</p>
        </div>
      </div>
      <div class="company-info-bottom">
        <div class="bottom-tag ellipsis">
          <span class="mr-2" v-for="(k, i) in item.welfareList" :key="i">{{ k }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'company-item'})
defineProps({
  list: Array
})

const handleClickEnterprise = (item) => {
  window.open(`/recruit/personal/company/details/${item.id}?key=briefIntroduction`)
}
</script>

<style scoped lang="scss">
@import url('@/styles/recruit/company.scss');
</style>
