<script setup lang="ts" name="DishCard">
import { ref, reactive, computed, onMounted } from 'vue'
import { useDict } from '@/common/utils/dict'
const { sample_meal } = useDict('sample_meal')

import { selectDictLabel } from '@/common/utils/ruoyi'
const props = defineProps<{
  item: any
}>()
const emit = defineEmits<{
  'handle-detail': [val: any],
  'handle-update': [val: any],
  'handle-delete': [val: any]
}>()
function handleDetail() {
  emit('handle-detail', props.item)
}
function handleUpdate() {
  emit('handle-update', props.item)
}
function handleDelete() {
  emit('handle-delete', props.item)
}

</script>

<template>
  <div class="supply-card-container">
    <div class="left">
      <div class="content-item">
        <div class=label>
          留样日期：
        </div>
        <div class="value">
          {{item.sampleDate}}
        </div>
      </div>
      <div class="content-item">
        <div class=label>
          留样人：
        </div>
        <div class="value">
          {{item.createByName}}
        </div>
      </div>
      <div class="content-item">
        <div class=label>
          有效时间：
        </div>
        <div class="value">
          {{item.sampleHour}}小时
        </div>
      </div>
      <div class="content-item">
        <div class=label>
          留样餐食：
        </div>
        <div class="value">
          {{ selectDictLabel(sample_meal,item.sampleMeal) }}
        </div>
      </div>
    </div>
    <div class="option-btn-list">
      <van-button
        class="option-btn"
        type="primary"
        size="mini"
        @click="handleDetail">详情</van-button>
      <van-button
        class="option-btn"
        type="primary"
        size="mini"
        @click="handleUpdate">修改</van-button>
      <van-button
        class="option-btn"
        type="primary"
        size="mini"
        @click="handleDelete">删除</van-button>
    </div>


  </div>
</template>

<style lang="less" scoped>
  .supply-card-container{
    padding: 0.9rem;
    background-color: #fff;
    overflow: hidden;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    .left {
      flex: 1;
    }
    .content-item {
      display: flex;
      align-items: center;
      margin-top: 0.4rem;
      .label {
        font-size: 1.4rem;
        font-weight: 500;
        color: rgba(37, 37, 37, 1);
        width: 8rem;
      }
      .value {
        flex: 1;
      }
    }
    .option-btn-list {
      display: flex;
      justify-content: flex-end;
      .option-btn{
        margin-left: 1rem;
      }
    }


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