OpportunityManagement.vue

<template>
  <div class="opportunity-management">
    <!-- 页面标题和统计卡片 -->
    <div class="page-header">
      <div class="title">
        <h1>全部管理</h1>
      </div>
    </div>

    <div class="stats-cards">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">总计</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ stats.total }}</div>
            </div>
            <img 
              src="../assets/icons/ad61df2f28f6b51d5f386829473ab1b592fd14e0.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">成单待审核</span>
            </div>
            <div class="card-content">
              <div class="card-value">{{ stats.pendingReview }}</div>
            </div>
            <img 
              src="../assets/icons/1b66793397a66bf54212d266505eb98e3377a354.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">处理中</span>
            </div>
            <div class="card-content">
              <div class="card-value text-[rgb(10,10,10)]">{{ stats.processing }}</div>
            </div>
            <img 
              src="../assets/icons/eb05b4822d67dff64c5712d0777f069d241ecc13.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="dashboard-card">
            <div class="card-header">
              <span class="card-title">已完结</span>
            </div>
            <div class="card-content">
              <div class="card-value text-[rgb(10,10,10)]">{{ stats.completed }}</div>
            </div>
            <img 
              src="../assets/icons/a8703fd7713f624a505aed79bcf30eb245a86d9c.png" 
              alt="" 
              class="card-icon"
            >
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <div class="filter-header">
        <h3 class="filter-title">筛选条件</h3>
        <div class="filter-actions">
          <el-button size="small" @click="handleFilter">
            <i class="el-icon-filter"></i>
            查询
          </el-button>
          <el-button size="small" @click="handleExport" type="default">
            <i class="el-icon-download"></i>
            导出数据
          </el-button>
          <el-button 
            v-if="hasFilters" 
            size="small" 
            @click="clearFilters" 
            type="default"
          >
            <i class="el-icon-close"></i>
            清除筛选
          </el-button>
        </div>
      </div>

      <div class="filter-content">
        <el-row :gutter="24">
          <el-col :span="4">
            <div class="search-wrapper">
              <el-input
                v-model="searchTerm"
                placeholder="用户账号/师傅名字/营销人员名字"
                style="padding-left: 0;"
                @keyup.enter.native="handleFilter"
              />
            </div>
          </el-col>
          
          <el-col :span="6">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              class="date-picker"
            />
          </el-col>

          <el-col :span="3">
            <el-select 
              v-model="selectedStatus" 
              placeholder="选择状态"
              clearable
            >
              <el-option label="全部状态" value="all"></el-option>
              <el-option 
                v-for="(status, key) in statusMap" 
                :key="key"
                :label="status.label"
                :value="key"
              ></el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select 
              v-model="selectedTag" 
              placeholder="商机标签"
              clearable
            >
              <el-option label="全部标签" value="all"></el-option>
              <el-option 
                v-for="tag in opportunityTags" 
                :key="tag"
                :label="tag"
                :value="tag"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>

      <div class="filter-content" style="margin-top: 20px;">
        <el-row :gutter="24">
          <el-col :span="3" v-if="addressStore.cityArr.length>0">
            <el-select 
              v-model="addressStore.city" 
              placeholder="选择地市"
              @change="cityChange"
              :disabled="getData.city!=''"
              clearable>
              <el-option 
                v-for="item in addressStore.cityArr" 
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3" v-if="addressStore.countyArr.length>0"> 
            <el-select 
              v-model="addressStore.county" 
              placeholder="选择区县"
              @change="countyChange"
              :disabled="getData.county!=''"
              clearable>
              <el-option 
                v-for="item in addressStore.countyArr" 
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3" v-if="addressStore.gridArr.length>0">
            <el-select 
              v-model="addressStore.grid" 
              placeholder="选择网格"
              :disabled="getData.grid!=''"
              clearable>
              <el-option 
                v-for="item in addressStore.gridArr" 
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 商机列表 -->
    <el-card class="list-card">
      <div class="list-header">
        <h3 class="list-title">商机列表 ({{ filteredOpportunities.length }})</h3>
        <div class="list-actions">
          <el-button 
            size="small" 
            @click="isCreateDialogOpen = true"
            type="primary"
          >
            <i class="el-icon-plus"></i>
            新增商机
          </el-button>
        </div>
      </div>

      <div class="list-content">
        <el-table 
          :data="paginatedOpportunities" border
          v-loading="loading">
          <el-table-column prop="id" label="商机ID" width="150"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column prop="customerAddress" label="客户地址" width="230" show-overflow-tooltip></el-table-column>
          <el-table-column prop="customerPhone" label="用户账号" width="120"></el-table-column>
          <el-table-column prop="installerName" label="装维师傅姓名" width="120"></el-table-column>
          <el-table-column prop="assignedToName" label="营销人员姓名" width="120"></el-table-column>
          <el-table-column label="商机标签" width="250">
            <template slot-scope="scope">
              <el-tag 
                v-for="tag in scope.row.tags" 
                :key="tag" 
                size="mini"
                type="info"
                style="margin-right: 4px; margin-bottom: 4px;"
              >
                {{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前状态" width="100">
            <template slot-scope="scope">
              <el-tag 
                :type="getStatusType(scope.row.status)"
                size="mini"
              >
                {{ statusMap[scope.row.status].label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="lastFollowTime" label="最新跟进" width="180"></el-table-column>
          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
              <el-button type="text" @click="checkAudio(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredOpportunities.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 新增商机弹窗 -->
    <el-dialog
      title="新增商机"
      :visible.sync="isCreateDialogOpen"
      width="500px"
    >
      <el-form :model="newOpportunity" :rules="opportunityRules" ref="opportunityForm" label-width="100px">
        <el-form-item label="用户账号" prop="customerAccount" required>
          <el-input v-model="newOpportunity.customerAccount" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" prop="customerAddress" required>
          <el-input v-model="newOpportunity.customerAddress" placeholder="请输入客户地址"></el-input>
        </el-form-item>
        <el-form-item label="装维人员工号" prop="installerWorkId" required>
          <el-input v-model="newOpportunity.installerWorkId" placeholder="请输入装维人员工号"></el-input>
        </el-form-item>
        <el-form-item label="业务类型" prop="businessType">
          <el-select v-model="newOpportunity.businessType" placeholder="请选择业务类型" style="width: 100%;">
            <el-option label="宽带新装" value="宽带新装"></el-option>
            <el-option label="宽带续费" value="宽带续费"></el-option>
            <el-option label="宽带提速" value="宽带提速"></el-option>
            <el-option label="ITV新装" value="ITV新装"></el-option>
            <el-option label="套餐升级" value="套餐升级"></el-option>
            <el-option label="家庭组网" value="家庭组网"></el-option>
            <el-option label="智能家居" value="智能家居"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文字描述" prop="description">
          <el-input 
            v-model="newOpportunity.description" 
            type="textarea" 
            :rows="3"
            placeholder="请输入商机描述信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isCreateDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="handleCreateOpportunity">提交</el-button>
      </div>
    </el-dialog>

    <!-- 审核弹窗 -->
    <el-dialog
      title="商机审核"
      :visible.sync="isAuditDialogOpen"
      width="500px"
    >
      <el-form :model="auditForm" label-width="100px">
        <el-form-item label="审核结果" required>
          <el-radio-group v-model="auditForm.result">
            <el-radio label="approved">审核通过</el-radio>
            <el-radio label="rejected">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="auditForm.result === 'rejected'" label="不通过理由" required>
          <el-input 
            v-model="auditForm.reason" 
            type="textarea" 
            :rows="4"
            placeholder="请输入审核不通过的理由"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAuditDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitAudit">提交审核</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

// 商机状态映射
const statusMap = {
  'assigned': { label: '待跟进', color: 'blue' },
  'following': { label: '跟进中', color: 'orange' },
  'pending_review': { label: '成单待审核', color: 'purple' },
  'completed': { label: '已成单', color: 'green' },
  'closed': { label: '已关闭', color: 'gray' }
}

// 商机标签
const opportunityTags = [
  '网络升级', '家庭安防', '智能家居', '宽带套餐', '移动套餐', '融合套餐', '企业业务'
]

// 营销人员列表
const mockSalesPersons = [
  { id: 'SALE001', name: '张营销', gridName: 'A网格', phone: '13812345001' },
  { id: 'SALE002', name: '陈营销', gridName: 'B网格', phone: '13812345002' },
  { id: 'SALE003', name: '刘营销', gridName: 'C网格', phone: '13812345003' },
  { id: 'SALE004', name: '赵营销', gridName: 'A网格', phone: '13812345004' },
  { id: 'SALE005', name: '王营销', gridName: 'B网格', phone: '13812345005' }
]

// 生成模拟商机数据的函数
function generateMockOpportunities() {
  const opportunities = []
  const regions = ['南京市玄武区', '南京市秦淮区', '南京市建邺区', '南京市鼓楼区']
  const grids = ['A网格', 'B网格', 'C网格', 'D网格', 'E网格']
  const streets = ['中山路', '太平北路', '珠江路', '北京东路', '龙蟠中路', '成贤街', '锁金村', '进香河路', '新街口', '汉中路']
  const installers = [
    { id: 'INS001', name: '王师傅', phone: '186****2001' },
    { id: 'INS002', name: '李师傅', phone: '186****2002' },
    { id: 'INS003', name: '赵师傅', phone: '186****2003' },
    { id: 'INS004', name: '孙师傅', phone: '186****2004' },
    { id: 'INS005', name: '周师傅', phone: '186****2005' },
    { id: 'INS006', name: '吴师傅', phone: '186****2006' },
    { id: 'INS007', name: '郑师傅', phone: '186****2007' },
    { id: 'INS008', name: '钱师傅', phone: '186****2008' },
  ]
  const sales = [
    { id: 'SALE001', name: '张营销', gridName: 'A网格' },
    { id: 'SALE002', name: '陈营销', gridName: 'B网格' },
    { id: 'SALE003', name: '刘营销', gridName: 'C网格' },
    { id: 'SALE004', name: '赵营销', gridName: 'A网格' },
    { id: 'SALE005', name: '王营销', gridName: 'B网格' }
  ]
  const statuses = ['assigned', 'following', 'completed', 'closed']
  const descriptions = [
    '用户反馈家中网络卡顿，希望升级宽带套餐',
    '用户询问移动手机号和宽带的融合套餐优惠',
    '用户对家庭监控摄像头很感兴趣',
    '用户对当前手机套餐不满意，希望更换更优惠的套餐',
    '小型公司需要企业宽带和通信解决方案',
    '用户希望安装更高速的宽带并了解智能家居方案',
    '用户咨询家庭安防监控系统的安装和费用',
    '客户反馈网速慢，需要技术支持',
    '用户想了解最新的5G套餐',
    '家里准备装修，咨询智能家居全套方案'
  ]

  for (let i = 1; i <= 65; i++) {
    const installer = installers[Math.floor(Math.random() * installers.length)]
    const sales_person = sales[Math.floor(Math.random() * sales.length)]
    const status = statuses[Math.floor(Math.random() * statuses.length)]
    const region = regions[Math.floor(Math.random() * regions.length)]
    const grid = grids[Math.floor(Math.random() * grids.length)]
    const street = streets[Math.floor(Math.random() * streets.length)]
    
    // 随机选择1-3个标签
    const numTags = Math.floor(Math.random() * 3) + 1
    const shuffledTags = [...opportunityTags].sort(() => Math.random() - 0.5)
    const tags = shuffledTags.slice(0, numTags)

    // 生成日期（最近30天内）
    const daysAgo = Math.floor(Math.random() * 30)
    const createDate = new Date()
    createDate.setDate(createDate.getDate() - daysAgo)
    const createTime = `${createDate.getFullYear()}-${String(createDate.getMonth() + 1).padStart(2, '0')}-${String(createDate.getDate()).padStart(2, '0')} ${String(createDate.getHours()).padStart(2, '0')}:${String(createDate.getMinutes()).padStart(2, '0')}:${String(createDate.getSeconds()).padStart(2, '0')}`

    const opportunity = {
      id: `OP2025${String(10000 + i).slice(-5)}`,
      createTime,
      customerAddress: `${region}${street}${Math.floor(Math.random() * 200) + 1}**号`,
      installerId: installer.id,
      installerName: installer.name,
      installerPhone: installer.phone,
      tags,
      status,
      assignedTo: sales_person.id,
      assignedToName: sales_person.name,
      customerPhone: `13${Math.floor(Math.random() * 10)}****${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`,
      description: descriptions[Math.floor(Math.random() * descriptions.length)],
      region,
      gridName: grid,
    }

    // 如果状态是 following 或 completed，添加跟进时间
    if (status === 'following' || status === 'completed' || status === 'closed') {
      const followDate = new Date(createDate)
      followDate.setHours(followDate.getHours() + Math.floor(Math.random() * 48))
      opportunity.lastFollowTime = `${followDate.getFullYear()}-${String(followDate.getMonth() + 1).padStart(2, '0')}-${String(followDate.getDate()).padStart(2, '0')} ${String(followDate.getHours()).padStart(2, '0')}:${String(followDate.getMinutes()).padStart(2, '0')}:${String(followDate.getSeconds()).padStart(2, '0')}`
    }

    opportunities.push(opportunity)
  }

  return opportunities.sort((a, b) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())
}

export default {
  name: 'OpportunityManagement',
  data() {
    return {
      addressStore:{
        city: '',
        cityName: '',
        cityArr: this.addressStoreData,
        county: '',
        countyName: '',
        countyArr: [],
        grid: '',
        gridName: '',
        gridArr: []
      },
      getData:{
        city: '',
        cityName: '',
        county: '',
        countyName: '',
        grid: '',
        gridName: '',
      },

      loading: false,
      statusMap,
      opportunityTags,
      mockSalesPersons,
      opportunities: generateMockOpportunities(),
      activeTab: 'all',
      searchTerm: '',
      selectedRegion: '',
      selectedStatus: '',
      selectedTag: '',
      dateRange: [],
      isCreateDialogOpen: false,
      newOpportunity: {
        customerAccount: '',
        customerAddress: '',
        installerWorkId: '',
        businessType: '',
        description: ''
      },
      opportunityRules: {
        customerAccount: [
          { required: true, message: '请输入用户账号', trigger: 'blur' }
        ],
        customerAddress: [
          { required: true, message: '请输入客户地址', trigger: 'blur' }
        ],
        installerWorkId: [
          { required: true, message: '请输入装维人员工号', trigger: 'blur' }
        ]
      },
      isAuditDialogOpen: false,
      auditForm: {
        result: '',
        reason: ''
      },
      auditOpportunityId: null,
      // 分页
      currentPage: 1,
      pageSize: 20,
    }
  },
  created(){
    this.setAddressShow()
  },
  computed: {
    ...mapGetters(['user']),
    // 根据用户权限过滤商机数据
    filteredByPermission() {
      if (!this.user) return []
      
      // 根据用户角色过滤数据
      switch (this.user.role) {
        case 'grid_manager':
          // 网格管理员只能看到自己网格的商机
          return this.opportunities.filter(opp => 
            opp.gridName === this.user.region.split('区')[1]
          )
        case 'county_admin':
          // 区县管理员能看到整个区县的商机
          return this.opportunities.filter(opp => 
            opp.region.includes(this.user.region)
          )
        case 'city_admin':
          // 地市管理员能看到整个地市的商机
          return this.opportunities.filter(opp => 
            opp.region.includes(this.user.region)
          )
        case 'province_admin':
          // 省级管理员能看到所有商机
          return this.opportunities
        default:
          return []
      }
    },
    // 根据筛选条件过滤商机
    filteredOpportunities() {
      let filtered = this.filteredByPermission

      // 按状态标签过滤
      if (this.activeTab !== 'all') {
        const statusFilters = {
          'processing': ['assigned', 'following'],
          'completed': ['completed', 'closed']
        }
        filtered = filtered.filter(opp => 
          statusFilters[this.activeTab]?.includes(opp.status)
        )
      }

      // 搜索过滤
      if (this.searchTerm) {
        filtered = filtered.filter(opp =>
          opp.id.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          opp.customerAddress.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          opp.installerName.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          opp.installerPhone.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          (opp.assignedToName && opp.assignedToName.toLowerCase().includes(this.searchTerm.toLowerCase()))
        )
      }

      // 其他筛选条件
      if (this.selectedRegion && this.selectedRegion !== 'all') {
        filtered = filtered.filter(opp => opp.region.includes(this.selectedRegion))
      }
      if (this.selectedStatus && this.selectedStatus !== 'all') {
        filtered = filtered.filter(opp => opp.status === this.selectedStatus)
      }
      if (this.selectedTag && this.selectedTag !== 'all') {
        filtered = filtered.filter(opp => opp.tags.includes(this.selectedTag))
      }

      // 日期范围过滤
      if (this.dateRange && this.dateRange.length === 2) {
        const [start, end] = this.dateRange
        filtered = filtered.filter(opp => {
          const oppDate = new Date(opp.createTime.split(' ')[0])
          const startDate = new Date(start)
          const endDate = new Date(end)
          return oppDate >= startDate && oppDate <= endDate
        })
      }

      return filtered
    },
    // 分页数据
    paginatedOpportunities() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.filteredOpportunities.slice(startIndex, endIndex)
    },
    // 统计数据
    stats() {
      const total = this.filteredByPermission.length
      const pendingReview = this.filteredByPermission.filter(o => o.status === 'completed').length
      const processing = this.filteredByPermission.filter(o => ['assigned', 'following'].includes(o.status)).length
      const completed = this.filteredByPermission.filter(o => ['completed', 'closed'].includes(o.status)).length
      
      return { total, pendingReview, processing, completed }
    },
    // 是否有筛选条件
    hasFilters() {
      return this.searchTerm || 
             this.selectedRegion || 
             this.selectedStatus || 
             this.selectedTag || 
             (this.dateRange && this.dateRange.length > 0)
    }
  },
  methods: {
    setAddressShow(){
      let ad = this.addressStore
      let gd = this.getData

      if(gd.city){
        ad.city = gd.city
        ad.cityArr.forEach(item=>{
          if(item.value == ad.city){
            ad.countyArr = item.children
          }
        })

        if(gd.county){
          ad.county = gd.county
          ad.countyArr.forEach(item=>{
            if(item.value == ad.county){
              ad.gridArr = item.children
            }
          })
          if(ad.gridArr.length == 1){
            gd.grid = 'moren'
          }

          if(gd.grid){
            ad.grid = gd.grid
          }
        }
      }

    },
    cityChange(value){
      let ad = this.addressStore
      ad.city = value
      ad.county = ''
      ad.grid = ''

      ad.cityArr.forEach(item=>{
        if(item.value == ad.city){
          ad.countyArr = item.children
        }
      })
    },
    countyChange(value){
      let ad = this.addressStore
      ad.county = value
      ad.grid = ''

      ad.countyArr.forEach(item=>{
        if(item.value == ad.county){
          ad.gridArr = item.children
        }
      })
    },
    getStatusType(status) {
      const typeMap = {
        'assigned': 'info',
        'following': 'warning',
        'pending_review': 'primary',
        'completed': 'success',
        'closed': 'info'
      }
      return typeMap[status] || 'info'
    },
    handleFilter() {
      // 重新计算筛选结果
      this.currentPage = 1
    },
    clearFilters() {
      this.searchTerm = ''
      this.selectedRegion = ''
      this.selectedStatus = ''
      this.selectedTag = ''
      this.dateRange = []
      this.currentPage = 1
    },
    checkDetail(row){
      this.$router.push(`/opportunities/${row.id}`)
    },
    checkAudio(row){
      this.handleOpenAudit(row.id)
    },
    handleCreateOpportunity() {
      this.$refs.opportunityForm.validate((valid) => {
        if (valid) {
          // 验证必填字段
          if (!this.newOpportunity.customerAccount || !this.newOpportunity.customerAddress || !this.newOpportunity.installerWorkId) {
            this.$message.error('请填写所有必填字段')
            return
          }

          // 生成新的商机ID
          const newId = 'OP' + new Date().toISOString().slice(0, 10).replace(/-/g, '') + 
                        String(Math.floor(Math.random() * 100)).padStart(2, '0')

          // 模拟获取装维师傅信息
          const installerName = `装维师傅${this.newOpportunity.installerWorkId.slice(-2)}`
          
          // 创建新商机对象
          const createdOpportunity = {
            id: newId,
            createTime: new Date().toLocaleString('zh-CN'),
            customerAddress: this.newOpportunity.customerAddress,
            installerId: this.newOpportunity.installerWorkId,
            installerName: installerName,
            installerPhone: '138****' + Math.floor(Math.random() * 10000).toString().padStart(4, '0'),
            customerPhone: this.newOpportunity.customerAccount,
            tags: this.newOpportunity.businessType ? [this.newOpportunity.businessType] : [],
            status: 'assigned',
            assignedTo: '',
            assignedToName: '',
            description: this.newOpportunity.description,
            region: this.user?.region || '南京市玄武区',
            gridName: this.user?.region?.split('区')[1] || 'A网格',
            lastFollowTime: ''
          }

          // 添加到商机列表
          this.opportunities.unshift(createdOpportunity)
          
          // 重置表单
          this.newOpportunity = {
            customerAccount: '',
            customerAddress: '',
            installerWorkId: '',
            businessType: '',
            description: ''
          }
          
          // 关闭弹窗
          this.isCreateDialogOpen = false
          
          this.$message.success('商机创建成功')
        }
      })
    },
    handleExport() {
      // 模拟导出功能
      this.$message.success('商机数据导出成功')
    },
    handleOpenAudit(opportunityId) {
      this.auditOpportunityId = opportunityId
      this.auditForm.result = ''
      this.auditForm.reason = ''
      this.isAuditDialogOpen = true
    },
    handleSubmitAudit() {
      if (!this.auditForm.result) {
        this.$message.error('请选择审核结果')
        return
      }

      if (this.auditForm.result === 'rejected' && !this.auditForm.reason.trim()) {
        this.$message.error('审核不通过时必须填写理由')
        return
      }

      // 模拟审核操作
      const resultText = this.auditForm.result === 'approved' ? '通过' : '不通过'
      this.$message.success(`商机 ${this.auditOpportunityId} 审核${resultText}`)
      
      // 重置状态并关闭对话框
      this.isAuditDialogOpen = false
      this.auditOpportunityId = null
      this.auditForm = {
        result: '',
        reason: ''
      }
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style lang="scss" scoped>
.opportunity-management {
  .page-header {
    margin-bottom: 24px;

    .title {
      h1 {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
        color: #303133;
      }
    }
  }

  .stats-cards {
    margin-bottom: 24px;
  }

  .dashboard-card {
    position: relative;
    height: 116px;
    
    .card-header {
      .card-title {
        font-size: 14px;
        font-weight: 600;
        font-weight: normal;
      }
    }
    
    .card-content {
      .card-value {
        font-size: 24px;
        font-weight: bold;
      }
    }
    
    .card-icon {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 88px;
      height: 88px;
    }
  }

  .filter-card {
    margin-bottom: 24px;

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

      .filter-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
      }

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

    .filter-content {
      .search-wrapper {
        position: relative;

        .search-icon {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #c0c4cc;
        }

        .el-input {
          padding-left: 30px;
        }
      }

      .date-picker {
        width: 100%;
      }
    }
  }

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

      .list-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0;
      }

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

    .list-content {
      .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>