<template>
  <div id="xxinformation">
    <div class="table-content">
      <el-form ref="ruleForm">
        <div class="elsebox">
          <div class="pl20">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目类别:" prop="projectTypeName" class="mb5">
                  <span>{{ ListData.projectionType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目名称:" prop="projectName" class="mb5">
                  <span>{{ ListData.name }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="建设类别:" prop="buildCategory" class="mb5">
                  <span>改造</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属排水分区:" prop="drainagePartition" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目起止日期:" prop="time" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规划条件:" prop="planCondition" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="项目库类型:" prop="projectLibraryType" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务类型:" prop="taskType" class="mb5">
                  <span>--</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="项目概况:" prop="projectOverview" class="mb5">
                <span>--</span>
              </el-form-item>
            </el-row>
            <!-- <el-row>
              <div>项目位置：</div>
              <div class="mapBox">
                <MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="false"></MapBox>
              </div>
            </el-row> -->
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup name="xxinformation">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const ListData = ref({});
onMounted(() => {
  bus.on('xxinformationList', val => {
    console.log(val, 'valvalval');
    ListData.value = val.popupInfo;
  });
});
onBeforeUnmount(() => {
  bus.off('xxinformationList');
});
</script>

<style lang="scss" scoped>
#xxinformation {
  width: 100%;
  height: 100%;
  text-align: center;

  #monitorPipe {
    width: 1300px;
    height: 570px;
    margin-top: 10px;
  }
}
::v-deep(.el-form-item__label) {
  color: #fff;
}

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