<template>
  <el-card class="project-list" v-loading="loading">
    <div slot="header">
      <span>项目列表</span>
      <el-button
        style="float: right;"
        size="mini"
        type="text"
        v-has-permi="['bst:project:list']"
        @click="handleClickAllProject">
        查看全部 <i class="el-icon-d-arrow-right"/>
      </el-button>
    </div>
    <div class="list-header">
      <div class="header-content">
        <div class="header-name">项目名称</div>
        <div class="header-info">
          <div class="header-item f2">截止时间</div>
          <div class="header-item f1">任务总数</div>
          <div class="header-item f1">通过</div>
          <div class="header-item f1">待确认</div>
        </div>
      </div>
    </div>
    <div v-for="item in projectList" :key="item.id" class="project-item" @click="handleClickProject(item)">
      <el-card shadow="hover" :body-style="{ padding: '10px' }">
        <div class="project-content">
          <div class="project-name">
            {{ item.name | dv}}
            <dict-tag :options="dict.type.project_status" :value="item.status" size="mini" style="margin-left: 10px;" />
            <el-tag type="danger" v-if="isExpireSoon(item)" style="margin-left: 10px" size="mini">即将到期</el-tag>
          </div>
          <div class="project-info">
            <div class="info-item f2">
              {{ getProjectExpireTime(item) | dv}}
            </div>
            <div class="info-item f1">
              <el-link class="task-count" type="primary" :underline="false">{{ item.taskCount }}</el-link>
            </div>
            <div class="info-item f1">
              <el-link class="task-count" type="success" :underline="false">{{ item.taskPassCount }}</el-link>
            </div>
            <div class="info-item f1">
              <el-link class="task-count" type="warning" :underline="false">{{ item.taskWaitConfirmCount }}</el-link>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-empty v-if="projectList.length === 0" description="暂无数据" />
  </el-card>
</template>

<script>
import { listProject } from '@/api/bst/project';
import { ProjectUtils } from '@/views/bst/project/utils';
import BooleanTag from '@/components/BooleanTag';

export default {
  name: 'ProjectListPanel',
  dicts: ['project_status'],
  components: {
    BooleanTag
  },
  data() {
    return {
      projectList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'createTime',
        isAsc: 'desc'
      }
    }
  },
  created() {
    this.getList();
  },
  computed: {
    // 获取项目截止时间
    getProjectExpireTime() {
      return (item) => {
        return ProjectUtils.getProjectExpireTime(item).value;
      }
    },
    // 判断项目是否逾期
    isExpireSoon() {
      return (item) => {
        return ProjectUtils.isExpireSoon(item);
      }
    }
  },
  methods: {
    handleClickAllProject() {
      this.$router.push('/project/project');
    },
    getList() {
      this.loading = true;
      listProject(this.queryParams).then(res => {
        this.projectList = res.rows;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 处理点击项目
    handleClickProject(item) {
      this.$router.push(`/view/project/${item.id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-list {
  .list-header {
    padding: 0 15px;
    margin-bottom: 12px;

    .header-content {
      display: flex;
      align-items: center;

      .header-name {
        font-size: 14px;
        font-weight: 500;
        color: #606266;
        flex: 1;
      }

      .header-info {
        display: flex;
        align-items: center;
        gap: 24px;
        min-width: 400px;

        .header-item {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
          text-align: center;

          &.f1 {
            flex: 1;
          }

          &.f2 {
            flex: 2;
          }
        }
      }
    }
  }

  .project-item {
    margin-bottom: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .project-content {
      display: flex;
      align-items: center;

      .project-name {
        font-size: 15px;
        font-weight: 500;
        color: #303133;
        flex: 1;
        display: flex;
        align-items: center;
      }

      .project-info {
        display: flex;
        align-items: center;
        gap: 24px;
        font-size: 13px;
        color: #606266;
        min-width: 400px;

        .info-item {
          text-align: center;

          &.f1 {
            flex: 1;
          }

          &.f2 {
            flex: 2;
          }

          .task-count {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
