<template>
  <div v-if="enabled" class="section-container">
    <div class="detail-section">
      <div class="detail-section-label">投诉情况</div>
      <div class="detail-section-text">{{ data.complaintContent || '-' }}</div>
    </div>

    <div class="detail-section">
      <div class="detail-section-label">客户诉求</div>
      <div class="detail-section-text">{{ data.customerDemand || '-' }}</div>
    </div>

    <div class="detail-section" v-if="data.file">
      <div class="detail-section-label">凭证文件</div>
      <FileList :ossIds="data.file" />
    </div>
  </div>
</template>

<script>
import FileList from "@/components/FileList/index.vue";

export default {
  name: 'BasicInfoSection',
  components: { FileList },
  props: {
    enabled: {
      type: Boolean,
      default: true
    },
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.detail-section {
  margin-bottom: 14px;
}
.detail-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #909399;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.detail-section-text {
  font-size: 14px;
  color: #303133;
  line-height: 1.6;
  word-break: break-all;
}
</style>
