<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/gcpjApi'
const getProjectInfo = inject('getProjectInfo')
const projectInfo = 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(!projectInfo?.projectNo) return
  const res = await getSelectPlanHomeInfoByProjectNo(projectInfo.projectNo)
  if(res?.code !== 200) return
  tableData.value = res.data || []
}
onMounted(() => {
  getData()
})
</script>

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