<template>
  <div class="app-container" v-loading="loading">

    <el-row :gutter="20">
      <el-col :span="18">
        <el-card class="box-card">
          <div slot="header" class="info-header">
            <span class="card-title">项目进度</span>
            <div>
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-check"
                @click="handleStart(detail)"
                v-has-permi="['bst:project:start']"
                v-if="ProjectStatus.canStart().includes(detail.status)"
              >开始开发</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-check"
                @click="handleComplete(detail)"
                v-has-permi="['bst:project:complete']"
                v-if="ProjectStatus.canComplete().includes(detail.status)"
              >开发完成</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-check"
                @click="handleAccept(detail)"
                v-has-permi="['bst:project:accept']"
                v-if="ProjectStatus.canAccept().includes(detail.status)"
              >项目验收</el-button>
              <el-button
                size="mini"
                type="primary"
                plain
                icon="el-icon-check"
                @click="handleMaintenance(detail)"
                v-has-permi="['bst:project:maintenance']"
                v-if="ProjectStatus.canMaintenance().includes(detail.status)"
              >运行维护</el-button>
            </div>
          </div>
          <el-steps :active="stepActive" finish-status="success" process-status="finish">
            <el-step title="项目创建">
              <template slot="description">
                <div v-show="detail.createTime">创建时间：{{ detail.createTime | dv}}</div>
              </template> 
            </el-step>
            <el-step title="待开始">
              <template slot="description">
                <div v-show="detail.startTime">开始时间：{{ detail.startTime }}</div>
              </template> 
            </el-step>
            <el-step 
              :title="detail.status === ProjectStatus.DEVELOPMENT_OVERDUE ? '开发超期' : '开发中'" 
              :status="detail.status === ProjectStatus.DEVELOPMENT_OVERDUE ? 'error' : null">
              <template slot="description">
                <div v-show="detail.expectedCompleteDate">预计完成：{{ detail.expectedCompleteDate }}</div>
              </template>
            </el-step>
            <el-step title="开发完成，等待验收">
              <template slot="description">
                <div v-show="detail.completeTime">完成时间：{{ detail.completeTime }}</div>
              </template>
            </el-step>
            <el-step title="已验收">
              <template slot="description">
                <div v-show="detail.acceptTime">验收时间：{{ detail.acceptTime }}</div>
              </template>
            </el-step>
            <el-step title="维护中">
              <template slot="description">
                <div v-show="detail.maintenanceEndDate">预计结束时间：{{ detail.maintenanceEndDate | dv}}</div>
              </template>
            </el-step>
            <el-step title="维护超期">
              <template slot="description">
              </template>
            </el-step>
          </el-steps>
        </el-card>

        <!-- 基本信息 -->
        <el-card class="box-card main-info" header="基本信息">
          <el-descriptions :column="4">
            <el-descriptions-item label="项目编号">{{ detail.no | dv}}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ detail.name | dv}}</el-descriptions-item>
            <el-descriptions-item label="所属客户">
              <customer-link :id="detail.customerId" :text="detail.customerName"/>
            </el-descriptions-item>
            <el-descriptions-item label="到期时间">{{ detail.expireTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="项目金额">{{ detail.amount | fix2 | dv}} 元</el-descriptions-item>
            <el-descriptions-item label="已收金额">{{ detail.receivedAmount | fix2 | dv}} 元</el-descriptions-item>
            <el-descriptions-item label="运维费用">{{ detail.operationAmount | dv}}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{ detail.createName | dv}}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ detail.remark | dv}}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <el-col :span="6">
        <!-- 成员 -->
        <el-card class="box-card" header="项目成员">
          <el-descriptions :column="2">
            <el-descriptions-item label="负责人">{{ detail.ownerName | dv}}</el-descriptions-item>
            <el-descriptions-item label="跟进人">{{ detail.followName | dv}}</el-descriptions-item>
          </el-descriptions>
          <avatar-list :list="detail.memberList" :size="32" :char-index="-1"/>
        </el-card>
        <!-- 附件信息 -->
        <el-card class="box-card" header="附件">
          <attach-list :file-list="detail.attaches" :column="3" :max-show="3"/>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-card class="box-card">
        <el-tabs v-if="detail.id" lazy>
          <el-tab-pane label="任务列表" v-if="checkPermi(['bst:task:list'])">
            <task :query="{ projectId: detail.id }" 
              :init-data="{
                projectId: detail.id, 
                projectOwnerId: detail.ownerId, 
                projectFollowId: detail.followId, 
                projectMemberIds: detail.memberIds
              }" 
              :hide-columns="['projectName']"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>

    
    <!-- 开始开发弹窗 -->
    <project-start-dialog
      :visible.sync="showStartDialog"
      :id="detail.id"
      @success="getDetail"
    />

    <!-- 维护弹窗 -->
    <project-maintenance-dialog
      :visible.sync="showMaintenanceDialog"
      :id="detail.id"
      @success="getDetail"
    />
  </div>
