<script setup lang="ts">
import { Col, Row } from 'vant'

const props = defineProps<{
  data: Record<any, any>
}>()
</script>

<template>
  <div class="detail-container">
    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            客户姓名
          </p>
          <p class="detail-value">
            {{ props.data.f_user_name }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            操作时间
          </p>
          <p class="detail-value">
            {{ props.data.f_operate_date }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            操作人
          </p>
          <p class="detail-value">
            {{ props.data.f_operator }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            收费金额
          </p>
          <p class="detail-value">
            {{ props.data.f_collection }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            上期结余
          </p>
          <p class="detail-value">
            {{ props.data.f_balance }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            本期结余
          </p>
          <p class="detail-value">
            {{ props.data.f_curbalance }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            收费记录id
          </p>
          <p class="detail-value">
            {{ props.data.id }}
          </p>
        </div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <div class="detail-item">
          <p class="detail-label">
            备注
          </p>
          <p class="detail-value">
            {{ props.data.f_comments }}
          </p>
        </div>
      </Col>
    </Row>
  </div>
</template>

<style scoped lang="less">
.detail-container {
  padding: 8px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(100, 101, 102, 0.08);

  :deep(.van-row) {
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.detail-item {
  padding: 4px 8px;
  display: flex;
  align-items: center;

  .detail-label {
    font-size: 13px;
    color: #969799;
    margin: 0;
    min-width: 70px;
  }

  .detail-value {
    font-size: 13px;
    color: #323233;
    margin: 0 0 0 8px;
    flex: 1;
    word-break: break-all;
  }
}
</style>
