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

interface Card {
  id: string
  status:string
  title: string
  personTip:string
  time: string

}
const props = defineProps<{
  supplyCardData: Card
}>()

</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.supplyCardData.title }}</div>
      </div>

      <div class="right" v-if="props.supplyCardData.status === '0'">
        <van-badge dot>
          <div class="child" />
        </van-badge>
      </div>
    </div>
    <van-divider />
    <div class="info-container">
      <div class="info-item">
        <div class="label">{{props.supplyCardData.personTip}}</div>
        <div class="value">{{ props.supplyCardData.time }}</div>
      </div>
      <!-- <div class="info-item">
        <div class="label">法人</div>
        <div class="value">{{ props.supplyCardData.faRen }}</div>
      </div>
      <div class="info-item">
        <div class="label">供应商手机号</div>
        <div class="value">{{ props.supplyCardData.supplyTel }}</div>
      </div>
      <div class="info-item">
        <div class="label">企业分类</div>
        <div class="value">{{ props.supplyCardData.type }}</div>
      </div> -->
    </div>
    <!-- <van-divider />
    <div class="register-container">
      <div class="label">注册时间</div>
      <div class="value">{{ props.supplyCardData.registerTime }}</div>
    </div> -->

  </div>
</template>

<style lang="less" scoped>
  .supply-card-container{
    padding: 0.9rem 0.8rem 0.9rem 0.8rem;
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    .name-container{
      display: flex;
      justify-content: space-between;
      .left{
        flex: 1;
        display: flex;
        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;
      }
      .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;
  }
</style>
