<script setup lang="ts" name="ListItemTrainExperiences">
// 培训经历
import { selectDictLabel } from '@/common/utils/ruoyi'

const emit = defineEmits<{
  'on-detail': [item: any]
}>()
const props = defineProps<{
  list: 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">
            <div class="list-item-title-content">
              <div class="list-item-title">
                <div class="list-item-title-label">培训经历</div>：
                <div class="list-item-title-content">{{ item.memo }}</div>
              </div>
              <div class="list-item-remark">
                <div class="list-item-remark-label">培训时间</div>：
                <div class="list-item-remark-content">
                  {{ item.startTime }}<span style="margin:0 0.4rem;">~</span>{{ item.endTime }}
                </div>
              </div>
            </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 {
    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 {
      display: flex;
      align-items: center;
      &-label {
        width: 5.8rem;
        text-align-last: justify;
      }
      &-content {
        flex: 1;
        overflow: hidden;
      }
    }
    &-desc {
      display: flex;
      align-items: center;
      margin: 0.4rem 0;
      color: var(--van-gray-6);
      font-size: 1.2rem;
    }
    &-remark {
      display: flex;
      margin-top: 0.4rem;
      line-height: 1.2;
      &-label {
        width: 5.8rem;
        text-align: justify;
        text-align-last: justify;
      }
      &-content {
        flex: 1;
        overflow: hidden;
        color: var(--van-gray-7);
        // font-size: 1.2rem;
        :last-of-type {
          margin-left: 1rem;
        }
      }
    }
  }
}
</style>
