<script setup lang="ts" name="ListItemEmployees">
import MyAvatar from '@/components/Avatar/MyAvatar.vue'
import { selectDictLabel } from '@/common/utils/ruoyi'

const emit = defineEmits<{
  'on-detail': [item: any]
}>()
const props = defineProps<{
  list: any
  sys_user_sex: any
  sys_educational_background: any
  cv_record_status: any
}>()

function onClickItem(item) {
  emit('on-detail', item)
}
</script>

<template>
  <div class="list">
    <template v-if="props.list?.length">
      <template v-for="(item, index) in props.list" :key="index">
        <div class="list-item" @click="onClickItem(item)">
          <div class="list-item-title">
            <MyAvatar
              width="5rem"
              height="5rem"
              :src="item.avatar"
              :sex="item.sex" />
            <div class="list-item-title-content">
              <div class="list-item-title-label">{{ item.name }}</div>
              <div class="list-item-desc">
                <span class="sex">{{ selectDictLabel(props.sys_user_sex, item.sex) }}</span>
                <van-divider vertical />
                <span class="place">{{ item.nativePlace }}</span>
                <van-divider vertical />
                <span class="xueli">{{ selectDictLabel(props.sys_educational_background, item.educationalBackground) }}</span>
              </div>
              <div class="list-item-title-value">{{ item.appliedPosition }}</div>
            </div>
          </div>
          <div class="list-item-remark">
            <DictTag
              type="success"
              plain
              :options="props.cv_record_status"
              :value="item.recordStatus" />
            <div class="list-item-remark-content">{{ item.createTime.split(' ')[0] }} 投递</div>
          </div>
        </div>
      </template>
    </template>
    <van-empty v-if="!props.list?.length" description="暂无数据" />
  </div>
</template>

<style lang="less" scoped>
.list {
  padding: var(--container-pd);
  &-item {
    display: flex;
    margin-top: 1.2rem;
    padding: var(--container-pd);
    line-height: 1;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
    &-title {
      flex: 1;
      display: flex;
      align-items: center;
      overflow: hidden;
      &-content {
        margin-left: 0.8rem;
      }
      &-value {
        // color: var(--van-gray-7);
      }
    }
    &-desc {
      display: flex;
      align-items: center;
      margin: 0.4rem 0;
      color: var(--van-gray-6);
      font-size: 1.2rem;
    }
    &-remark {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      &-content {
        margin-top: 2rem;
        overflow: hidden;
        color: var(--van-gray-6);
        font-size: 1.2rem;
      }
    }
  }
}
</style>
