<!--
  Description: 闸井监测-详情
  Author: 李亚光
  Date: 2023-08-13
 -->
<script lang="ts" setup name="WellDetail">
import detailData from './detailData.vue'
const $router = useRouter()
const $route = useRoute()
// 页面详情数据
const detailInfo = ref<{ [key: string]: string }>({})
// 描述列表数据
const descriptionsList = ref([
  {
    text: '闸井位号',
    value: '',
    align: 'center',
  },
  {
    text: '闸井编号',
    value: '',
    align: 'center',
  },
  {
    text: '闸井名称',
    value: '',
    align: 'center',
  },
  {
    text: '是否直埋',
    value: '',
    align: 'center',
  },
  {
    text: '使用状态',
    value: '',
    align: 'center',
  },
  {
    text: '产权单位',
    value: '',
    align: 'center',
  },
  {
    text: '产权单位联系人',
    value: '',
    align: 'center',
  },
  {
    text: '产权单位联系电话',
    value: '',
    align: 'center',
  },
  {
    text: '管理方式',
    value: '',
    align: 'center',
  },
  {
    text: '管理单位',
    value: '',
    align: 'center',
  },
  {
    text: '负责人',
    value: '',
    align: 'center',
  },
  {
    text: '负责人联系方式',
    value: '',
    align: 'center',
  },
  {
    text: '运行状态',
    value: '',
    align: 'center',
  },
  {
    text: '启用日期',
    value: '',
    align: 'center',
  },
  {
    text: '所在区域',
    value: '',
    align: 'center',
  },
  {
    text: '详细位置',
    value: '',
    align: 'center',
  },
  {
    text: '经度',
    value: '',
    align: 'center',
  },
  {
    text: '纬度',
    value: '',
    align: 'center',
  },
])

// 页面loading
const loading = ref(true)
// 获取闸井详情数据
const fetchWellDetail = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    detailInfo.value = {

    }
  }, 1500)
}
onMounted(() => {
  fetchWellDetail()
})
</script>

<template>
  <!-- 布局 -->
  <app-container v-loading="loading" class="container">
    <detail-page title="闸井详情">
      <template #btns>
        <el-button type="info" @click="$router.back()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-descriptions :column="2" border>
        <el-descriptions-item v-for="item in descriptionsList" :key="item.text" :align="item.align">
          <template #label>
            <span class="label">
              {{ item.text }}
            </span>
          </template>
          {{ detailInfo[item.value] || '' }}
        </el-descriptions-item>
      </el-descriptions>
    </detail-block-com>
    <detail-block-com>
      <detail-data />
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
::v-deep(.el-descriptions__label) {
  width: 15%;
}
</style>