<!-- 公司简介 -->
<template>
  <div>
    <h4 class="mb-1">公司简介</h4>
    <div v-if="props.info.enterprise?.introduce" class="requirement" v-html="props.info.enterprise?.introduce?.replace(/\n/g, '</br>')"></div>
    <div v-else>暂无</div>
    <v-divider class="my-3"></v-divider>
    <h4>作息时间</h4>
    <div>
      <v-icon class="mr-2" size="25" color="primary">mdi-alarm</v-icon>
      <span class="workAndRest">{{ props.info.enterprise?.time }}</span>
      <v-icon class="mr-2 ml-4" size="25" color="primary">mdi-calendar-range</v-icon>
      <span class="workAndRest">{{ props.info.enterprise?.restType }}</span>
    </div>
    <v-divider class="my-3"></v-divider>
    <h4>企业福利</h4>
    <div class="welfare-tags">
      <v-chip size="small" label v-for="(k, i) in info.enterprise?.welfareList" :key="i" class="mb-2 welfare-tags-item ellipsis" color="primary">{{ k }}</v-chip>
    </div>
    <v-divider class="my-3"></v-divider>
    <h4 class="mb-1">关于我们</h4>
    <div v-if="props.info.enterprise?.aboutUs" class="requirement" v-html="props.info.enterprise?.aboutUs?.replace(/\n/g, '</br>')"></div>
  </div>
</template>

<script setup>
defineOptions({name: 'enterprise-enterpriseCenter-introduction'})

const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})
</script>

<style scoped lang="scss">
h4 { margin-bottom: 8px; }
.requirement {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 28px;
  color: var(--color-333);
  font-size: 15px;
  text-align: justify;
  letter-spacing: 0;
  // width: 60%;
}
.workAndRest {
  color: var(--color-666);
  font-size: 15px;
}
.welfare-tags {
  display: flex;
  // width: 242px;
  flex-wrap: wrap;
  // height: 100px;
  // overflow: hidden;
  text-align: center;
}
.welfare-tags-item {
  display: block;
  width: 117px;
  max-width: 117px;
  text-align: center;
  line-height: 26px;
  margin-right: 8px;
  // &:nth-child(2n) { margin-right: 0; }
}
</style>

