<template>
  <div class="JindDuFenXi">
    <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column type="index" label="序号" width="180">
        <template #default="{ $index }">
          <span>{{ $index }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fillTime" label="时间" width="180" />
      <el-table-column prop="nodeName" label="目标计划" />
      <el-table-column prop="timeoutDays" label="实际完成">
        <template #default="{ row }">
          <span>{{ row.timeoutDays ? `延迟了${row.timeoutDays}天完成` : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="scheduleVariance" label="进度偏差">
        <template #default="{ row }">
          <span>{{ row.scheduleVariance || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="planDescription" label="原因分析" />
    </el-table>
  </div>
</template>

<script setup name="JindDuFenXi">
import { ref, onMounted, inject } from 'vue';
import { getSelectPlanHomeInfoByProjectNo } from '@/api/sponeScreen/gcpjApi';
const getProjectInfo = sessionStorage.getItem('getProjectInfo')
const tableData = ref([]);
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {
    if ([0, 1].includes(columnIndex)) {
      return [0, 0];
    } else if (columnIndex === 2) {
      return [1, 3];
    }
  }
};

const getData = async () => {
  if (!getProjectInfo) return;
  const res = await getSelectPlanHomeInfoByProjectNo(getProjectInfo);
  if (res?.code !== 200) return;
  tableData.value = res.data || [];
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>