<template>
  <el-card v-if="h" class="mb20" :style="{'--el-card-padding':'15px'}">
    <div class="fit-img-box">
      <el-image
        class="poImg"
        :src="fillImgUrl_train(data.cover)"
        fit="cover"
      />
    </div>

    <div>
      <!--鼠标移到图片上再显示吧-->
      <slot name="image" />
    </div>
    <div>
      <h2 class="card-title esp">{{ data.name }}</h2>
      <div class="bottom">
        <div class="esp">
          <el-tag
            v-for="p in projects" :key="p.id" type="warning" size="small" class="mr5"
            :class="p.css"
          >
            {{ p.name }}
          </el-tag>

        </div>

        <p class="time esp">
          <span class="icon-span"><el-icon color="#808080"><Calendar /></el-icon></span>
          培训时间：{{ data.trainTimeRange }}
        </p>
        <p class="time esp">
          <span class="icon-span"><el-icon color="#808080"><Clock /></el-icon></span>
          报名时间：{{ data.signTimeRange }}
        </p>
        <p class="time esp">
          <span class="icon-span"><el-icon color="#808080"><Location /></el-icon></span>
          培训地点：{{ data.address }}
        </p>
        <div class="card-tag">
          <div>
            <slot />
          </div>
        </div>
      </div>
    </div>
  </el-card>
  <div v-else class="myTrain">
    <div class="fit-img-box">
      <el-image
        class="poImg"
        :src="fillImgUrl_train(data.cover)"
        fit="cover"
      />
    </div>
    <div class="info">
      <h2 class="card-title esp">{{ data.name }}</h2>
      <div class="bottom">
        <el-tag v-for="p in projects" :key="p.id" type="warning" class="mr5" :class="p.css">
          {{ p.name }}
        </el-tag>

        <p class="time">
          <span class="icon-span"><el-icon color="#808080"><Calendar /></el-icon></span>
          培训时间：{{ data.trainTimeRange }}
        </p>
        <p class="time">
          <span class="icon-span"><el-icon color="#808080"><Clock /></el-icon></span>
          报名时间：{{ data.signTimeRange }}
        </p>
        <p class="time esp">
          <span class="icon-span"><el-icon color="#808080"><Location /></el-icon></span>
          培训地点：{{ data.address }}
        </p>
        <div class="card-tag">
          <div>
            <slot />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import _ from 'lodash'

const props = defineProps({
  data: {
    type: Object,
    default: () => {
    }
  },
  h: {
    type: Boolean,
    default: true
  }
})

const projects = computed(() => {
  const list = []
  if (props.data.projects) {
    const ps = props.data.projectsStr.split(',')
    _.each(props.data.projects.split(','), (p, i) => {
      p = parseInt(p)
      list.push({
        id: p,
        name: ps[i],
        css: (() => {
          let css = ''
          switch (p) {
            case 100:// 教练
              css = 'coach'
              break
            case 200:// 裁判
              css = 'referee'
              break
            case 300:// 晋级官
              css = 'level'
              break
            case 400:// 晋段官
              css = 'rank'
              break
            case 500:// 培训讲师
              css = 'lecturer'
              break
          }
          return css
        })()
      })
    })
  }
  return list
})

</script>

<style scoped lang="scss">
.card-title {
  color: #000000;
  font-size:18px;
}

.time {
  font-size: 13px;
  color: #808080;

  .icon-span {
    position: relative;
    top: 2px;
  }
}
.myTrain{display: flex;
  .fit-img-box{width: 320px; flex: 0 0 auto;
    padding: 0;
  }
  .info{  flex: 1 1 auto;margin-left: 20px}
}
</style>