<script setup lang="ts" name="PlanCard">
import { ref, reactive, computed, onMounted } from 'vue'
// import teacher from '@/assets/image/train/teacher.png'
import { getCompanyName } from '@/common/utils/transcoding'
import { useDict } from '@/common/utils/dict'

const { train_type, train_status } = useDict('train_type', 'train_status')
const props = defineProps<{
  item: any
}>()
const emit = defineEmits<{
  'plan-detail': [val: any],
  'rela-course-list': [val: any]
}>()
function planDetail() {
  emit('plan-detail', props.item)
}

function relaCourseList() {
  emit('rela-course-list', props.item)
}

</script>

<template>
  <div class="supply-card-container">
    <!-- <div class="left">
      <img class="item-img" :src="item.courseImage" alt="">
    </div> -->
    <div class="right">
      <div class="title">
        {{ item.trainName }}
        <!-- <dict-tag :options="examination_type" :value="item.examinationType"/> -->

        <DictTag
          v-if="item.trainType"
          :options="train_type"
          :value="item.trainType" />
      </div>
      <div class="bottom">
        <div class="item">
          <div class="label">所属公司：</div>
          <div class="value">{{getCompanyName(item.trainCompany)}}</div>
        </div>
        <div class="item">
          <div class="label">培训计划开始时间：</div>
          <div class="value">{{ item.trainStarttime}}</div>
        </div>
        <div class="item">
          <div class="label">培训计划结束时间：</div>
          <div class="value">{{ item.trainEndtime}}</div>
        </div>
        <div class="item">
          <div class="label">主讲人：</div>
          <div class="value">{{ item.trainMan}}</div>
        </div>
        <div class="item">
          <div class="label">培训状态：</div>
          <DictTag
            v-if="item.trainStatus"
            :options="train_status"
            :value="item.trainStatus" />
        </div>
        <div class="option-container">
          <uv-button
            type="primary"
            size="mini"
            @click="planDetail">培训详情</uv-button>
            &nbsp;
          <uv-button type="primary" size="mini" @click="relaCourseList">相关课程</uv-button>
        </div>


      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
 .supply-card-container {
  margin-top: 32rpx;
  padding: 18rpx 16rpx 18rpx 16rpx;
  background-color: #fff;
  overflow: hidden;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  display: flex;

  .right {
    flex: 1;
    margin-left: 16rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(37, 37, 37, 1);
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      .item {
        display: flex;
        margin-top: 10rpx;
        align-items: center;
        .label {
          font-size: 28rpx;
          color: rgba(37, 37, 37, 1);
        }
        .value {
          font-size: 28rpx;
          color: rgba(37, 37, 37, 0.45);
        }
      }
      .option-container {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
