<template>
  <div class="approval-page">
    <div class="approval-page-content">
      <loadCaseTable
        :editMode="false"
        ref="treeTableRef"
        readonly
        tableName="PROJECT_TASK_PLANNING"
        :data="mergedPreviewTree"
        :hasOperationColumn="false"
        :showCheckBox="false"
        :rowClassName="rowClassName"
      >
      </loadCaseTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import loadCaseTable from '@/components/common/treeCaseTable/loadCaseTable.vue';
import { getTaskTreeFun } from '@/views/task/projectDetail/components/projectApi';

const props = defineProps({
  pageData: {
    type: Object,
    default: () => {},
  },
});

const mergedPreviewTree = ref<any>([]);
const addUuids = ref<any>([]);
const delUuids = ref<any>([]);
const editUuids = ref<any>([]);
const isCreatePool = ref(false);
// 获取审批内容
const getapprovalCOntentFun = async (data: any) => {
  const approveContents = JSON.parse(data?.approveContents as string);

  const { phaseNodeId, projectNodeId, deleteNodeList, editNodeList, addNodeList } = approveContents;

  getUUids(deleteNodeList, delUuids.value);
  getUUids(editNodeList, editUuids.value);
  getUUids(addNodeList, addUuids.value);

  const treeData = await getTaskTreeFun(projectNodeId, phaseNodeId);

  if (treeData.length) {
    mergedPreviewTree.value = treeData;
    isCreatePool.value = false;
  } else {
    mergedPreviewTree.value = addNodeList;
    isCreatePool.value = true;
  }
};

const getUUids = (list: any, arr: any) => {
  for (let i = 0; i < list.length; i++) {
    if (list[i].uuid) {
      arr.push(list[i].uuid);
    }
    if (list[i].nodeId) {
      arr.push(list[i].nodeId);
    }
    if (list[i]?.children?.length) {
      getUUids(list[i]?.children, arr);
    }
  }
};

const rowClassName: any = ({ row }: any) => {
  if (!row) return '';
  if (isCreatePool.value) {
    return 'preview-added';
  }
  if (addUuids.value.includes(row.uuid) || addUuids.value.includes(row.nodeId)) {
    return 'preview-added';
  } else if (editUuids.value.includes(row.uuid) || editUuids.value.includes(row.nodeId)) {
    return 'preview-updated';
  } else if (delUuids.value.includes(row.uuid) || delUuids.value.includes(row.nodeId)) {
    return 'preview-deleted';
  }
  return '';
};

onMounted(async () => {
  if (props.pageData) {
    getapprovalCOntentFun(props.pageData);
    console.log(props.pageData, 'props.pageData');
  }
});
</script>

<style lang="scss" scoped>
.approval-page {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .approval-page-tooltips {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .approval-page-content {
    width: 100%;
    // height: calc(100% - 40px);
    height: 100%;
  }
}

.legend-color.added {
  background-color: var(--el-color-success-light-7);
}

.legend-color.updated {
  background-color: var(--el-color-primary-light-7);
}

.legend-color.deleted {
  background-color: var(--el-color-danger-light-7);
}
</style>
