<script setup lang="ts" name="EmployeeMealCard">
import { ref, reactive, computed, onMounted } from 'vue'
// import teacher from '@/static/image/train/teacher.png'
// import { useDict } from '@/common/utils/dict'
// const { examination_type, train_status } = useDict('examination_type', 'train_status')
const props = defineProps<{
  item: any
}>()
const emit = defineEmits<{
  'to-employee-meal-detail': [val: any],
}>()
function pageEmployeeMealDetail() {
  emit('to-employee-meal-detail', props.item)
}


</script>

<template>
  <div class="supply-card-container" @click="pageEmployeeMealDetail">
    <div class="right">
      <div class="title">
        {{ item.menuName }}
      </div>
      <div class="bottom">
        <div class="left">
          <div class="item">
            <div class="label">食谱开始时间：</div>
            <div class="value">{{ item.reportStarttime }}</div>
          </div>
          <div class="item">
            <div class="label">食谱结束时间：</div>
            <div class="value">{{ item.reportEndtime }}</div>
          </div>
          <div class="item">
            <div class="label">报餐截止时间：</div>
            <div class="value">{{ item.reportStoptime }}</div>
          </div>
        </div>


      </div>
    </div>
    <van-icon name="arrow" />
  </div>
</template>

<style lang="less" scoped>
  .supply-card-container{
    margin-top: 1.6rem;
    padding: 0.9rem 0.8rem 0.9rem 0.8rem;
    background-color: #fff;
    overflow: hidden;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
    display: flex;
    align-items: center;
    .right {
      flex: 1;
      margin-left: 0.8rem;
      .title{
        font-size: 1.6rem;
        font-weight: 500;

        color: rgba(37, 37, 37, 1);
        display: flex;
        justify-content: space-between;
      }
      .bottom {
       .item{
        display: flex;
        margin-top: 0.5rem;
        align-items: center;
        .label{
          font-size: 14px;
          color: rgba(37, 37, 37, 1);
        }
        .value{
          font-size: 14px;
          color: rgba(37, 37, 37, 0.45);
        }
       }
       .option-container {
        display: flex;
        justify-content: flex-end;
       }

      }
    }
  }
  // :deep(.van-divider){
  //   margin: 0.9rem 0.2rem;
  // }
</style>
