<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">
          <div v-for="item in props.DataList.useridlist" style="margin-right: 10px">{{ item.userName }}</div>
        </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.problemAddress }}</div>
      </div>
    </div>

    <el-table :data="dataList" stripe style="margin-bottom: 20px; margin-top: 10px">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column label="存在问题" prop="haveProblem" />
      <el-table-column label="督办事项" prop="supervisionWork" />
      <el-table-column label="整改状态" prop="isRectify">
        <template #default="scope">
          <span>
            {{ scope.row.isRectify == '1' ? '待整改' : scope.row.isRectify == '2' ? '已整改' : '' }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="整改通知单" prop="fileListToNotice">
        <template #default="scope">
          <p v-for="item in scope.row.fileListToNotice" @click="ClickNmae(item.url)" style="cursor: pointer; color: #00a8ff">
            {{ item.originalName }}
          </p>
        </template>
      </el-table-column>

      <el-table-column label="整改回复单" prop="fileListToReply">
        <template #default="scope">
          <p v-for="item in scope.row.fileListToReply" @click="ClickReply(item.url)" style="cursor: pointer; color: #00a8ff">
            {{ item.originalName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="整改时限" prop="rectifyTime" />
      <el-table-column label="整改方式" prop="rectifyType" />
      <el-table-column label="责任人电话" prop="peoplePhone" width="155" />
      <el-table-column label="责任人" prop="peopleName" />
      <el-table-column label="整改回复时间" prop="replyTime" width="155" />
    </el-table>
  </div>
</template>

<script setup>
import { patrolProblemRectifyID } from '@/api/longoPeration/CaseIssues';
const props = defineProps({
  // 数据
  DataList: {
    type: Array,
    default: null,
  },
});
const { proxy } = getCurrentInstance();
const dataList = ref([]);

/** 搜索列表 */
const getList = async IdA => {
  let res = await patrolProblemRectifyID(IdA);
  dataList.value = Array(res.data);
  console.log(dataList.value);
};

function ClickNmae(val) {
  window.open(val);
}
function ClickReply(val) {
  window.open(val);
}

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

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