<script setup lang="ts" name="ContractCard">
import { ref, reactive, computed, onMounted } from 'vue'

interface Card {
  id: string
  title: string
  content: string
  typeText: string
  type: string
  time:string
}
const props = defineProps<{
  contractCardData: Card
}>()

</script>

<template>
  <div class="supply-card-container">

    <div class="name-container">
      <div class="left">
        <div class="qiye-name">{{ props.contractCardData.title }}</div>
        <div class="qiye-type">
          <van-badge dot style="margin-right: 1rem;">
            <div class="child" />
          </van-badge>
          <span>
            {{ props.contractCardData.typeText }}
          </span>
        </div>
      </div>
    </div>
    <van-divider />
    <div class="info-container">
      {{ props.contractCardData.content }}
    </div>
    <van-divider />
    <div class="register-container">
      <div class="label">时间</div>
      <div class="value"> {{ props.contractCardData.time }}</div>
    </div>

  </div>
</template>

<style lang="less" scoped>
  .supply-card-container{
    padding: 0.7rem 0.8rem 0.9rem 0.8rem;
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    .name-container{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      .left{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .qiye-name {
          font-size: 1.4rem;
          color: rgba(51, 51, 51, 1);
          margin-left: 0.8rem;

        }
        .qiye-type {
          font-size: 1.4rem;
          color: rgba(153, 153, 153, 1);
          margin-left: 0.8rem;
          display: flex;
          align-items: center;
        }
      }
      .right{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .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 {
      font-size: 1.2rem;
      color: rgba(153, 153, 153, 1);
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2; /* 限定最多显示两行 */
      -webkit-box-orient: vertical;
    }
    .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;
  }
</style>
