<template>
    <div class="supply-demand-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">
          <i class="el-icon-s-comment"></i>
          供需管理
        </h2>
        <div>
          <el-tag type="danger">{{ pendingCount }}</el-tag>
          <small class="text-muted">待审核</small>
        </div>
      </div>
  
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :model="filters" inline>
          <el-form-item>
            <el-input v-model="filters.keyword" placeholder="搜索标题、内容或用户名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.status" placeholder="全部状态" clearable>
              <el-option label="待审核" value="pending"></el-option>
              <el-option label="已通过" value="approved"></el-option>
              <el-option label="已拒绝" value="rejected"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.type" placeholder="全部类型" clearable>
              <el-option label="供应" value="supply"></el-option>
              <el-option label="需求" value="demand"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="filters.date" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-download" @click="handleExport">导出数据</el-button>
          </el-form-item>
        </el-form>
      </div>
  
      <!-- 供需列表表格 -->
      <div class="table-container">
        <el-table
          :data="list"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column label="供需信息" min-width="250">
            <template slot-scope="scope">
              <div class="supply-title">{{ scope.row.title }}</div>
              <div class="supply-desc">{{ scope.row.description }}</div>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.type === 'supply' ? 'success' : 'primary'" size="small">{{ scope.row.typeText }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布者" width="150">
            <template slot-scope="scope">
              <div class="user-info">
                <div class="user-avatar">{{ scope.row.publisher.name.charAt(0) }}</div>
                <div>
                  <div class="user-name">{{ scope.row.publisher.name }}</div>
                  <div class="user-year">{{ scope.row.publisher.year }}届</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.statusText }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="优先级" width="100">
            <template slot-scope="scope">
              <el-tag :type="getPriorityTagType(scope.row.priority)" size="small">{{ scope.row.priorityText }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="150">
            <template slot-scope="scope">
              <div class="time-display">{{ scope.row.publishDate }}</div>
              <div class="time-display-secondary">{{ scope.row.publishTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="审核时间" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.auditDate">
                <div class="time-display">{{ scope.row.auditDate }}</div>
                <div class="time-display-secondary">{{ scope.row.auditTime }}</div>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="170" fixed="right">
            <template slot-scope="scope">
              <div class="action-buttons">
                <el-button v-if="scope.row.status === 'pending' || scope.row.status === 'rejected'" type="success" size="mini" icon="el-icon-check" @click="handleApprove(scope.row)">通过</el-button>
                <el-button v-if="scope.row.status === 'approved'" type="info" size="mini" icon="el-icon-remove-outline" @click="handleHide(scope.row)">隐藏</el-button>
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.status === 'pending'" type="danger" size="mini" icon="el-icon-close" @click="handleReject(scope.row)">拒绝</el-button>
                <el-button type="info" size="mini" icon="el-icon-view" @click="handleView(scope.row)">详情</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SupplyDemand',
    data() {
      return {
        pendingCount: 3,
        filters: {
          keyword: '',
          status: '',
          type: '',
          date: ''
        },
        list: [
          {
            id: 1,
            title: '提供企业管理咨询服务',
            description: '专业企业管理咨询团队，具有10年以上行业经验...',
            type: 'supply',
            typeText: '供应',
            publisher: { name: '张总', year: '2010' },
            status: 'pending',
            statusText: '待审核',
            priority: 'high',
            priorityText: '高',
            publishDate: '2024-01-15',
            publishTime: '14:30',
            auditDate: null,
            auditTime: null
          },
          {
            id: 2,
            title: '寻找技术合作伙伴',
            description: '我们是一家初创公司，目前在开发一款AI智能客服产品...',
            type: 'demand',
            typeText: '需求',
            publisher: { name: '李经理', year: '2015' },
            status: 'approved',
            statusText: '已通过',
            priority: 'medium',
            priorityText: '中',
            publishDate: '2024-01-14',
            publishTime: '16:45',
            auditDate: '2024-01-14',
            auditTime: '17:20'
          },
          {
            id: 3,
            title: '投融资咨询服务',
            description: '专业投融资顾问，为企业提供全方位的融资解决方案...',
            type: 'supply',
            typeText: '供应',
            publisher: { name: '王顾问', year: '2008' },
            status: 'rejected',
            statusText: '已拒绝',
            priority: 'low',
            priorityText: '低',
            publishDate: '2024-01-13',
            publishTime: '09:15',
            auditDate: '2024-01-13',
            auditTime: '10:30'
          }
        ],
        total: 156,
        listQuery: {
          page: 1,
          limit: 10
        },
        multipleSelection: []
      }
    },
    methods: {
      handleSearch() {
        console.log('搜索条件:', this.filters)
        this.$message.success('搜索已触发')
      },
      handleExport() {
        console.log('导出数据')
        this.$message.info('数据导出中...')
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      getStatusTagType(status) {
        const statusMap = {
          pending: 'warning',
          approved: 'success',
          rejected: 'danger'
        }
        return statusMap[status]
      },
      getPriorityTagType(priority) {
        const priorityMap = {
          high: 'danger',
          medium: 'warning',
          low: 'success'
        }
        return priorityMap[priority]
      },
      handleApprove(row) {
        this.$confirm('确定要通过这条供需信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          console.log('审核通过:', row.id)
          // API call here
          row.status = 'approved'
          row.statusText = '已通过'
          this.$message.success('审核通过成功！')
        })
      },
      handleEdit(row) {
        console.log('编辑:', row.id)
        this.$message.info('跳转到编辑页面')
      },
      handleReject(row) {
        this.$prompt('请输入拒绝原因：', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(({ value }) => {
          console.log('拒绝:', row.id, '原因:', value)
          // API call here
          row.status = 'rejected'
          row.statusText = '已拒绝'
          this.$message.success('已拒绝该供需信息！')
        })
      },
      handleHide(row) {
        this.$confirm('确定要隐藏这条供需信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          console.log('隐藏:', row.id)
          // API call here
          this.$message.success('供需信息已隐藏！')
        })
      },
      handleView(row) {
        console.log('查看详情:', row.id)
        this.$message.info('跳转到详情页面')
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        // getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        // getList()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .supply-demand-container {
    padding: 20px;
    background-color: #fff;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
    
    .page-title {
      font-size: 24px;
      font-weight: bold;
      color: #2c3e50;
      display: flex;
      align-items: center;
      margin: 0;
      
      i {
        margin-right: 10px;
        color: #3498db;
      }
    }
  
    .text-muted {
      margin-left: 5px;
      color: #6c757d;
    }
  }
  
  .search-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  
  .table-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .supply-title {
    font-weight: 600;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .supply-desc {
    font-size: 12px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
  }
  
  .user-name {
    font-size: 12px;
    font-weight: 600;
  }
  
  .user-year {
    font-size: 11px;
    color: #666;
  }
  
  .time-display {
    font-size: 12px;
  }
  
  .time-display-secondary {
    font-size: 11px;
    color: #666;
  }
  
  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  
    .el-button {
      margin: 0;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;
  }
  </style>
  