<template>
  <div class="gl-page-content" v-if="!showProjectDetailVisible">
    <div class="project-table-list">
      <BaseTable
        listTitle="项目数据"
        v-model:viewType="viewType"
        showIndex
        ref="baseTableRef"
        tableName="NODE_LIST_LEVEL1"
        :api="nodeListApi"
        :searchLimitNum="3"
        :actionList="actionList"
        :exportApi="exportProjectApi"
        exportFileName="项目列表"
        :exportDict="{
          nodeSubType: 'PROJECT_TYPE',
          exeStatus:'PROJECT_EXE_STATUS'
        }"
      >
        <template #cardTemplate="{tableData}">
          <div class="project-card-box" >
            <div class="projects-grid">
              <div v-for="(project,index) in tableData" :key="project.id" @click="goProjectDetailFun(project.uuid,project.nodeName)" class="project-card">
                <img v-if="index%2!==0" src="@/assets/imgs/projectList/project-blue.png" alt="">
                <img v-else src="@/assets/imgs/projectList/project-green.png" alt="">
                <div class="bottom-box">
                  <span class="title">{{ project.nodeName }}</span>
                  <span class="status">{{ PROJECT_EXE_STATUS.O[project.exeStatus ] }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #leftOptions>
          <el-button
            icon="plus"
            @click="openProjectInfoDiaFun('create')"
            type="primary"
          >
            {{ $t('项目列表.新增') }}
          </el-button>
        </template>
        <template #nodeSubType="{row}">
          {{ PROJECT_TYPE.O[row.nodeSubType] }}
        </template>
        <template #creator="{row}">
          {{ row?.creatorObj?.nickname }}
        </template>
        <template #exeStatus="{row}">
          <span
            :class="row.exeStatus === PROJECT_EXE_STATUS_CODE.NOT_STARTED?
              'dot dot-default':
              row.exeStatus === PROJECT_EXE_STATUS_CODE.IN_PROGRESS?
                'dot dot-in-precess':
                row.exeStatus === PROJECT_EXE_STATUS_CODE.COMPLETED?
                  'dot dot-success':
                  row.exeStatus === PROJECT_EXE_STATUS_CODE.PAUSED?
                    'dot dot-approving':
                    row.exeStatus === PROJECT_EXE_STATUS_CODE.POSTPONED?
                      'dot dot-refuse':'dot dot-default'"
          >.</span>
          {{ PROJECT_EXE_STATUS.O[row.exeStatus] }}
        </template>
        <template #memberList="{row}">
          {{ disposeMemberList(row) }}
        </template>
      </BaseTable>
    </div>
  </div>
  <projectInfoDialog
    ref="basePageRef"
    v-model="showProjectInfoDialog"
    :projectId="currentProjectBaseInfo.uuid"
    :nodeLevel1List="baseTableRef?.tableData||[]"
    @update:currentProjectBaseInfo="updateCurrentProjectBaseInfoFun"
    @nextPageFun="nextPageFun"
    @completeFun="completeFun"
  />
  <ProjectDetail
    v-if="showProjectDetailVisible"
    :projectName="currentProject.nodeName"
    :projectUuid="currentProject.uuid"
    @goBack="showProjectDetailVisible = false"
  ></ProjectDetail>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import projectInfoDialog from '@/components/project/projectInfoDialog.vue';
// import { useRouter } from 'vue-router';
import { deleteNodeApi, exportProjectApi, queryNodeListApi } from '@/api/project/node';
import { ElMessage } from 'element-plus';
import { NODE_TYPE } from '@/utils/enum/node';
import { disposeMemberList } from '../projectDetail/components/project';
import { useDict } from '@/utils/useDict';
import dayjs from 'dayjs';
import ProjectDetail from '../projectDetail/index.vue';
import { PROJECT_EXE_STATUS_CODE } from '@/utils/enum/project';

export interface IUserInfo {
  id: number;
  company: string | null;
  creator: string;
  createTime: string;
  updater: string | null;
  updateTime: string | null;
  tenantId: string | null;
  nodeId: string;
  identity: string;
  name: string;
}

interface IProjectInfo {
  [key:string]: string;
  id: string;
  uuid: string;
  nodeName: string;
  nodeCode: string;
  nodeType: string;
  nodeSubType: string;
  memberList: any;
  progressStatus: string;
  currentNode: string;
  beginTime: string;
  endTime: string;
  actualStartTime: string;
  actualEndTime: string;
  description: string;
}

const actionList = ref<any>([
  {
    title: '查看',
    type: 'primary',
    click: (row: any) => {
      goProjectDetailFun(row.uuid, row.nodeName);
    },
  },
  {
    title: '编辑',
    type: 'primary',
    click: (row: any) => {
      openProjectInfoDiaFun('edit', row);
    },
  },
  {
    title: '删除',
    type: 'danger',
    needConfirm: true,
    confirmTip: '确认删除吗？',
    click: (row: any) => {
      deleteNodeFun(row);
    },
  },
]);

// const router = useRouter();
const basePageRef = ref();
const nodePageRef = ref();

const { PROJECT_TYPE, PROJECT_EXE_STATUS } = useDict('PROJECT_TYPE', 'PROJECT_EXE_STATUS');

const showProjectInfoDialog = ref(false);
const showNodeInfoDialog = ref(false);
const showTaskDialog = ref(false);

const showProjectDetailVisible = ref(false);

const dialogType = ref('create'); // create 编辑 edit
const currentProjectBaseInfo = reactive<any>({
  id: '',
  exeStatus: '',
  uuid: '',
  nodeName: '',
  nodeCode: '',
  nodeType: '',
  nodeSubType: '',
  progressStatus: '',
  currentNode: '',
  beginTime: '',
  endTime: '',
  actualStartTime: '',
  actualEndTime: '',
  description: '',
  memberList: [],
});

const viewType = ref('list');

const currentRow = ref();

const openProjectInfoDiaFun = (tag:string, row?:IProjectInfo) => {
  dialogType.value = tag;
  showProjectInfoDialog.value = true;
  currentRow.value = row;
  if (tag === 'edit' && row) {
    Object.keys(currentProjectBaseInfo).forEach(key => {
      (currentProjectBaseInfo as any)[key] = (row as any)[key];
    });
    currentProject.nodeName = row.nodeName;
    currentProject.uuid = row.uuid;
  } else {
    Object.keys(currentProjectBaseInfo).forEach(key => {
      (currentProjectBaseInfo as any)[key] = '';
    });
    currentProject.nodeName = '';
    currentProject.uuid = '';
  }
  console.log('currentProjectBaseInfo', currentProjectBaseInfo);
};

const currentProject = reactive({
  nodeName: '',
  uuid: '',
});
const goProjectDetailFun = (uuid:string, nodeName:string) => {
  showProjectDetailVisible.value = true;
  currentProject.nodeName = nodeName;
  currentProject.uuid = uuid;

  // router.push({ path: '/task/projectDetail', query: { nodeId: uuid, nodeName } });
};

const nodeListApi = async(params:any) => {
  const res:any = await queryNodeListApi({ ...params, nodeType: NODE_TYPE.PROJECT });
  if (res && res.code === 200) {
    res.data.data = res.data.data.map((item:any) => {
      if (item.beginTime && item.endTime) {
        const now = new Date();
        if (dayjs(now).isBefore(item.beginTime)) {
          item.progress = 0;
        }
        else if (dayjs(item.endTime).isBefore(now)) {
          item.progress = 100;
        } else {
          const progress = dayjs(now).diff(item.beginTime) / dayjs(item.endTime).diff(item.beginTime);
          // console.log('progress', progress);
          item.progress = Number(progress.toFixed(4)) * 100;
          // console.log('item.progress', item.progress);
        }
      } else {
        item.progress = 0;
      }
      return item;
    });
    // console.log('res', res);
    return res;
  }
  // else {
  //   ElMessage.error('不能提交空数据');
  // }
};

const updateCurrentProjectBaseInfoFun = (info:any) => {
  for (const key in currentProjectBaseInfo) {
    currentProjectBaseInfo[key] = info[key];
  }
  console.log('currentProjectBaseInfo', currentProjectBaseInfo);
};

const nextPageFun = (step:string) => {
  console.log('nodePageRef?.nodeTableList', nodePageRef.value?.nodeTableList);
  if (step === 'basePage') {
    showProjectInfoDialog.value = false;
    showNodeInfoDialog.value = true;
  }
  if (step === 'nodePage') {
    showNodeInfoDialog.value = false;
    showTaskDialog.value = true;
  }
};

// const prePageFun = (step:string) => {
//   if (step === 'nodePage') {
//     showNodeInfoDialog.value = false;
//     showProjectInfoDialog.value = true;
//   }
//   if (step === 'taskPage') {
//     showTaskDialog.value = false;
//     showNodeInfoDialog.value = true;
//   }
// };

const baseTableRef = ref();

const completeFun = async (page:string) => {
  if (page === 'nodePage') {
    await basePageRef.value.createProject();
    console.log('currentProjectBaseInfo', currentProjectBaseInfo);
    nodePageRef.value.addNodeDisposeFun(nodePageRef.value.nodeTableList, currentProjectBaseInfo.id);
  }
  baseTableRef.value.resetFun({});
};

const deleteNodeFun = async(row:IProjectInfo) => {
  console.log('删除节点', row);
  // 调用删除接口
  const res:any = await deleteNodeApi({ deleteNodeIdList: [ row.uuid ] });
  if (res && res.code === 200) {
    ElMessage.success('删除项目成功');
  } else {
    ElMessage.error(res.msg || '删除项目失败');
  }
  baseTableRef.value.resetFun({});
};

</script>

<style lang="scss" scoped>
.gl-page-content {
              .project-car-list {
        width: 100%;
        // // overflow-y: auto;
        // // height: calc(100% - 16px);
        // // margin-top: 16px;
        // display: flex;
        // flex-wrap: wrap;
        // gap: @DEFAULT_PADDING;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        // padding-right: 5px;
        .filter-btn {
          text-align: right;
          margin: 10px 0;
        }
        .project {
          // width: calc(25% - 9px);
          height: 156px;
          display: flex;
          justify-content: space-between;
          padding: 12px;
          border-radius: 6px;
          position: relative;

          overflow: hidden;
          border: 1px solid red;
          .progress {
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }

        .activeProject {
          // background-color: @DEFAULT_THEME_BACKGROUND_COLOR;
          border: 2px solid red;
          // color: #fff;
          box-shadow: 0 0 5px 2px #d3d0f0;

          .projectCenter {
            .projectName {
              font-size: 14px;
              // color: #fff;
            }
          }

          .name {
            font-weight: 700;
          }
        }

        .circle {
          display: inline-block;
          width: 10px;
          height: 10px;
          position: absolute;
          top: 6px;
          right: 6px;
          margin-right: 0;
        }
      }
}

.projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;

        }

        .project-card {
          height: 160px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            // padding: 18px;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .bottom-box {
              position: absolute;
              left: 0;
              bottom: 0;
              height: 40px;
              width: 100%;
              border-radius: 8px;
              background-color: #fff;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 20px;

              .status {
                background-color: #F4F4F5;
                border: 1px solid #E0E0E0;
                font-size: 12px;
                padding: 2px 10px;
                border-radius: 4px;
                width: 60px;
                height: 25px;
                text-align: center;
              }
            }
        }

        .project-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            border-color: #cbd5e1;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .project-icon {
            width: 36px;
            height: 36px;
            background-color: #ef4444;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: bold;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .title-section {
            flex-grow: 1;
        }

        .project-title {
            font-size: 16px;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .project-manager {
            font-size: 12px;
            color: #64748b;
        }

        .project-info {
            margin-bottom: 16px;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 13px;
        }

        .info-label {
            color: #64748b;
            font-weight: 500;
        }

        .info-value {
            color: #1e293b;
            font-weight: 500;
        }

        .status-badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            display: inline-block;
        }

        .status-planning {
            background-color: #eff6ff;
            color: #3b82f6;
        }

        .status-progress {
            background-color: #ecfdf5;
            color: #10b981;
        }

        .status-delayed {
            background-color: #fef2f2;
            color: #ef4444;
        }

        .status-no-start {
            background-color: #f8fafc;
            color: #64748b;
        }

        .progress-section {
            margin-top: 18px;
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 13px;
        }

        .progress-label {
            color: #64748b;
        }

        .progress-value {
            color: #3b82f6;
            font-weight: 600;
        }

        .progress-bar {
            height: 6px;
            background-color: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 3px;
            transition: width 0.5s ease;
        }

        .date-row {
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            font-size: 12px;
            color: #64748b;
        }
</style>
