<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 status">状态</div>
          <div class="header-item owner">负责人</div>
          <div class="header-item follower">跟进人</div>
          <div class="header-item task">任务（总数 / 已通过 / 待确认）</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 }}</div>
          <div class="project-info">
            <div class="info-item status">
              <dict-tag :options="dict.type.project_status" :value="item.status" size="small"/>
            </div>
            <div class="info-item owner">
              <span class="value">{{ item.ownerName }}</span>
            </div>
            <div class="info-item follower">
              <span class="value">{{ item.followName }}</span>
            </div>
            <div class="info-item task">
              <span class="value">
                <el-link class="task-count" type="primary" :underline="false">{{ item.taskCount }}</el-link>
                / 
                <el-link class="task-count" type="success" :underline="false">{{ item.taskPassCount }}</el-link>
                / 
                <el-link class="task-count" type="warning" :underline="false">{{ item.taskWaitConfirmCount }}</el-link>
              </span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-empty v-if="projectList.length === 0" description="暂无数据" />
  </el-card>
</template>

<script>
import { listProject } from '@/api/bst/project';

export default {
  name: 'ProjectListPanel',
  dicts: ['project_status'],
  data() {
    return {
      projectList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'createTime',
        isAsc: 'desc'
      }
    }
  },
  created() {
    this.getList();
  },
  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: 2;
      }

      .header-info {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 3;

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

          &.owner, &.follower {
            flex: 1;
          }

          &.task {
            flex: 2;
          }

          &.status {
            flex: 1;
            justify-content: center;
          }
        }
      }
    }
  }

  .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: 2;
      }

      .project-info {
        display: flex;
        align-items: center;
        gap: 24px;
        flex: 3;

        .info-item {
          display: flex;
          align-items: center;

          &.owner, &.follower {
            flex: 1;
          }

          &.task {
            flex: 2;
          }

          .task-count {
            font-size: 18px;
          }

          &.status {
            flex: 1;
            justify-content: center;
          }

          .label {
            display: none;
          }

          .value {
            color: #606266;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>