<template>
  <div class="comp-content">

    <!-- <el-button @click="openTaskDetailDialogFun()">
      测试打开任务详情
    </el-button> -->
    <loadCaseTable
      ref="treeTableRef"
      tableName="PROJECT_TASK_TREE_LIST"
      :data="tableList"
      readonly
      :loading="tableLoading"
      :specialActionList="[{
        title: '查看详情',
        type: 'primary',
        click: (row: any) => {
          openTaskDetailDialogFun(row);
        },
      }]"
    >
      <template #otherLeftOptions>
        <el-form label-width="60">
          <el-form-item label="阶段：" class="phase-content">
            <el-select
              class="phase-select"
              @change="updatePhaseUuid"
              v-model="phaseUuid"
              placeholder="阶段"
              :options="phaseListOptions"
            >
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <!-- <template #exportBtn>
        <el-button class="export-btn" @click="exportTaskFun">导出</el-button>
      </template> -->
      <!-- <template #otherTableActions="{ row }">
        <el-button
          type="primary"
          v-if="row.nodeType === NODE_TYPE.TASK"
          link
          @click="openTaskDetailDialogFun(row)"
        >查看详情</el-button>
      </template> -->

    </loadCaseTable>

    <!-- <loadcase-pro-table
      :loading="tableLoading"
      ref="tableRef"
      :columns="tableColumns"
      :dataSource="tableList"
      :checkStrictly="true"
      :leftVisible="true"
      :leftButtonVisible="false"
      :readonly="true"
      :excludeOperation="[]"
      :projectUuid="projectUuid"
      :phaseUuid="phaseUuid"
      :toolbarConfig="{
        enabled: true,
        custom: true,
        slots: {
          tools: 'toolbar_tools',
          buttons: 'toolbar_buttons',
        },
      }"
      :showHeader="false"
    >
      <template #toolbar_tools_left_extra>
        <el-form label-width="60px">
          <el-form-item label="阶段：" class="phase-content">
            <el-select
              class="phase-select"
              @change="updatePhaseUuid"
              v-model="phaseUuid"
              placeholder="阶段"
              :options="phaseListOptions"
            >
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #exportBtn>
        <el-button class="export-btn" @click="exportTaskFun">导出</el-button>
      </template>
      <template #detail_default="{ row }">
        <el-button
          type="primary"
          v-if="row.nodeType === NODE_TYPE.TASK"
          link
          @click="openTaskDetailDialogFun(row)"
        >查看详情</el-button>
      </template>
    </loadcase-pro-table> -->

    <taskDetail
      v-if="showTaskDetailDialog"
      :taskId="currentTaskInfo.id"
      :current-task-info="currentTaskInfo"
      @closeFn="showTaskDetailDialog = false"
      @updateFn="updateTaskInfoFun"
    >
    </taskDetail>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getTaskTreeFun } from './projectApi';
import { NODE_TYPE } from '@/utils/enum/node';
import { getChildrenNodeListApi, modifyNodeTaskPerformanceApi } from '@/api/project/node';
import taskDetail from './taskDetail.vue';
import loadCaseTable from '@/components/common/treeCaseTable/loadCaseTable.vue';
import { getTagMapList } from '@/utils/task';

const props = defineProps<{
  projectUuid: string;
}>();

const tableList = ref<any[]>([]);
const tableLoading = ref(false);
const phaseUuid = ref<any>('');

// const getTaskTreeFun = async() => {
//   const res:any = await getTaskTreeApi({
//     phaseNodeId: props.projectUuid,
//   });
//   if(res.code === 200) {
//     tableList.value = res.data;
//   }
// };
const updatePhaseUuid = async (value: string) => {
  tableLoading.value = true;
  phaseUuid.value = value;
  await getTaskTreeList();
  console.log('getTaskTreeFun----------------tableList.value', tableList.value);
  // nextTick(() => {
  //   tableRef.value.changeLevel('全部展开');
  // });
  tableLoading.value = false;
};

const treeTableRef = ref();

const getTaskTreeList = async () => {
  tableList.value = await getTaskTreeFun(props.projectUuid, phaseUuid.value);
  setTimeout(() => {
    treeTableRef.value.loadcaseTableRef.TreeTableRef.treeTableRef.setAllTreeExpand(true);
  }, 200);
};

const phaseListOptions = ref<any[]>([]);
const getPhaseListApi = async () => {
  const res: any = await getChildrenNodeListApi({
    current: 1,
    size: 999,
    nodeType: NODE_TYPE.PHASE,
    nodeId: props.projectUuid,
  });
  if (res && res.code === 200) {
    phaseListOptions.value = res.data.map((item: { nodeName: string; uuid: string }) => {
      return { label: item.nodeName, value: item.uuid, info: item };
    });
    // console.log('nodeLevel2ListOptions', nodeLevel2ListOptions.value);
    if (phaseListOptions.value.length) {
      // 没选中阶段 或者 选中了阶段但是不在阶段列表中
      if (!phaseListOptions.value.some(item => {
        return phaseUuid.value === item.value;
      })) {
        phaseUuid.value = phaseListOptions.value[0].value;
        updatePhaseUuid(phaseListOptions.value[0].value);
      }
    }
  } else {
    phaseListOptions.value = [];
  }
};

const showTaskDetailDialog = ref(false);

// 测试打开任务详情窗口
const currentTaskInfo = ref<any>({});
const openTaskDetailDialogFun = (row?: any) => {
  if (row) {
    currentTaskInfo.value = row;
  }
  showTaskDetailDialog.value = true;
};

const updateTaskInfoFun = async (info:any) => {
  const { flag, data }:any = info;

  console.log(flag, 'flag');
  console.log(data, 'data');

  if (flag === 'info') {
    const res:any = await modifyNodeTaskPerformanceApi({
      addNodeList: [],
      editNodeList: [data],
      deleteNodeList: [],
      ownRootNodeUuid: data.tag1,
      tagMap: getTagMapList(),
    });

    if (res && res.code === 200) {
      await getTaskTreeList();
    }
  }

  showTaskDetailDialog.value = false;

};

const refreshPhaseList = () => {
  getPhaseListApi();
};

onMounted(async () => {
  getPhaseListApi();
  // setTimeout(async() => {
  //   const tableData: any =
  //   await tableRef.value?.loadcaseTableRef.proTreeRef.getTableData();
  //   console.log('insertRecords, removeRecords, updateRecords', tableData);
  // }, 2000);
});

// watch(
//   () => props.projectUuid,
//   async (newVal) => {
//     console.log('newVal', newVal);
//     if (newVal) {
//       tableList.value = await getTaskTreeFun(phaseUuid.value);
//       console.log('tableList.value', tableList.value);
//       nextTick(() => {
//         tableRef.value.changeLevel('全部展开');
//       });
//     }
//   });

defineExpose({
  refreshPhaseList,
  getTaskTreeList,
});

</script>
<style lang="scss" scoped>
.export-btn {
  margin-right: var(--margin-small)
}
.comp-content {
  height: 100%;
  width: 100%;
}

.gl-page-content {
  height: 0;
}

// :deep(.vxe-toolbar .vxe-buttons--wrapper) {
//   justify-content: flex-start;
// }

.phase-content {
  margin-bottom: 0;
}

.phase-select {
  width: 120px;
}
</style>
