<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">{{ detail.name }}</span>
            <dict-tag :options="dict.type.project_status" :value="detail.status" />
          </div>
          <div class="amount-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="amount-item">
                  <div class="amount-label">项目金额</div>
                  <div class="amount-value">¥ {{ detail.amount | fix2 | dv}}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="amount-item">
                  <div class="amount-label">已收金额</div>
                  <div class="amount-value">¥ {{ detail.receivedAmount | fix2 | dv}}</div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="amount-item">
                  <div class="amount-label">运维费用</div>
                  <div class="amount-value">{{ detail.operationAmount | dv}}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 基本信息 -->
        <el-card class="box-card main-info">
          <div class="info-content">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="项目编号">
                {{ detail.no | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="所属客户">
                {{ detail.customerName | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="到期时间">
                {{ detail.expireTime | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="负责人">
                {{ detail.ownerName | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="跟进人">
                {{ detail.followName | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="创建人">
                {{ detail.createName | dv}}
              </el-descriptions-item>
              <el-descriptions-item label="备注" :span="3">
                {{ detail.remark | dv}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>

        <!-- 附件信息 -->
        <el-card class="box-card" v-if="attaches.length > 0">
          <div slot="header" class="info-header">
            <span class="card-title">附件信息</span>
            <span class="attach-count">共 {{ attaches.length }} 个附件</span>
          </div>
          <attach-list :file-list="attaches" :column="4" />
        </el-card>
      </el-col>

      <el-col :span="6">
        <!-- 时间线 -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="card-title">项目进度</span>
          </div>
          <div class="timeline-content">
            <el-timeline>
              <el-timeline-item
                v-if="detail.createTime"
                :timestamp="detail.createTime"
                placement="top"
                type="primary"
              >
                <div class="timeline-title">创建项目</div>
              </el-timeline-item>

              <el-timeline-item
                v-if="detail.startTime"
                :timestamp="detail.startTime"
                placement="top"
                type="warning"
              >
                <div class="timeline-title">开始开发</div>
                <div class="timeline-extra">预计完成时间：{{ detail.expectedCompleteDate }}</div>
              </el-timeline-item>

              <el-timeline-item
                v-if="detail.completeTime"
                :timestamp="detail.completeTime"
                placement="top"
                type="success"
              >
                <div class="timeline-title">开发完成</div>
              </el-timeline-item>

              <el-timeline-item
                v-if="detail.acceptTime"
                :timestamp="detail.acceptTime"
                placement="top"
                type="success"
              >
                <div class="timeline-title">项目验收</div>
              </el-timeline-item>

              <el-timeline-item
                v-if="detail.maintenanceEndDate"
                :timestamp="detail.maintenanceEndDate"
                placement="top"
                type="info"
              >
                <div class="timeline-title">运维结束</div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-card class="box-card">
        <el-tabs v-if="detail.id" lazy>
          <el-tab-pane label="任务列表">
            <task :query="{ projectId: detail.id }" :init-data="{projectId: detail.id}" :hide-columns="['projectName']"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getProject } from "@/api/bst/project";
import AttachList from '@/components/AttachList/index.vue';
import Task from '@/views/bst/task/index.vue';

export default {
  name: "ProjectView",
  components: {
    AttachList,
    Task
  },
  dicts: ['project_status'],
  data() {
    return {
      detail: {},
      loading: false,
      // 支持预览的图片格式
      imageTypes: ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
    }
  },
  computed: {
    attaches() {
      if (this.detail.attaches) {
        return this.detail.attaches.split(',');
      }
      return [];
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      getProject(this.$route.params.id).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      });
    },
    getStatusLabel(status) {
      const dict = this.dict.type.project_status;
      const item = dict.find(d => d.value === status);
      return item ? item.label : status;
    },
    // 判断是否为图片
    isImage(url) {
      if (!url) return false;
      return this.imageTypes.some(type => url.toLowerCase().endsWith(type));
    },
    // 获取所有图片URL列表（用于预览）
    getImageList() {
      if (!this.detail.attaches) return [];
      return this.detail.attaches
        .filter(item => this.isImage(item.url))
        .map(item => item.url);
    }
  }
}
</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;
      
      .card-title {
        font-size: 18px;
        font-weight: 600;
        color: #1f2f3d;
      }

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

  .card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2f3d;
  }
}

.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>