<template>
  <div class="detail-container">
    <el-card shadow="hover">
      <el-descriptions title="基础信息" :column="3">
        <el-descriptions-item label="服务站名称">{{
          basicData.mc
        }}</el-descriptions-item>
        <el-descriptions-item label="服务站经度">{{
          basicData.jd
        }}</el-descriptions-item>
        <el-descriptions-item label="服务站纬度">{{
          basicData.wd
        }}</el-descriptions-item>
        <el-descriptions-item label="设备数">{{}}</el-descriptions-item>
        <el-descriptions-item label="物资数">{{}}</el-descriptions-item>
        <el-descriptions-item label="人员数">{{}}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{}}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card shadow="hover">
      <el-descriptions title="配置信息" :column="3"> </el-descriptions>
      <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="人员信息" name="people">人员信息</el-tab-pane>
        <el-tab-pane label="物资信息" name="second">物资信息</el-tab-pane>
        <el-tab-pane label="设备信息" name="third">设备信息</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
  
  <script setup>
import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
const props = defineProps({
  basicData: {
    type: Object,
    default: () => ({}),
  },
});

const activeTab = ref("people");
const handleClick = (tab, event) => {
  console.log("tab", tab, "event", event);
};
</script>
  
  <style>
.detail-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
</style>