<script setup lang="ts">
import type { PropType } from 'vue';

// 定义场站详情数据接口
interface StationDetail {
  location?: string;
  locationType?: string;
  networkType?: string;
  marketType?: string;
  openingDate?: string;
  totalArea?: string;
  frontArea?: string;
  stationBuildingArea?: string;
  convenienceStoreArea?: string;
  shelterHeight?: string;
  mainTitle?: string;
  internalNetwork?: string;
  externalNetwork?: string;
  entranceHeight?: string;
  exitHeight?: string;
  speedBumpCount?: string;
  valueAddedServices?: string;
  fireFightingEquipment?: string;
  specialNotes?: string;
}

// 定义组件属性
const _props = defineProps({
  // 场站详情数据
  stationData: {
    type: Object as PropType<StationDetail>,
    default: () => ({}),
  },
});
</script>

<template>
  <div>
    <ElDescriptions class="station-info" :column="6">
      <ElDescriptionsItem label="地理位置:">
        {{ stationData.location || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="位置类型:">
        {{ stationData.locationType || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="网络类型:">
        {{ stationData.networkType || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="市场类型:">
        {{ stationData.marketType || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="开业日期:">
        {{ stationData.openingDate || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="油站总面积(m²):">
        {{ stationData.totalArea || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="前庭面积(m²):">
        {{ stationData.frontArea || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="站房面积(m²):">
        {{ stationData.stationBuildingArea || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="便利店面积(m²):">
        {{ stationData.convenienceStoreArea || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="雨棚高度(m):">
        {{ stationData.shelterHeight || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="主标题:">
        {{ stationData.mainTitle || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="内网光线:">
        {{ stationData.internalNetwork || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="外网光线:">
        {{ stationData.externalNetwork || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="进口高度(m):">
        {{ stationData.entranceHeight || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="出口高度(m):">
        {{ stationData.exitHeight || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="站内减速带数量:">
        {{ stationData.speedBumpCount || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="增值服务:">
        {{ stationData.valueAddedServices || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="消防配置:">
        {{ stationData.fireFightingEquipment || '未填写' }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="特殊备注:">
        {{ stationData.specialNotes || '未填写' }}
      </ElDescriptionsItem>
    </ElDescriptions>
  </div>
</template>

<style scoped lang="scss">
.oil-station-detail {
  width: 100%;
  padding: 16px;

  :deep(.el-descriptions__header) {
    display: none;
  }

  .station-info {
    :deep(.el-descriptions__label) {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-color-secondary);
    }

    :deep(.el-descriptions__content) {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-color-primary);
    }
    :deep(.el-descriptions__table) {
      background: transparent !important;
    }

    :deep(.el-card__body) {
      padding-top: 0px !important;
    }
  }
}
</style>
