<template>
  <div class="first">
    <!-- 类容 -->
    <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">{{ props.DataList.planStartDatetime }}</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.planEndDatetime }}</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.projectName }}
        </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.problemtitle }}</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.projectAdress }}</div>
      </div>
    </div>

    <el-table :data="dataList" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="问题类型" prop="problemType">
        <!-- <template #default="scope">
          <dict-tag :options="problem_type" :value="String(scope.row.problemType)" />
        </template> -->
      </el-table-column>
      <el-table-column label="检查项" prop="checkItem" />
      <el-table-column label="是否整改" prop="isRectification">
        <template #default="scope">
          <span>
            {{
              scope.row.isRectification == '1'
                ? '无需整改'
                : scope.row.isRectification == '2'
                ? '待整改'
                : scope.row.isRectification == '3'
                ? '整改已完成'
                : ''
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="问题描述" prop="problemContent" />
      <el-table-column label="上报时间" prop="createTime" />
      <el-table-column label="巡查照片" prop="sysFileList">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px; margin: 5px"
            v-for="i in scope.row.sysFileList"
            :src="i.url"
            :preview-src-list="[i.url]"
          >
          </el-image>
          <span v-if="scope.row.sysFileList.length == ''">暂无照片</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
});
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const dataListPhone = ref([]);
/** 查询列表 */
// const getList = async IdA => {
//   let res = await patrolProblempage({ patrolTaskId: IdA });
//   dataList.value = res.data;
//   res.data.forEach(element => {
//     dataListPhone.value = element.sysFileList;
//   });
// };

watch(
  () => props.DataList,
  val => {
    if (val) {
      console.log(props.DataList, 'props.DataList');
      // dataListPhone.value = [];
      // getList(props.DataList.id);
    }
  },
  { deep: true, immediate: true }
);
onMounted(() => {});
</script>

<style scoped lang="scss">
.first {
}
</style>