<template>
  <div class="first">
    <div class="ditu">地图</div>
    <!-- 类容 -->
    <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查任务名称</div>
        <div class="detail-value flex flex-align-center">
          {{ props.DataList.taskName }}
        </div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查人员</div>
        <div class="detail-value flex flex-align-center">{{ props.DataList.taskUserList[0].userName }}</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务开始时间</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务结束时间</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务状态</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">超时时间</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">任务下发时间</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查任务描述</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查位置</div>
        <div class="detail-value flex flex-align-center">123</div>
      </div>
      <div class="flex flex-r">
        <div class="detail-label flex flex-align-center">巡查项目</div>
        <div class="detail-value flex flex-align-center">
          {{ props.DataList.projectList[0].projectAbbreviation }}
        </div>
      </div>
    </div>
    <!-- 巡查照片 -->
    <div>
      <p>巡查照片</p>
      <div>123</div>
    </div>

    <el-table :data="dataListTwo" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="问题类型" prop="taskName" />
      <el-table-column label="检查项" prop="taskName" />
      <el-table-column label="是否整改" prop="taskName" />
      <el-table-column label="是否整改" prop="taskName" />
      <el-table-column label="上报时间" prop="taskName" />
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
});
onMounted(() => {
  console.log(props.DataList, 'props');
});
</script>

<style scoped lang="scss">
.first {
  .ditu {
    width: 100%;
    height: 200px;
    border: 1px solid red;
  }
}
</style>