<template>
  <wd-card type="rectangle" custom-class="list-item-card" @click="goCourseDetail(data.id)">
    <view class="content">
      <image :src="data[cover]" mode="aspectFill" class="course-cover-image"/>
      <view class="course-info">
        <view class="course-name">{{ data[title] }}</view>
        <view class="course-desc" v-html="data[desc]"></view>
        <!-- 课程标签 -->
        <view class="course-tags">
          <wd-tag v-if="data.level && data.level !== 0" type="primary">
            {{ data.level === 1 ? $t('courseSearch.levelBeginner') : $t('courseSearch.levelAdvanced') }}
          </wd-tag>
          <wd-tag v-if="data.selective === 1" type="warning">
            {{ $t('courseSearch.required') }}
          </wd-tag>
          <wd-tag v-if="data.selective === 2" type="success">
            {{ $t('courseSearch.elective') }}
          </wd-tag>
        </view>
      </view>
    </view>

    <template #footer>
      <view class="course-item-footer">
        <!-- 课程价格 -->
        <view v-if="data.courseCatalogueEntityList" class="text-[red]">
          <text v-if="data.courseCatalogueEntityList.length === 1">
            {{
              data.courseCatalogueEntityList[0].halfFee === 0
                ? $t('courseSearch.free')
                : `¥${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
            }}
          </text>
          <text v-if="data.courseCatalogueEntityList.length > 1">
            <text v-for="(v, i) in data.courseCatalogueEntityList" :key="i">
              {{ formatCatalogueTitle(v.title) }}
              <text v-if="i !== data.courseCatalogueEntityList.length - 1">/</text>
            </text>
            {{
              data.courseCatalogueEntityList[0].halfFee === 0
                ? $t('courseSearch.free')
                : ` ${$t('courseSearch.each')}${data.courseCatalogueEntityList[0].halfFee}/${data.courseCatalogueEntityList[0].fee}`
            }}
          </text>
        </view>
        <wd-button v-if="showToDetail" size="small" custom-class="course-detail-btn">课程详情</wd-button>
      </view>
    </template>
  </wd-card>
</template>

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: 'title'
  },
  desc: {
    type: String,
    default: 'desc'
  },
  cover: {
    type: String,
    default: 'image'
  },
  showToDetail: {
    type: Boolean,
    default: true
  }
})

/**
 * 格式化课程目录标题
 * 提取"上/中/下"
 */
const formatCatalogueTitle = (title: string): string => {
  const keywords = ['上部', '中部', '下部']
  const result: string[] = []

  keywords.forEach((keyword) => {
    if (title.includes(keyword)) {
      result.push(keyword.substring(0, 1))
    }
  })

  return result.join('')
}

/**
 * 跳转到课程详情
 */
const goCourseDetail = (courseId: number) => {
  uni.navigateTo({
    url: `/pages/course/details/course?id=${courseId}`
  })
}
</script>

<style lang="scss" scoped>
.list-item-card {
  box-shadow: 0px 0px 10px 0px #a7bbe4 !important;
  border-radius: 10px !important;

  &:last-child {
    margin-bottom: 0;
  }
}
.content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .course-cover-image {
    width: 124px;
    height: 100px;
  }
  .course-info {
    flex: 1;
    margin-left: 10px;
    .course-name {
      color: rgba(0,0,0,0.85);
      font-size: 16px;
    }
    .course-desc {
      color: rgba(0,0,0,0.4);
      font-size: 12px;
      line-height: 1.5;
      max-height: 4.5em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
    }
  }
}
.course-item-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.course-detail-btn {
  background-image: linear-gradient(90deg, #258feb 0%, #00e1ec 100%) !important;
  color: #fff !important;
  margin-left: 10px;
}
</style>