<script setup lang="ts" name="supplyCard">
import { ref, reactive, computed, onMounted } from 'vue'
import qiyeLogo from '@/static/image/qiyeLogo.png'

const props = defineProps<{
  item: any
}>()

</script>

<template>
  <div class="supply-card-container">
    <div class="name-container">
      <div class="left">
        <!-- <img class="qiye-logo" :src="qiyeLogo" alt=""> -->
        <div class="qiye-name">{{ props.item.noticeTitle }}</div>
        <div class="right">
          <div class="value">{{ props.item.createTime }}</div>
          <van-badge v-if="props.item.status === '0'" dot>
            <div class="child" />
          </van-badge>
        </div>
      </div>

    </div>
    <van-divider />
    <div class="info-container">
      <div class="info-item">
        <div class="label">{{props.item.noticeContent}}</div>
      </div>
      <div class="info-item"/>
    
    </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);
}

.supply-card-container:first-child {
    margin-top: 0;
}

.supply-card-container .name-container {
    display: flex;
    justify-content: space-between;
}

.supply-card-container .name-container .left {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.supply-card-container .name-container .left .qiye-logo {
    width: 32rpx;
    height: 32rpx;
}

.supply-card-container .name-container .left .qiye-name {
    font-size: 28rpx;
    color: rgba(51, 51, 51, 1);
    margin-left: 16rpx;
}

.supply-card-container .name-container .right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.supply-card-container .name-container .right .value {
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #999;
}

.supply-card-container .name-container .status-dongjie {
    width: 112rpx;
    height: 56rpx;
    border-radius: 12rpx;
    background: rgba(255, 237, 237, 1);
    font-size: 24rpx;
    color: rgba(255, 77, 79, 1);
}

.supply-card-container .name-container .status-jihuo {
    width: 112rpx;
    height: 56rpx;
    border-radius: 12rpx;
    background: rgba(242, 251, 255, 1);
    font-size: 24rpx;
    color: rgba(24, 144, 255, 1);
}

.supply-card-container .name-container .status-tingyong {
    width: 112rpx;
    height: 56rpx;
    border-radius: 12rpx;
    background: rgba(255, 247, 230, 1);
    font-size: 24rpx;
    color: rgba(250, 173, 20, 1);
}

.supply-card-container .info-container .info-item {
    margin-top: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.supply-card-container .info-container .info-item:first-child {
    margin-top: 0;
}

.supply-card-container .info-container .info-item .label {
    margin-left: 16rpx;
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
}

.supply-card-container .info-container .info-item .value {
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
}

.supply-card-container .register-container {
    display: flex;
    align-items: center;
}

.supply-card-container .register-container .label {
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
}

.supply-card-container .register-container .value {
    font-size: 24rpx;
    color: rgba(153, 153, 153, 1);
    margin-left: 24rpx;
}

:deep(.van-divider) {
    margin: 18rpx 4rpx;
}
</style>
