<script setup lang="ts" name="supplyCard">
import { ref, reactive, computed, onMounted } from 'vue'
import { useDict } from '@/common/utils/dict'
import { selectDictLabel } from '@/common/utils/ruoyi'
const { menu_type } = useDict('menu_type')
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="custom-card">
    <van-cell title="就餐事由" :value="item.guestReason" />
    <van-cell title="就餐类别" :value="selectDictLabel(menu_type,item.menuType)" />
    <van-cell title="就餐人数" :value="item.guestNum" />
    <van-cell title="食谱开始时间" :value="item.reportStarttime" />
    <van-cell title="食谱结束时间" :value="item.reportEndtime" />
    <van-cell title="加餐说明" :value="item.addMealExplain" />
    <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>
  .custom-card{
    margin-top: 1.2rem;
    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);
    // &:first-child {
    //   margin-top: 0;
    // }
    .name-container{
      display: flex;
      justify-content: space-between;
      .left {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .qiye-logo {
          width: 1.6rem;
          height: 1.6rem;
        }
        .qiye-name {
          font-size: 1.4rem;
          color: rgba(51, 51, 51, 1);
          margin-left: 0.8rem;
        }
      }
      .right{
        display: flex;
        align-items: center;
        justify-content: center;
        .value {
          margin-right: 1rem;
          font-size: 1.2rem;
          color: #999;
        }
      }
      .status-dongjie {
        width: 5.6rem;
        height: 2.8rem;
        border-radius: 0.6rem;
        background: rgba(255, 237, 237, 1);
        font-size: 1.2rem;
        color: rgba(255, 77, 79, 1);
      }
      .status-jihuo {
        width: 5.6rem;
        height: 2.8rem;
        border-radius: 0.6rem;
        background: rgba(242, 251, 255, 1);
        font-size: 1.2rem;
        color: rgba(24, 144, 255, 1);
      }
      .status-tingyong {
        width: 5.6rem;
        height: 2.8rem;
        border-radius: 0.6rem;
        background: rgba(255, 247, 230, 1);
        font-size: 1.2rem;
        color: rgba(250, 173, 20, 1);
      }
    }
    .info-container {
      .info-item {
        margin-top: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:first-child {
          margin-top: 0;
        }
        .label {
          margin-left: 0.8rem;
          font-size: 1.2rem;
          color: rgba(153, 153, 153, 1);
        }
        .value {
          font-size: 1.2rem;
          color: rgba(153, 153, 153, 1);
        }
      }
    }
    .register-container {
      display: flex;
      align-items: center;
      .label {
        font-size: 1.2rem;
        color: rgba(153, 153, 153, 1);
      }
      .value {
        font-size: 1.2rem;
        color: rgba(153, 153, 153, 1);
        margin-left: 1.2rem;
      }
    }
  }
  :deep(.van-divider){
    margin: 0.9rem 0.2rem;
  }
  .option-btn-list {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    .option-btn{
      margin-left: 1rem;
    }
  }
</style>
