<template>
  <div class="bidding-info-panel">
    <!-- 开标会议信息 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Bell /></el-icon>
            开标会议信息
          </h3>
        </div>
      </template>

      <div class="info-grid">
        <!-- 开标时间 -->
        <div class="info-section">
          <h4>📅 开标时间</h4>
          <div class="info-content">
            <div class="info-item">
              <span class="label">日期:</span>
              <el-date-picker
                v-model="biddingInfo.dateValue"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 200px;"
              />
            </div>
            <div class="info-item">
              <span class="label">时间:</span>
              <el-time-picker
                v-model="biddingInfo.timeValue"
                placeholder="选择时间"
                format="HH:mm:ss"
                value-format="HH:mm:ss"
                style="width: 150px;"
              />
            </div>
            <div class="info-item">
              <span class="label">倒计时:</span>
              <el-tag type="warning" size="large">
                <el-icon><Clock /></el-icon>
                {{ biddingInfo.countdown }}
              </el-tag>
            </div>
            <div class="info-item">
              <span class="label">状态:</span>
              <el-tag type="warning" size="large">
                🟡 {{ biddingInfo.statusText }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 开标地点 -->
        <div class="info-section">
          <h4>📍 开标地点</h4>
          <div class="info-content">
            <div class="info-item">
              <span class="label">地址:</span>
              <el-input
                v-model="biddingInfo.location.address"
                placeholder="请输入开标地址"
                style="width: 300px;"
              />
            </div>
            <div class="info-item">
              <span class="label">联系电话:</span>
              <el-input
                v-model="biddingInfo.location.phone"
                placeholder="请输入联系电话"
                style="width: 200px;"
              />
            </div>
            <div class="info-item">
              <span class="label">备注:</span>
              <el-input
                v-model="biddingInfo.location.note"
                type="textarea"
                :rows="2"
                placeholder="请输入备注信息"
                style="width: 300px;"
              />
            </div>
          </div>
        </div>

        <!-- 参会人员 -->
        <div class="info-section">
          <h4>👥 参会人员</h4>
          <div class="info-content">
            <div 
              v-for="(person, index) in biddingInfo.attendees" 
              :key="index"
              class="info-item editable-person"
            >
              <span class="label">{{ person.role }}:</span>
              <div class="person-inputs">
                <el-input
                  v-model="person.name"
                  placeholder="姓名"
                  style="width: 120px;"
                />
                <el-input
                  v-model="person.phone"
                  placeholder="电话"
                  style="width: 150px;"
                />
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click="removePerson(index)"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </div>
            <el-button
              type="primary"
              plain
              size="small"
              @click="addPerson"
              style="margin-top: 12px;"
            >
              <el-icon><Plus /></el-icon>
              添加参会人员
            </el-button>
          </div>
        </div>

        <!-- 开标流程 -->
        <div class="info-section">
          <h4>📋 开标流程</h4>
          <div class="info-content">
            <el-timeline>
              <el-timeline-item
                v-for="(step, index) in biddingInfo.process"
                :key="index"
                :timestamp="step.time"
              >
                {{ step.description }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 开标记录 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Document /></el-icon>
            开标记录
          </h3>
        </div>
      </template>

      <div class="record-summary">
        <div class="summary-item">
          <span class="summary-label">参与投标单位:</span>
          <span class="summary-value">{{ biddingInfo.record.totalBidders }}家</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">我方报价排名:</span>
          <span class="summary-value highlight">第{{ biddingInfo.record.ourRanking }}名</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">最高报价:</span>
          <span class="summary-value">{{ formatPrice(biddingInfo.record.highestPrice) }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">最低报价:</span>
          <span class="summary-value">{{ formatPrice(biddingInfo.record.lowestPrice) }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">我方报价:</span>
          <span class="summary-value price">{{ formatPrice(biddingInfo.record.ourPrice) }}</span>
        </div>
        <div class="summary-item">
          <span class="summary-label">控制价:</span>
          <span class="summary-value">{{ formatPrice(biddingInfo.record.controlPrice) }}</span>
        </div>
      </div>

      <div class="bidders-table">
        <div class="table-header">
          <h4>所有投标单位报价</h4>
          <el-button type="primary" size="small" @click="addBidder">
            <el-icon><Plus /></el-icon>
            添加投标单位
          </el-button>
        </div>
        <el-table :data="biddingInfo.record.allBidders" border stripe>
          <el-table-column label="排名" width="80" align="center">
            <template #default="{ row }">
              <el-input-number
                v-model="row.rank"
                :min="1"
                :max="99"
                controls-position="right"
                size="small"
              />
            </template>
          </el-table-column>
          <el-table-column label="投标单位" min-width="250">
            <template #default="{ row }">
              <el-input
                v-model="row.company"
                placeholder="请输入投标单位名称"
                :class="{ 'our-company-input': row.isOur }"
              />
            </template>
          </el-table-column>
          <el-table-column label="报价金额" width="180" align="right">
            <template #default="{ row }">
              <el-input-number
                v-model="row.price"
                :min="0"
                :precision="2"
                :step="1000"
                controls-position="right"
                :class="{ 'our-price-input': row.isOur }"
              />
            </template>
          </el-table-column>
          <el-table-column label="工期(天)" width="120" align="center">
            <template #default="{ row }">
              <el-input-number
                v-model="row.workDays"
                :min="1"
                :max="999"
                controls-position="right"
                size="small"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template #default="{ row, $index }">
              <el-button
                link
                type="primary"
                size="small"
                @click="markAsOur($index)"
                :disabled="row.isOur"
              >
                {{ row.isOur ? '我方' : '标记为我方' }}
              </el-button>
              <el-button
                link
                type="danger"
                size="small"
                @click="removeBidder($index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="record-actions">
        <el-button type="success" @click="saveBiddingRecord">
          <el-icon><Check /></el-icon>
          保存开标记录
        </el-button>
        <el-button type="primary" @click="downloadRecord">
          <el-icon><Download /></el-icon>
          下载开标记录表
        </el-button>
      </div>
    </el-card>

    <!-- 现场照片/视频 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Picture /></el-icon>
            现场照片/视频
          </h3>
          <div class="header-actions">
            <el-button size="small" @click="uploadPhoto">
              <el-icon><Upload /></el-icon>
              上传照片
            </el-button>
            <el-button size="small" @click="uploadVideo">
              <el-icon><VideoCamera /></el-icon>
              上传视频
            </el-button>
          </div>
        </div>
      </template>

      <div class="media-grid">
        <div v-for="photo in biddingInfo.media.photos" :key="photo.url" class="media-item">
          <img :src="photo.url" :alt="photo.description" />
          <div class="media-info">
            <span class="media-desc">{{ photo.description }}</span>
            <span class="media-time">{{ photo.uploadTime }}</span>
          </div>
        </div>
      </div>

      <div v-if="biddingInfo.media.videos.length > 0" class="video-list">
        <div v-for="video in biddingInfo.media.videos" :key="video.url" class="video-item">
          <el-icon class="video-icon"><VideoCamera /></el-icon>
          <div class="video-info">
            <span class="video-desc">{{ video.description }}</span>
            <span class="video-meta">{{ video.uploadTime }} · {{ video.duration }}</span>
          </div>
          <el-button link type="primary" @click="playVideo(video)">
            <el-icon><VideoPlay /></el-icon>
            播放
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button size="large" @click="editBiddingInfo">
        <el-icon><Edit /></el-icon>
        编辑开标信息
      </el-button>
      <el-button size="large" @click="setReminder">
        <el-icon><Bell /></el-icon>
        设置开标提醒
      </el-button>
      <el-button size="large" type="primary" @click="exportReport">
        <el-icon><Download /></el-icon>
        导出开标报告
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Bell, Clock, Document, View, 
  Download, Picture, Upload, VideoCamera, VideoPlay, Edit, Delete, Plus, Check
} from '@element-plus/icons-vue'

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

// 开标信息数据
const biddingInfo = ref({
  date: '2024-12-15 (星期日)',
  time: '09:30:00',
  dateValue: '2024-12-15',  // 日期选择器绑定值
  timeValue: '09:30:00',    // 时间选择器绑定值
  countdown: '还剩6天2小时15分钟',
  statusText: '待开标',
  
  location: {
    address: 'XX市公共资源交易中心3楼开标室A',
    phone: '0791-88888888',
    note: '需携带法人授权委托书原件及身份证'
  },
  
  attendees: [
    { role: '投标代表', name: '张三', phone: '13800138000' },
    { role: '技术负责人', name: '李四', phone: '13900139000' },
    { role: '备选人员', name: '王五', phone: '13700137000' }
  ],
  
  process: [
    { time: '09:00 - 09:30', description: '签到入场' },
    { time: '09:30 - 09:45', description: '宣读开标纪律' },
    { time: '09:45 - 10:30', description: '唱标(报价、工期等)' },
    { time: '10:30 - 11:00', description: '投标文件密封检查' },
    { time: '11:00 - 11:30', description: '答疑与记录' }
  ],
  
  record: {
    totalBidders: 8,
    ourRanking: 3,
    highestPrice: 3200000.00,
    lowestPrice: 2650000.00,
    ourPrice: 2850000.00,
    controlPrice: 3500000.00,
    
    allBidders: [
      { rank: 1, company: 'XX机电设备有限公司', price: 2650000.00, workDays: 55 },
      { rank: 2, company: 'XX电力工程有限公司', price: 2750000.00, workDays: 60 },
      { rank: 3, company: '我方(XX电力设备有限公司)', price: 2850000.00, workDays: 60, isOur: true },
      { rank: 4, company: 'XX建设集团', price: 2900000.00, workDays: 65 },
      { rank: 5, company: 'XX科技股份', price: 2950000.00, workDays: 70 },
      { rank: 6, company: 'XX工程公司', price: 3050000.00, workDays: 60 },
      { rank: 7, company: 'XX实业有限公司', price: 3100000.00, workDays: 75 },
      { rank: 8, company: 'XX集团', price: 3200000.00, workDays: 80 }
    ]
  },
  
  media: {
    photos: [
      { url: '/images/bidding-1.jpg', uploadTime: '2024-12-15 09:35:00', description: '签到现场' },
      { url: '/images/bidding-2.jpg', uploadTime: '2024-12-15 10:15:00', description: '唱标现场' }
    ],
    videos: [
      { url: '/videos/bidding-record.mp4', uploadTime: '2024-12-15 12:00:00', description: '开标会议录音', duration: '2小时15分' }
    ]
  }
})

// 格式化价格
const formatPrice = (price) => {
  return '¥' + price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

// 方法
// 添加参会人员
const addPerson = () => {
  biddingInfo.value.attendees.push({
    role: '参会人员',
    name: '',
    phone: ''
  })
  ElMessage.success('已添加参会人员，请填写信息')
}

// 删除参会人员
const removePerson = (index) => {
  ElMessageBox.confirm('确定要删除这个参会人员吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    biddingInfo.value.attendees.splice(index, 1)
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 添加投标单位
const addBidder = () => {
  const newRank = biddingInfo.value.record.allBidders.length + 1
  biddingInfo.value.record.allBidders.push({
    rank: newRank,
    company: '',
    price: 0,
    workDays: 60,
    isOur: false
  })
  ElMessage.success('已添加投标单位，请填写信息')
}

// 删除投标单位
const removeBidder = (index) => {
  ElMessageBox.confirm('确定要删除这个投标单位吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    biddingInfo.value.record.allBidders.splice(index, 1)
    // 重新排序
    biddingInfo.value.record.allBidders.forEach((bidder, idx) => {
      bidder.rank = idx + 1
    })
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 标记为我方
const markAsOur = (index) => {
  // 先清除所有的我方标记
  biddingInfo.value.record.allBidders.forEach(bidder => {
    bidder.isOur = false
  })
  // 标记当前为我方
  biddingInfo.value.record.allBidders[index].isOur = true
  ElMessage.success('已标记为我方')
}

// 保存开标记录
const saveBiddingRecord = () => {
  // 验证数据
  const hasEmpty = biddingInfo.value.record.allBidders.some(
    b => !b.company || b.price <= 0
  )
  
  if (hasEmpty) {
    ElMessage.warning('请完整填写所有投标单位信息')
    return
  }
  
  ElMessage.success('开标记录已保存')
  emit('update')
}

const downloadRecord = () => {
  ElMessage.success('开标记录表已下载')
}

const uploadPhoto = () => {
  ElMessage.info('打开照片上传对话框')
}

const uploadVideo = () => {
  ElMessage.info('打开视频上传对话框')
}

const playVideo = (video) => {
  ElMessage.info(`播放视频: ${video.description}`)
}

const editBiddingInfo = () => {
  ElMessage.info('进入编辑模式')
  emit('update')
}

const setReminder = () => {
  ElMessage.success('开标提醒已设置')
}

const exportReport = () => {
  ElMessage.success('开标报告已导出')
}
</script>

<style lang="scss" scoped>
.bidding-info-panel {
  .section-card {
    margin-bottom: 24px;

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

      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
      }

      .header-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  .info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    .info-section {
      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 16px 0;
      }

      .info-content {
        .info-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 12px 0;
          border-bottom: 1px solid #f3f4f6;

          &:last-child {
            border-bottom: none;
          }

          .label {
            font-size: 14px;
            color: #6b7280;
            min-width: 80px;
            flex-shrink: 0;
          }

          .value {
            font-size: 14px;
            color: #1f2937;
            font-weight: 500;
            flex: 1;

            &.note {
              color: #f59e0b;
            }
          }

          .action-links {
            display: flex;
            gap: 12px;
          }

          &.editable-person {
            .person-inputs {
              display: flex;
              align-items: center;
              gap: 12px;
              flex: 1;
            }
          }
        }
      }
    }
  }

  .record-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;

    .summary-item {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .summary-label {
        font-size: 13px;
        color: #6b7280;
      }

      .summary-value {
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;

        &.highlight {
          color: #7c3aed;
        }

        &.price {
          color: #ef4444;
        }
      }
    }
  }

  .bidders-table {
    margin-bottom: 24px;

    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
      }
    }

    :deep(.el-input-number) {
      width: 100%;
    }

    :deep(.our-company-input) {
      .el-input__inner {
        color: #7c3aed;
        font-weight: 600;
      }
    }

    :deep(.our-price-input) {
      .el-input-number__decrease,
      .el-input-number__increase {
        background-color: #fef2f2;
      }
      
      input {
        color: #ef4444;
        font-weight: 600;
      }
    }

    .our-company {
      color: #7c3aed;
      font-weight: 600;
    }

    .our-price {
      color: #ef4444;
      font-weight: 600;
    }
  }

  .record-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
  }

  .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;

    .media-item {
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid #e5e7eb;
      transition: all 0.3s;

      &:hover {
        border-color: #a78bfa;
        box-shadow: 0 4px 12px rgba(167, 139, 250, 0.1);
      }

      img {
        width: 100%;
        height: 150px;
        object-fit: cover;
      }

      .media-info {
        padding: 12px;
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 4px;

        .media-desc {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }

        .media-time {
          font-size: 12px;
          color: #9ca3af;
        }
      }
    }
  }

  .video-list {
    .video-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: #f9fafb;
      border-radius: 8px;
      margin-bottom: 12px;

      .video-icon {
        font-size: 32px;
        color: #7c3aed;
      }

      .video-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;

        .video-desc {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }

        .video-meta {
          font-size: 12px;
          color: #9ca3af;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
  }
}
</style>