</template>

<script>
import { getProject, completeProject, acceptProject } from "@/api/bst/project";
import AttachList from '@/components/AttachList/index.vue';
import Task from '@/views/bst/task/index.vue';
import { ProjectStatus } from '@/utils/enums';
import ProjectStartDialog from '@/views/bst/project/components/ProjectStartDialog.vue';
import ProjectMaintenanceDialog from '@/views/bst/project/components/ProjectMaintenanceDialog.vue';
import AvatarList from '@/components/AvatarList/index.vue';
import CustomerLink from '@/components/Business/Customer/CustomerLink.vue';
import { checkPermi } from '@/utils/permission';
export default {
  name: "ProjectView",
  components: {
    AttachList,
    Task,
    ProjectStartDialog,
    ProjectMaintenanceDialog,
    AvatarList,
    CustomerLink
  },
  dicts: ['project_status'],
  data() {
    return {
      detail: {},
      showStartDialog: false,
      showMaintenanceDialog: false,
      loading: false,
      // 支持预览的图片格式
      imageTypes: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
      // 项目状态
      ProjectStatus
    }
  },
  computed: {
    // 项目进度
    stepActive() {
      switch(this.detail.status) {
        case ProjectStatus.WAIT_START:
          return 1;
        case ProjectStatus.DEVELOPMENT_OVERDUE:
        case ProjectStatus.IN_PROGRESS:
          return 2;
        case ProjectStatus.COMPLETED:
          return 3;
        case ProjectStatus.ACCEPTED:
          return 4;
        case ProjectStatus.MAINTENANCE:
          return 5;
        case ProjectStatus.MAINTENANCE_OVERDUE:
          return 6;
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    checkPermi,
    // 验收
    handleAccept(row) {
      this.$modal.confirm('是否确认验收项目编号为"' + row.no + '"的数据项？')
      .then(() => {
        this.loading = true;
        acceptProject(row.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("验收成功");
            this.getDetail();
          }
        });
      });
    },
    // 完成项目
    handleComplete(row) {
      this.$modal.confirm('是否确认完成项目编号为"' + row.no + '"的数据项？')
      .then(() => {
        this.loading = true;
        completeProject(row.id).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("完成成功");
            this.getDetail();
          }
        }).catch(() => {
          this.loading = false;
        });
      })
    },
    // 开始开发
    handleStart(row) {
      this.showStartDialog = true;
    },
    // 维护
    handleMaintenance(row) {
      this.showMaintenanceDialog = true;
    },
    // 获取项目详情
    getDetail() {
      this.loading = true;
      getProject(this.$route.params.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>

.box-card {
  margin-bottom: 20px;
  border-radius: 8px;

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .attach-count {
      font-size: 13px;
      color: #909399;
    }
  }

  &.main-info {
    .el-card__header {
      padding: 15px 20px;
      border-bottom: 1px solid #ebeef5;

      .status-tag {
        margin-left: 12px;
      }
    }
  }

}

.info-content {
  padding: 10px 0;
}

.amount-content {
  .amount-item {
    text-align: center;
    padding: 15px;
    background: #f8f9fb;
    border-radius: 6px;
    
    .amount-label {
      color: #909399;
      margin-bottom: 8px;
      font-size: 14px;
    }
    
    .amount-value {
      color: #1f2f3d;
      font-size: 20px;
      font-weight: 600;
    }
  }
}

.timeline-content {
  .timeline-title {
    font-weight: 500;
    color: #1f2f3d;
  }
  
  .timeline-extra {
    font-size: 13px;
    color: #909399;
    margin-top: 4px;
  }
}

.remark-content {
  color: #606266;
  line-height: 1.6;
  padding: 10px;
}

.mt20 {
  margin-top: 20px;
}

// 图片预览错误状态
.image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  
  i {
    font-size: 30px;
    color: #909399;
  }
}
</style>