<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[0]?.f_operator || '-' }}
          </p>
        </div>
      </Col>
    </Row>

    <!-- 表头 -->
    <Row>
      <Col span="8">
        <div class="detail-item">
          <p class="detail-label">
            更改列名
          </p>
        </div>
      </Col>
      <Col span="8">
        <div class="detail-item">
          <p class="detail-label">
            更改前
          </p>
        </div>
      </Col>
      <Col span="8">
        <div class="detail-item">
          <p class="detail-label">
            更改后
          </p>
        </div>
      </Col>
    </Row>

    <Row v-for="(row, index) in props.data" :key="index">
      <Col span="8">
        <div class="detail-item">
          <p class="detail-value">
            {{ row.f_field_name }}
          </p>
        </div>
      </Col>
      <Col span="8">
        <div class="detail-item">
          <p class="detail-value">
            {{ row.f_used_content }}
          </p>
        </div>
      </Col>
      <Col span="8" class="detail-value new-value">
        <div class="detail-item">
          <p class="detail-value">
            {{ row.f_new_content }}
          </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>
