<template>
  <div :class="$style.projectMain">
    <a-empty v-if="projectList.length === 0" :image="simpleImage" />
    <div v-for="project in projectList" :key="project.id" :class="$style.projectDiv">
      <div :class="$style.projectInfo">
        <div :class="$style.projectTitle" :title="project.projectTitle"
          ><div :class="$style.titlePoint"></div
          ><a :title="project.projectTitle" @click="openProject(project)">
            {{ project.projectTitle }}</a
          ></div
        >
        <div
          :class="$style.projectDate"
          :title="formatmoment(project.planStartTime) + '~' + formatmoment(project.planEndTime)"
        >
          {{ formatmoment(project.planStartTime) }}~
          {{ formatmoment(project.planEndTime) }}
        </div>
        <!-- <div :class="$style.projectStatus" :title="getProjectStage(project)">
          {{ getProjectStage(project) }}
        </div> -->
        <div :class="$style.projectUser" :title="project.groupLeaderName">
          {{ project.groupLeaderName }}
        </div>
      </div>

      <!-- <div :class="$style.projectNode">
        <span
          v-for="node in getProjectNode(project)"
          :key="node.id"
          :class="$style.projectNodes"
          @click="gotoWork(project.id, node)"
        >
          {{ node.nodeName }}
        </span>
      </div> -->
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import IamMyprojectService from './iam-myproject-service'
import components from './_import-components/my-project-list-import'

export default {
  name: 'MyProjectList',
  metaInfo: {
    title: 'MyProjectList',
  },
  components,
  props: {
    listType: {
      default: 'myProject',
      type: String,
    },
  },
  data() {
    return {
      projectList: [],
    }
  },
  mounted() {
    this.initProjectList()
  },
  methods: {
    // 打开项目信息
    openProject(record) {
      if (
        record.operatePermission ||
        record.itemStatus === '02' ||
          record.itemStatus === '03' ||
          record.itemStatus === '04' ||
          record.itemStatus === '05' ||
          record.itemStatus === '07'
      ) {
        window.open('#/audit-work/?projectId=' + record.id)
      } else {
        var url = '#/audit-project-detail?record=' + record.id
        window.open(url)
      }
    },
    // 跳转至项目作业
    gotoWork(projectId, nodeinfo) {
      window.open(
        '#/audit-work/' +
          nodeinfo.nodeUrl +
          '?projectId=' +
          projectId +
          '&worktype=' +
          nodeinfo.nodePeriod +
          '-' +
          nodeinfo.id +
          '&nodeurl=' +
          nodeinfo.nodeUrl
      )
    },
    // 获取项目节点信息
    getProjectNode(project) {
      let nodes = []
      if (project.itemStatus === '01') {
        return []
      } else {
        if ((project.projectStage === null) | (project.projectStage === 'file-done')) {
          nodes = project.nodeinfo.filter((item) => {
            return item.nodePeriod === 'file-done'
          })
        } else if (project.projectStage === 'profile') {
          nodes = project.nodeinfo.filter((item) => {
            return item.nodePeriod === 'profile'
          })
        } else if (project.projectStage === 'file-text') {
          nodes = project.nodeinfo.filter((item) => {
            return item.nodePeriod === 'file-text'
          })
        }
        return nodes
      }
    },
    // 获取项目状态
    // getProjectStage(project) {
    //   if (project.itemStatus === '01') {
    //     return '未启动'
    //   } else {
    //     if (project.projectStage === 'profile') {
    //       return '实施阶段'
    //     } else if (project.projectStage === 'file-text') {
    //       return '报告阶段'
    //     } else if ((project.projectStage === null) | (project.projectStage === 'file-done')) {
    //       return '准备阶段'
    //     }
    //   }
    // },
    // 格式化时间
    formatmoment(val) {
      return moment(val).format('YYYY-MM-DD')
    },
    // getColumns(listType) {
    //   return [
    //     {
    //       title: 'id',
    //       dataIndex: 'id',
    //       scopedSlots: { customRender: 'bt' },
    //     },
    //   ]
    // },

    //  初始化项目列表
    initProjectList() {
      IamMyprojectService.getMyProjectInfo().then((res) => {
        this.$emit('setProjectNums', res.totalSize)
        res.data.forEach((item, index) => {
          // 已关闭、已归档、已取消的项目不在列表展示
          if (item.itemStatus === '05' || item.itemStatus === '06' || item.itemStatus === '07') {
            return
          }
          this.projectList.push(item.id)
          // if (index < 4) {
          // 获取详细信息
          IamMyprojectService.getProjectInfoById(item.id).then((projectinfo) => {
            // 再获取详细节点信息
            IamMyprojectService.getPorjectWorkNodeInfo(projectinfo.id).then((nodeinfo) => {
              projectinfo.nodeinfo = nodeinfo
              this.projectList.splice(this.projectList.indexOf(item.id), 1, projectinfo)
              // this.projectList.push()
            })
          })
          // }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.item {
  padding: 0 25px;
}
.project-main {
  margin-top: -13px;
  .project-div:not(:first-child) {
    border-top: 1px solid #f3f3f3;
  }
}
.project-div {
  display: inline-flex;
  width: 100%;
  height: 45px;
  overflow: auto;
  overflow-y: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 45px;
  color: #000;
  white-space: nowrap;
  .project-info {
    float: left;
    width: 100%;
    div {
      float: left;
    }
    .project-title {
      a {
        color: #0870f1;
      }

      position: relative;
      width: 60%;
      padding-right: 30px;
      padding-left: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .title-point {
        position: absolute;
        top: 22px;
        left: 0;
        width: 5px;
        height: 5px;
        background: #2775e2;
        border-radius: 5px;
      }
    }
    .project-date {
      width: 20%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .project-user {
      width: 15%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .project-status {
      width: 15%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .project-node {
    float: right;
    width: 40%;
    overflow: auto;
    overflow-y: hidden;
    .project-nodes {
      color: #0870f1;
      cursor: pointer;
    }
    .project-nodes:not(:first-child) {
      margin-left: 20px;
    }
  }
}
</style>
