<template>
  <div id="JC_dialog">
    <div class="table-content">
      <el-form :model="ListData">
        <!-- 排水 -->
        <div v-if="useDialogTabs.mapType == 'paishuiSupervise'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点编码:" prop="" class="mb5">
                <span class="title">{{ ListData.stCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ ListData.stName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="安装设备:" prop="" class="mb5">
                <span class="title">{{ ListData.siteType == 'water_level' ? '水位计' : '燃气井下探测器' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装位置:" prop="" class="mb5">
                <span class="title">{{ ListData.address || '' }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                :label="item.monitorName + ':'"
                prop=""
                class="mb5"
                v-for="(item, i) in ListData.monitorPropertyList"
                :key="i"
              >
                <span class="title">{{ ListData.monitorValueList[i].monitorValue }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="监测状态:" prop="" class="mb5">
                <!-- <span class="title">{{ ListData.onlineStatus == 'online' ? '在线' : '离线' }}</span> -->
                <span class="title">{{ ListData.faultStatus == 'normal' ? '正常' : '异常' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测时间:" prop="" class="mb5">
                <span class="title">{{ ListData.tt }}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="存储时间:" prop="" class="mb5">
                <span class="title">{{ ListData.ut }}</span>
              </el-form-item>
            </el-col> -->
          </el-row>
        </div>
        <!-- 燃气 -->
        <div v-else-if="useDialogTabs.mapType == 'ranQi_supervise'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点编码:" prop="" class="mb5">
                <span class="title">{{ ListData.siteNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ ListData.siteName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装设备:" prop="" class="mb5">
                <span class="title">{{ '燃气井下探测器' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装位置:" prop="" class="mb5">
                <span class="title">{{ ListData.siteAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测气体:" prop="" class="mb5">
                <span class="title">{{ gas_type.find(item => item.value == ListData.gasType)?.label || ListData.gasType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测浓度:" prop="" class="mb5">
                <span class="title">{{ ListData.gasValue + '%VOL' }}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="温度:" prop="" class="mb5">
                <span class="title">{{ ListData.temperature + '℃' }}</span>
              </el-form-item>
            </el-col> -->
            <el-col :span="12">
              <el-form-item label="水位状态:" prop="" class="mb5">
                <span class="title">{{ ListData.waterLevelState == 0 ? '正常' : '超限' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备状态:" prop="" class="mb5">
                <span class="title">{{ ListData.onlineStatus == 'online' ? '在线' : '离线' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监测时间:" prop="" class="mb5">
                <span class="title">{{ ListData.timestamp }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup name="JC_dialog">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
import { waterloggingArchiveList, realtimeDataLatest, dockingList } from '@/api/system/tanchuang';
import dialogTabsStore from '@/store/modules/dialogTabs';

const { proxy } = getCurrentInstance();
const { gas_type } = proxy.useDict('gas_type');
const useDialogTabs = dialogTabsStore();
const ListData = ref({});

const showData = ref(null);
const loading = ref(false);
const props = defineProps({
  // 数据SiteNo
  SiteNo: {
    type: String,
  },
});

// 获取排水数据列表
const getPsData = () => {
  realtimeDataLatest(props.SiteNo).then(res => {
    // console.log('🚀 ~ getPsData ~ res:', res);
    ListData.value = res.data;
  });
};

// 获取燃气数据
const getRqData = () => {
  dockingList({ deviceId: props.SiteNo }).then(res => {
    // console.log('🚀 ~ getPsData ~ res:', res);
    ListData.value = res.data[0];
  });
};

onMounted(() => {
  if (useDialogTabs.mapType == 'paishuiSupervise') {
    getPsData();
  } else if (useDialogTabs.mapType == 'ranQi_supervise') {
    getRqData();
  }
});
</script>

<style lang="scss" scoped>
#JC_dialog {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  .table-content {
    // height: calc(100% - 44px);
    width: 100%;
    padding: 0 20px;
    // overflow: hidden;
    overflow-y: auto;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
    :deep(.el-form-item__label) {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}
:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-form-item__content) {
  color: #fff;
}
</style>