<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">{{ 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">
          <span>
            {{
              props.DataList.status == 'to_start'
                ? '未开始'
                : props.DataList.status == 'proceed'
                ? '进行中'
                : props.DataList.status == 'done'
                ? '已完成'
                : props.DataList.status == 'expired'
                ? '超时'
                : ''
            }}
          </span>
        </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.expiredDays }}</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.issuedDatetime }}</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.taskDescribe }}</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.projectLocationName }}</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 style="color: aliceblue">巡查照片</p>
      <div v-if="dataListPhone.length">
        <el-image style="width: 150px; height: 60px; margin: 5px" v-for="i in dataListPhone" :src="i.url" :preview-src-list="[i.url]">
        </el-image>
      </div>
      <el-empty v-else description="暂无图片" :image-size="30" />
    </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>
import { patrolProblempage } from '@/api/longoPeration/inspectiontasks';
const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
});
const { proxy } = getCurrentInstance();
const { problem_type } = proxy.useDict('problem_type'); //  巡查类型的字典
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) {
      dataListPhone.value = [];
      getList(props.DataList.id);
    }
  },
  { deep: true, immediate: true }
);
onMounted(() => {});
</script>

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