<template>
  <el-drawer
    :title="detailData.projectName"
    v-model="visible"
    direction="rtl"
    size="85%"
    :close-on-click-modal="false"
    class="detail-drawer"
    @close="handleClose"
  >
    <div class="detail-container">
      <!-- 顶部进度条区域 -->
      <div class="top-progress">
        <div class="section-title">项目进度</div>
        <div class="chevron-steps">
          <div 
            v-for="(step, index) in steps" 
            :key="index" 
            class="chevron-step"
            :class="{ 
              'is-active': currentStepIndex === index,
              'is-completed': currentStepIndex > index,
            }"
            @click="handleStepClick(index)"
          >
            <span class="step-text">{{ step }}</span>
          </div>
        </div>
        
        <!-- 最新进度 -->
        <div class="latest-progress" v-if="followupList && followupList.length > 0">
          <span class="label">最新进度</span>
          <span class="all-progress" @click="rightActiveTab = 'record'">全部进度</span>
          <div class="progress-content">
            <span class="user">{{ followupList[0].visitor }}</span>
            <span class="time">{{ followupList[0].callDate }}</span>
            <span class="desc">{{ followupList[0].followUpCondition }}</span>
          </div>
        </div>
      </div>

      <!-- 下部分栏区域 -->
      <div class="main-content">
        <!-- 左侧面板 -->
        <div class="left-panel">
          <el-tabs v-model="leftActiveTab" class="custom-tabs">
            <el-tab-pane label="项目信息" name="info">
              <div class="info-block">
                <div class="info-header">
                  <span class="title">基本信息</span>
                  <el-button type="primary" class="edit-btn" @click="$emit('edit', detailData)" size="default">
                    <el-icon style="margin-right: 4px;"><Edit /></el-icon>编辑
                  </el-button>
                </div>
                <el-descriptions :column="3" class="custom-desc">
                  <el-descriptions-item label="项目名称：">{{ detailData.projectName }}</el-descriptions-item>
                  <el-descriptions-item label=" "></el-descriptions-item>
                  <el-descriptions-item label=" "></el-descriptions-item>
                  
                  <el-descriptions-item label="归属公司：">{{ detailData.companyName }}</el-descriptions-item>
                  <el-descriptions-item label="客户名称：" :span="2">{{ detailData.customerName }}</el-descriptions-item>
                  
                  <el-descriptions-item label="行业：">{{ detailData.industry }}</el-descriptions-item>
                  <el-descriptions-item label="部门：">{{ detailData.deptName }}</el-descriptions-item>
                  <el-descriptions-item label="金额(万)：">{{ detailData.projectBudget }}</el-descriptions-item>
                  
                  <el-descriptions-item label="赢单率(%)：">{{ detailData.winRate }}</el-descriptions-item>
                  <el-descriptions-item label="立项时间：">{{ proxy.parseTime(detailData.approvalDate, '{y}-{m}-{d}') }}</el-descriptions-item>
                  <el-descriptions-item label="截止时间：">{{ proxy.parseTime(detailData.expectedCompletionTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                  
                  <el-descriptions-item label="项目状态：">{{ getSaleStatusLabel(detailData.status) }}</el-descriptions-item>
                  <el-descriptions-item label="营销活动：" :span="2">{{ detailData.activityNo }}</el-descriptions-item>
                </el-descriptions>
              </div>

              <div class="info-block" style="margin-top: 30px;">
                <div class="info-header">
                  <span class="title">项目情况</span>
                </div>
                <el-descriptions :column="3" class="custom-desc">
                  <el-descriptions-item label="商机来源：">{{ findInfoSourceName(detailData.infoSource) }}</el-descriptions-item>
                  <el-descriptions-item label="项目级别：">{{ findProjectLevelName(detailData.projectLevel) }}</el-descriptions-item>
                  <el-descriptions-item label="项目区域：">{{ detailData.projectArea }}</el-descriptions-item>
                  
                  <el-descriptions-item label="采购方式：">{{ findProcurementMethodName(detailData.procurementMethod) }}</el-descriptions-item>
                  
                  <el-descriptions-item label="平台名称：" :span="3"></el-descriptions-item>
                  
                  <el-descriptions-item label="项目描述：" :span="3">{{ detailData.projectDescription }}</el-descriptions-item>
                  
                  <el-descriptions-item label="竞争对手：" :span="3">{{ detailData.competitor }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </el-tab-pane>
            <el-tab-pane label="项目联系人" name="contact">
               <div class="tab-toolbar">
                 <el-button type="primary" icon="Plus" @click="handleNewProjectContact">新建联系人</el-button>
               </div>
               <el-table :data="contactList" border class="custom-table" style="width: 100%" v-loading="contactLoading">
                 <el-table-column label="姓名" align="center" prop="name" />
                 <el-table-column label="性别" align="center" prop="sex">
                   <template #default="scope">
                     {{ scope.row.sex === '0' ? '男' : scope.row.sex === '1' ? '女' : (scope.row.sex || '') }}
                   </template>
                 </el-table-column>
                 <el-table-column label="部门" align="center" prop="deptName" />
                 <el-table-column label="职位" align="center" prop="position" />
                 <el-table-column label="项目角色" align="center" prop="projectRole" />
                 <el-table-column label="是否关键人" align="center" prop="isKeyPerson">
                   <template #default="scope">
                     <span>{{ scope.row.isKeyPerson === 1 ? '是' : '否' }}</span>
                   </template>
                 </el-table-column>
                 <el-table-column label="操作" align="center" width="100">
                   <template #default="scope">
                     <el-button link type="danger" @click="handleDeleteContact(scope.row)">删除</el-button>
                   </template>
                 </el-table-column>
                 <template #empty><span class="empty-text">暂无数据</span></template>
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="结果分析" name="analysis">
               <div class="analysis-container">
                 <div class="analysis-item">
                   <div class="label-text">成交结果</div>
                   <el-radio-group v-model="analysisForm.result" class="custom-radio" disabled>
                     <el-radio value="win">赢单</el-radio>
                     <el-radio value="lose">丢单</el-radio>
                   </el-radio-group>
                 </div>
                 <div class="analysis-item">
                   <div class="label-text">赢单总结</div>
                   <el-input 
                     v-model="analysisForm.summary" 
                     type="textarea" 
                     :rows="5" 
                     placeholder="暂无总结" 
                     disabled
                   />
                 </div>
               </div>
            </el-tab-pane>
            <el-tab-pane label="附件" name="attachment">
               <div class="tab-toolbar">
                 <el-upload
                   :action="uploadFileUrl"
                   :headers="headers"
                   :on-success="handleUploadSuccess"
                   :show-file-list="false"
                   multiple
                 >
                   <el-button type="primary" icon="Upload">上传附件</el-button>
                 </el-upload>
               </div>
               <el-table :data="detailFileList" border class="custom-table" style="width: 100%">
                 <el-table-column label="文件名称" align="center" prop="name" show-overflow-tooltip />
                 <el-table-column label="文件类型" align="center" prop="type" width="100" />
                 <el-table-column label="上传时间" align="center" prop="uploadTime" width="160" />
                 <el-table-column label="操作" align="center" width="100">
                   <template #default="scope">
                     <el-link :href="scope.row.url" :underline="false" target="_blank" type="primary">下载</el-link>
                   </template>
                 </el-table-column>
                 <template #empty><span class="empty-text">暂无数据</span></template>
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="报价单" name="quotation">
               <el-table :data="[{}]" border class="custom-table" style="width: 100%; margin-top: 15px;">
                 <el-table-column label="产品图片" align="center" width="80" />
                 <el-table-column label="产品编号" align="center" />
                 <el-table-column label="产品名称" align="center" />
                 <el-table-column label="单位" align="center" width="60" />
                 <el-table-column label="规格" align="center" />
                 <el-table-column label="数量" align="center" width="60" />
                 <el-table-column label="平台售价" align="center" />
                 <el-table-column label="最低售价" align="center" />
                 <el-table-column label="报价" align="center" width="140">
                   <template #default>
                     <el-input placeholder="请输入报价" size="small" />
                   </template>
                 </el-table-column>
                 <el-table-column label="毛利率" align="center" />
                 <el-table-column label="操作" align="center" width="100">
                    <template #default>
                       <el-button link type="primary" size="small">保存</el-button>
                       <el-button link type="danger" size="small">删除</el-button>
                    </template>
                 </el-table-column>
                 <template #empty><span class="empty-text">暂无数据</span></template>
               </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
          <el-tabs v-model="rightActiveTab" class="custom-tabs">
            <el-tab-pane label="团队成员" name="team">
              <div class="team-header">
                <span>团队成员 ({{ teamMembers.length }})</span>
                <el-icon class="add-icon" @click="handleNewMember"><Plus /></el-icon>
              </div>
              <div class="search-box">
                <el-input v-model="searchMember" placeholder="请输入成员" prefix-icon="Search" />
              </div>
              <div class="team-list">
                <div v-for="item in filteredTeamMembers" :key="item.id" class="team-item">
                  <el-avatar :size="36" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                  <div class="member-info">
                    <div class="info-top">
                      <span class="member-name">
                        {{ item.memberName || item.staffName || item.realName }}{{ item.deptName ? '/' + item.deptName : '' }}
                      </span>
                      <el-tag v-if="item.izManager === 1" size="small" type="success" effect="plain" class="leader-tag">负责人</el-tag>
                      <span class="role-desc">{{ item.roleName }}</span>
                      <span class="permission-desc">{{ item.permission || '暂无权限' }}</span>
                    </div>
                  </div>
                  <div class="member-actions">
                    <el-button link class="btn-edit" size="small" @click="handleEditMember(item)">编辑</el-button>
                    <el-button link class="btn-delete" size="small" @click="handleDeleteMember(item)">删除</el-button>
                  </div>
                </div>
                <div v-if="filteredTeamMembers.length === 0" class="empty-data">暂无团队成员</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="跟进记录" name="record">
              <div class="record-header">
                 <el-button link type="primary" icon="Plus" @click="handleNewFollowup">新建跟进记录</el-button>
                 <div class="filter-item">
                    <span class="label">拜访方式</span>
                    <el-select v-model="visitMethod" placeholder="请选择" style="width: 120px;" clearable @change="fetchFollowupList(detailData.id)">
                       <el-option v-for="dict in visitTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                    </el-select>
                 </div>
              </div>
              <div class="log-list" v-loading="followupLoading">
                 <div v-for="(item, index) in followupList" :key="index" class="log-item record-item">
                    <div class="record-top">
                       <span class="log-time">{{ item.callDate }}</span>
                       <span class="log-user">{{ item.visitor }}</span>
                       <span class="log-action">跟进情况：</span>
                    </div>
                    <div class="record-content">{{ item.followUpCondition || '暂无内容' }}</div>
                 </div>
                 <div v-if="followupList.length === 0 && !followupLoading" class="empty-data" style="margin-top: 50px;">暂无跟进记录</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="log">
              <div class="log-list" v-loading="logLoading">
                 <div v-for="(log, index) in logList" :key="index" class="log-item">
                    <span class="log-time">{{ log.createTime }}</span>
                    <span class="log-user">{{ log.operator }}</span>
                    <span class="log-action">{{ formatLogAction(log) }}</span>
                    <span class="log-target" style="margin-left: 4px;">{{ translateDetails(log.actionDetails) }}<template v-if="formatLogTarget(log)">:</template>{{ formatLogTarget(log) }}</span>
                 </div>
                 <div v-if="logList.length === 0 && !logLoading" class="empty-data">暂无操作日志</div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管理信息" name="manage">
              <div class="manage-info">
                 <el-descriptions :column="2" class="custom-desc manage-desc">
                    <el-descriptions-item label="创建人">{{ detailData.createByName }}</el-descriptions-item>
                    <el-descriptions-item label="创建日期">{{ proxy.parseTime(detailData.createTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                    <el-descriptions-item label="修改日期">{{ proxy.parseTime(detailData.updateTime, '{y}-{m}-{d}') }}</el-descriptions-item>
                    <el-descriptions-item label="最后修改人">{{ detailData.updateByName }}</el-descriptions-item>
                 </el-descriptions>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    <el-dialog title="跟进记录" v-model="followupDialogOpen" width="700px" append-to-body destroy-on-close class="followup-dialog">
      <el-form ref="followupFormRef" :model="followupForm" :rules="followupRules" label-width="110px" style="padding: 10px 20px 0;">
        <el-form-item label="客户：">
          <span style="font-weight: 500; color: #333;">{{ detailData.customerName }}</span>
          <span v-if="detailData.leaderName" style="color: #666; margin-left: 5px;">（{{ detailData.leaderName }}）</span>
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="拜访人：" prop="visitor">
              <el-select v-model="followupForm.visitor" placeholder="请选择" style="width: 100%">
                 <el-option v-for="item in userOptions" :key="item.staffId || item.userId" :label="item.staffName || item.nickName" :value="item.staffName || item.nickName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="随访人：" prop="accompanyPerson">
              <el-select v-model="followupForm.accompanyPerson" placeholder="请选择" style="width: 100%" clearable>
                 <el-option v-for="item in userOptions" :key="item.staffId || item.userId" :label="item.staffName || item.nickName" :value="item.staffName || item.nickName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="拜访方式：" prop="visitType">
              <el-select v-model="followupForm.visitType" placeholder="请选择" style="width: 100%">
                 <el-option v-for="dict in visitTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拜访时间：" prop="visitDate">
               <el-date-picker v-model="followupForm.visitDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="下次拜访时间：" prop="nextVisitDate">
               <el-date-picker v-model="followupForm.nextVisitDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="拜访目的：" prop="purpose">
          <el-input v-model="followupForm.purpose" type="textarea" :rows="3" placeholder="请输入内容" />
        </el-form-item>
        
        <el-form-item label="跟进情况：" prop="progress">
          <el-input v-model="followupForm.progress" type="textarea" :rows="3" placeholder="请输入内容" />
        </el-form-item>

        <el-form-item label="记录图片：">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            v-model:file-list="fileList"
            :limit="5"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFollowup" :loading="followupSubmitting" style="width: 80px;">确认</el-button>
          <el-button @click="followupDialogOpen = false" style="width: 80px;">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新建项目联系人抽屉 -->
    <el-drawer v-model="projectContactDrawerOpen" size="70%" direction="rtl" destroy-on-close :with-header="false">
      <div class="drawer-header-standard" style="padding: 15px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-size: 16px; font-weight: bold; color: #333;">新建项目联系人</span>
        <el-icon @click="projectContactDrawerOpen = false" style="cursor: pointer; font-size: 20px;"><Close /></el-icon>
      </div>

      <div style="padding: 20px; overflow-y: auto; height: calc(100vh - 120px);">
        <el-form :model="projectContactForm" :rules="projectContactRules" ref="projectContactFormRef" label-width="100px">
          <!-- 基本信息 -->
          <div class="section-block">
            <div class="section-title">基本信息</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="projectContactForm.name" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系人类型" prop="contactType">
                  <el-select v-model="projectContactForm.contactType" style="width: 100%">
                    <el-option label="公司职员" value="1" />
                    <el-option label="关系资源人" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="projectContactForm.sex">
                    <el-radio label="0">男</el-radio>
                    <el-radio label="1">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="projectContactForm.age" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="部门" prop="deptName">
                  <el-input v-model="projectContactForm.deptName" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职务" prop="position">
                  <el-input v-model="projectContactForm.position" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          
          <div class="section-block">
            <div class="section-title">项目决策</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="项目角色" prop="projectRole">
                  <el-select v-model="projectContactForm.projectRole" style="width: 100%" placeholder="请选择">
                    <el-option label="评分人" value="评分人" />
                    <el-option label="技术支持" value="技术支持" />
                    <el-option label="决策人" value="决策人" />
                    <el-option label="经办人" value="经办人" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否关键人" prop="isKeyPerson">
                  <el-select v-model="projectContactForm.isKeyPerson" style="width: 100%" placeholder="请选择">
                    <el-option label="是" :value="1" />
                    <el-option label="否" :value="0" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="在职状态" prop="status">
                  <el-select v-model="projectContactForm.status" style="width: 100%">
                    <el-option label="在职" value="1" />
                    <el-option label="离职" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                 <el-form-item label="手机号码" prop="phonenumber">
                   <el-input v-model="projectContactForm.phonenumber" placeholder="请输入" />
                 </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div style="padding: 20px; border-top: 1px solid #f0f0f0; text-align: right;">
        <el-button type="primary" @click="submitProjectContact" :loading="contactSubmitting">保存</el-button>
        <el-button @click="projectContactDrawerOpen = false">取消</el-button>
      </div>
    </el-drawer>
    </div>

    <!-- 团队成员管理弹窗 -->
    <el-dialog
      v-model="teamMemberDialogOpen"
      :title="teamMemberForm.id ? '编辑团队成员' : '添加团队成员'"
      width="440px"
      append-to-body
      class="team-member-dialog"
    >
      <el-form :model="teamMemberForm" :rules="teamMemberRules" ref="teamMemberFormRef" label-width="100px" label-position="left">
        <!-- 添加模式 -->
        <template v-if="!teamMemberForm.id">
          <el-form-item label="添加人员：" prop="staffId">
            <el-select v-model="teamMemberForm.staffId" placeholder="请选择" filterable style="width: 100%">
              <el-option v-for="user in userOptions" :key="user.staffId" :label="user.staffName" :value="user.staffId" />
            </el-select>
          </el-form-item>
        </template>
        <!-- 编辑模式 -->
        <template v-else>
          <el-form-item label="人员姓名：">
            <span style="color: #333; font-weight: 500;">
              {{ teamMemberForm.memberName || teamMemberForm.staffName || teamMemberForm.realName }}{{ teamMemberForm.deptName ? '/' + teamMemberForm.deptName : '' }}
            </span>
          </el-form-item>
        </template>

        <el-form-item label="成员角色：" prop="roleName">
          <el-select v-model="teamMemberForm.roleName" placeholder="请选择" style="width: 100%">
            <el-option v-for="opt in roleOptions" :key="opt.dictValue" :label="opt.dictLabel" :value="opt.dictLabel" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="权限：">
          <el-radio-group v-model="teamMemberForm.updateAccredit">
            <el-radio 
              v-for="dict in permissionOptions" 
              :key="dict.dictValue" 
              :value="parseInt(dict.dictValue)"
            >{{ dict.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: right; padding-right: 10px;">
          <el-button type="primary" @click="submitTeamMember" :loading="teamMemberSubmitting" style="padding: 8px 24px;">确 认</el-button>
          <el-button @click="teamMemberDialogOpen = false" style="padding: 8px 24px;">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-drawer>
</template>

<script setup>
import { ref, computed, reactive, watch, getCurrentInstance } from 'vue';
import { Plus, Search, Close, Upload, Edit } from '@element-plus/icons-vue';
import { getOpportunity, updateOpportunity } from '@/api/saleManage/opportunity/index';
import { listTeamMember, addTeamMember, updateTeamMember, delTeamMember } from '@/api/saleManage/opportunity/teamMember';
import { listOperationLog } from '@/api/customer/operationLog';
import { listRecord, addRecord } from '@/api/visit/record';
import { listCommonDict, listDictByType } from "@/api/customer/customerDict";
import { selectStaffOptionList } from "@/api/system/comStaff/index";
import { listContact, addContact, delContact } from "@/api/customer/crmContact";
import { listByIds } from "@/api/system/oss/index";
import { globalHeaders } from '@/utils/request';
import { ElMessageBox, ElMessage } from 'element-plus';

const props = defineProps({
  saleStatusOptions: { type: Array, default: () => [] },
  projectLevelOptions: { type: Array, default: () => [] },
  infoSourceOptions: { type: Array, default: () => [] },
  procurementMethodOptions: { type: Array, default: () => [] }
});

const emit = defineEmits(['update:modelValue', 'edit', 'success']);

const steps = ['标前磋商', '立项公示', '应标投标', '结案'];
const currentStepIndex = computed(() => {
  const schedule = detailData.value.projectSchedule;
  if (!schedule || schedule === '0') return -1;
  return parseInt(schedule) - 1;
});

const visible = ref(false);

const detailData = ref({});
const leftActiveTab = ref('info');
const rightActiveTab = ref('team');
const teamMembers = ref([]);
const searchMember = ref('');
const teamMemberDialogOpen = ref(false);
const teamMemberSubmitting = ref(false);
const teamMemberFormRef = ref(null);
const teamMemberForm = reactive({
  id: undefined,
  staffId: undefined,
  memberName: '',
  staffName: '',
  realName: '',
  roleName: '',
  izManager: 0,
  izBiz: 0,
  updateAccredit: 0
});

const roleOptions = ref([]);
const permissionOptions = ref([]);

const teamMemberRules = {
  staffId: [{ required: true, message: '请选择成员', trigger: 'change' }]
};

const filteredTeamMembers = computed(() => {
  return teamMembers.value.filter(item => {
    const name = item.memberName || item.staffName || item.realName || '';
    return name.toLowerCase().includes(searchMember.value.toLowerCase());
  });
});

const { proxy } = getCurrentInstance();

// 跟进记录
const followupList = ref([]);
const followupLoading = ref(false);
const visitMethod = ref('');
const followupDialogOpen = ref(false);
const followupSubmitting = ref(false);
const visitTypeOptions = ref([]);
const userOptions = ref([]);
const followupForm = reactive({
  visitor: undefined,
  accompanyPerson: undefined,
  visitType: undefined,
  visitDate: '',
  nextVisitDate: '',
  purpose: '',
  progress: ''
});
const mockupFileList = ref([]);
const fileList = ref([]);
const followupFormRef = ref(null);

const followupRules = {
  visitor: [{ required: true, message: '请选择拜访人', trigger: 'change' }],
  visitType: [{ required: true, message: '请选择拜访方式', trigger: 'change' }],
  visitDate: [{ required: true, message: '请选择拜访时间', trigger: 'change' }],
  purpose: [{ required: true, message: '请输入拜访目的', trigger: 'blur' }],
  progress: [{ required: true, message: '请输入跟进情况', trigger: 'blur' }]
};

// 操作日志
const logList = ref([]);
const logLoading = ref(false);

const analysisForm = reactive({
  result: 'win',
  summary: ''
});

// 附件管理
const detailFileList = ref([]);
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload');
const headers = ref(globalHeaders());

// 项目联系人
const contactList = ref([]);
const contactLoading = ref(false);
const contactSubmitting = ref(false);
const projectContactDrawerOpen = ref(false);
const projectContactFormRef = ref(null);
const projectContactForm = reactive({
  name: '',
  contactType: '1',
  sex: '0',
  age: '',
  deptName: '',
  position: '',
  projectRole: '',
  isKeyPerson: 0,
  status: '1',
  phonenumber: ''
});
const projectContactRules = {
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  phonenumber: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
  deptName: [{ required: true, message: '部门不能为空', trigger: 'blur' }],
  position: [{ required: true, message: '职务不能为空', trigger: 'blur' }]
};

// 获取文件后缀
const getFileType = (name) => {
  if (!name) return '未知';
  const parts = name.split('.');
  return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : '文件';
};

// 监听文件编号变化
watch(() => detailData.value.fileNo, async (val) => {
  if (val) {
    try {
      const res = await listByIds(val);
      detailFileList.value = (res.data || []).map(item => ({
        name: item.originalName,
        url: item.url,
        ossId: item.ossId,
        type: getFileType(item.originalName),
        uploadTime: item.createTime
      }));
    } catch (e) {
      console.error(e);
    }
  } else {
    detailFileList.value = [];
  }
}, { immediate: true });

const getRoleOptions = async () => {
   const res = await listCommonDict('T0001');
   roleOptions.value = res.data || [];
   const permRes = await listCommonDict('team_permission');
   permissionOptions.value = permRes.data || [];
};

const open = async (row) => {
  visible.value = true;
  leftActiveTab.value = 'info';
  rightActiveTab.value = 'team';
  detailData.value = { ...row };
  teamMembers.value = [];
  
  try {
    const id = row.id;
    if (id) {
      const res = await getOpportunity(id);
      if (res.data) {
        for (const key in res.data) {
          if (res.data[key] !== null && res.data[key] !== undefined && res.data[key] !== '') {
             detailData.value[key] = res.data[key];
          }
        }
        // 结果分析数据
        analysisForm.result = detailData.value.result === '2' ? 'lose' : 'win';
        analysisForm.summary = detailData.value.progress; 
      }
      fetchTeamMembers(id);
      fetchOperationLogs(id);
      fetchFollowupList(id);
      fetchContactList(id);
      getVisitTypeList();
      getUserList();
      getRoleOptions();
    }
  } catch (error) {}
};

const fetchTeamMembers = async (id) => {
  try {
    const res = await listTeamMember(id);
    // 直接使用后端返回的原始数据，所有字段均由后端名称翻译注解自动处理
    teamMembers.value = res.data || [];
  } catch (error) {}
};

/** 新增团队成员 */
const handleNewMember = () => {
  teamMemberForm.id = undefined;
  teamMemberForm.staffId = undefined;
  teamMemberForm.memberName = '';
  teamMemberForm.staffName = '';
  teamMemberForm.realName = '';
  teamMemberForm.roleName = '';
  teamMemberForm.izManager = 0;
  teamMemberForm.izBiz = 1;
  teamMemberForm.updateAccredit = 0;
  teamMemberDialogOpen.value = true;
};

/** 编辑团队成员 */
const handleEditMember = (item) => {
  if (item.id === -1) {
    ElMessage.warning('项目负责人不支持在此处编辑');
    return;
  }
  teamMemberForm.id = item.id;
  teamMemberForm.staffId = item.staffId;
  teamMemberForm.memberName = item.memberName;
  teamMemberForm.staffName = item.staffName;
  teamMemberForm.realName = item.realName;
  teamMemberForm.deptName = item.deptName;
  teamMemberForm.roleName = item.roleName;
  teamMemberForm.updateAccredit = item.updateAccredit;
  teamMemberDialogOpen.value = true;
};

/** 删除团队成员 */
const handleDeleteMember = (item) => {
  if (item.id === -1) {
    ElMessage.warning('负责人不可删除');
    return;
  }
  const name = item.memberName || item.staffName || item.realName || '该成员';
  ElMessageBox.confirm(`确认将成员「${name}」移出团队吗？`, '提示', { type: 'warning' }).then(async () => {
    try {
      await delTeamMember(item.id);
      ElMessage.success('操作成功');
      fetchTeamMembers(detailData.value.id);
    } catch (e) {}
  });
};

/** 提交团队成员 */
const submitTeamMember = async () => {
  teamMemberFormRef.value.validate(async (valid) => {
    if (valid) {
      teamMemberSubmitting.value = true;
      try {
        const data = {
          ...teamMemberForm,
          objectNo: detailData.value.id,
          dataType: 1 // 表示项目商机
        };
        if (data.id) {
          await updateTeamMember(data);
        } else {
          await addTeamMember(data);
        }
        ElMessage.success('操作成功');
        teamMemberDialogOpen.value = false;
        fetchTeamMembers(detailData.value.id);
      } catch (e) {
      } finally {
        teamMemberSubmitting.value = false;
      }
    }
  });
};

const fetchOperationLogs = async (id) => {
  if (!id) return;
  logLoading.value = true;
  try {
    const res = await listOperationLog({ dataType: 1, objectNo: id });
    logList.value = res.data || [];
  } catch (error) {
  } finally {
    logLoading.value = false;
  }
};

const getLogActionText = (actionType) => {
  const map = {
    1: '添加了',
    2: '编辑了',
    3: '删除了',
    4: '认领了',
    5: '转移了',
    6: '分析了'
  };
  return map[actionType] || '操作了';
};

/** 格式化日志描述 */
const formatLogAction = (log) => {
  return getLogActionText(log.actionType);
};

/** 格式化详情(内部翻译) */
const translateDetails = (details) => {
  if (!details) return '';
  const fieldMap = {
    'projectName': '项目名称',
    'projectStatus': '项目状态',
    'projectSchedule': '项目进度',
    'status': '状态'
  };
  let result = details;
  Object.keys(fieldMap).forEach(key => {
    if (result.includes(key)) result = result.replace(key, fieldMap[key]);
  });
  return result;
};

/** 格式化日志目标对象 */
const formatLogTarget = (log) => {
  if (!log.targetObject) return '';

  const details = log.actionDetails || '';
  const target = log.targetObject;

  // 1. 处理项目进度翻译 (1, 2, 3, 4 -> 标前磋商, 立项公示, 应标投标, 结案)
  if (details.includes('projectSchedule') || details.includes('项目进度')) {
    const val = parseInt(target);
    if (!isNaN(val) && val >= 1 && val <= steps.length) {
      return steps[val - 1];
    }
  }

  // 2. 处理状态/项目状态翻译 (0, 1 -> 跟进中, 结案)
  if (details.includes('status') || details.includes('项目状态') || details.includes('projectStatus')) {
    const val = String(target);
    if (val === '0') return '跟进中';
    if (val === '1') return '结案';
    if (props.saleStatusOptions) {
      const dict = props.saleStatusOptions.find(o => String(o.dictValue) === val);
      if (dict) return dict.dictLabel;
    }
  }

  // 3. 处理整体编辑的情况（如果 targetObject 是项目名称，则不重复显示）
  if (details === '项目商机' || details === '修改销售线索' || details.includes('projectName')) {
    if (target === detailData.value.projectName) {
      return '';
    }
  }

  // 4. 兼容逻辑：进度状态变更
  if (target.includes('进度状态变更')) {
    const parts = target.split(',');
    if (parts.length > 1 && /^\d+$/.test(parts[1]) && props.saleStatusOptions) {
      const dict = props.saleStatusOptions.find(o => String(o.dictValue) === parts[1]);
      if (dict) return `进度状态变更,${dict.dictLabel}`;
    }
    return target;
  }

  return target;
};

/** 查询跟进记录列表 */
const fetchFollowupList = async (id) => {
  if (!id) return;
  followupLoading.value = true;
  try {
    const res = await listRecord({ 
      opportunityId: id,
      visitType: visitMethod.value 
    });
    followupList.value = res.rows || [];
  } catch (error) {
    console.error(error);
  } finally {
    followupLoading.value = false;
  }
};

/** 查询拜访方式字典 */
const getVisitTypeList = async () => {
  try {
    const res = await listDictByType('crm_visit_type');
    visitTypeOptions.value = res.data || [];
  } catch (error) {
    console.error(error);
  }
};

/** 查询用户下拉列表 */
const getUserList = async () => {
  try {
    const res = await selectStaffOptionList();
    userOptions.value = res.data || [];
  } catch (error) {
    console.error(error);
  }
};

/** 新建跟进记录 */
const handleNewFollowup = () => {
  if (followupFormRef.value) {
    followupFormRef.value.resetFields();
  }
  Object.assign(followupForm, {
    visitor: undefined,
    accompanyPerson: undefined,
    visitType: undefined,
    visitDate: proxy.parseTime(new Date(), '{y}-{m}-{d}'),
    nextVisitDate: '',
    purpose: '',
    progress: ''
  });
  fileList.value = [];
  followupDialogOpen.value = true;
};

/** 提交跟进记录 */
const submitFollowup = () => {
  followupFormRef.value.validate(async (valid) => {
    if (valid) {
      followupSubmitting.value = true;
      try {
        const data = {
          ...followupForm,
          opportunityId: detailData.value.id,
          customerName: detailData.value.customerName,
          // 接口对应字段
          followUpCondition: followupForm.progress
        };
        await addRecord(data);
        ElMessage.success('操作成功');
        followupDialogOpen.value = false;
        fetchFollowupList(detailData.value.id);
        fetchOperationLogs(detailData.value.id);
        // 清空表单
        handleNewFollowup();
      } catch (error) {
        console.error(error);
      } finally {
        followupSubmitting.value = false;
      }
    }
  });
};

/** 查询联系人列表 */
const fetchContactList = async (id) => {
  if (!id) return;
  contactLoading.value = true;
  try {
    const res = await listContact({ opportunityId: id });
    contactList.value = res.rows || [];
  } catch (e) {
  } finally {
    contactLoading.value = false;
  }
};

/** 新建项目联系人 */
const handleNewProjectContact = () => {
  Object.assign(projectContactForm, {
    name: '',
    contactType: '1',
    sex: '0',
    age: '',
    deptName: '',
    position: '',
    projectRole: '',
    isKeyPerson: 0,
    status: '1',
    phonenumber: ''
  });
  projectContactDrawerOpen.value = true;
};

/** 提交项目联系人 */
const submitProjectContact = () => {
  projectContactFormRef.value.validate(async (valid) => {
    if (valid) {
      contactSubmitting.value = true;
      try {
        await addContact({
          ...projectContactForm,
          opportunityId: detailData.value.id,
          customerNo: detailData.value.customerNo
        });
        ElMessage.success('操作成功');
        projectContactDrawerOpen.value = false;
        fetchContactList(detailData.value.id);
      } catch (e) {
      } finally {
        contactSubmitting.value = false;
      }
    }
  });
};

/** 删除联系人 */
const handleDeleteContact = (row) => {
  ElMessageBox.confirm(`确认删除联系人「${row.name}」吗？`, '提示', { type: 'warning' }).then(async () => {
    await delContact(row.id);
    ElMessage.success('操作成功');
    fetchContactList(detailData.value.id);
  });
};

/** 附件上传成功 */
const handleUploadSuccess = async (res) => {
  if (res.code === 200) {
    const ossId = res.data.ossId;
    const currentFileNos = detailData.value.fileNo ? detailData.value.fileNo.split(',') : [];
    currentFileNos.push(ossId);
    const newFileNo = currentFileNos.join(',');
    
    try {
      await updateOpportunity({
        id: detailData.value.id,
        fileNo: newFileNo
      });
      detailData.value.fileNo = newFileNo;
      ElMessage.success('操作成功');
    } catch (e) {
      ElMessage.error('同步附件信息失败');
    }
  } else {
    ElMessage.error(res.msg || '上传失败');
  }
};

const handleClose = () => {
  visible.value = false;
};

/** 点击步骤修改进度 */
const handleStepClick = async (index) => {
  const targetSchedule = String(index + 1);
  const targetLabel = steps[index];
  const isCancel = targetSchedule === String(detailData.value.projectSchedule);
  
  const confirmMsg = isCancel 
    ? `确认取消当前进度「${targetLabel}」并重置吗？` 
    : `确认将项目进度修改为「${targetLabel}」吗？`;

  ElMessageBox.confirm(confirmMsg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 如果是取消当前步骤，则进度回退到上一个 index
      const finalSchedule = isCancel ? String(index) : targetSchedule;
      await updateOpportunity({
        id: detailData.value.id,
        projectSchedule: finalSchedule,
        status: finalSchedule === '4' ? '1' : detailData.value.status
      });
      detailData.value.projectSchedule = finalSchedule;
      if (finalSchedule === '4') detailData.value.status = '1';
      
      ElMessage.success('操作成功');
      fetchOperationLogs(detailData.value.id);
      emit('success');
    } catch (error) {
      console.error(error);
    }
  }).catch(() => {});
};

/* ========== 辅助方法 ========== */
const getSaleStatusLabel = (status) => {
  if (String(status) === '0') return '跟进中';
  if (String(status) === '1') return '结案';
  
  if (!props.saleStatusOptions || props.saleStatusOptions.length === 0) return status;
  const item = props.saleStatusOptions.find(i => String(i.dictValue) === String(status));
  return item ? item.dictLabel : status;
};

const findProjectLevelName = (level) => {
  if (!props.projectLevelOptions || props.projectLevelOptions.length === 0) return level;
  const item = props.projectLevelOptions.find(i => String(i.dictValue) === String(level));
  return item ? item.dictLabel : level;
};

const findInfoSourceName = (source) => {
  if (!props.infoSourceOptions || props.infoSourceOptions.length === 0) return source;
  const item = props.infoSourceOptions.find(i => String(i.dictValue) === String(source));
  return item ? item.dictLabel : source;
};

const findProcurementMethodName = (method) => {
  if (!props.procurementMethodOptions || props.procurementMethodOptions.length === 0) return method;
  const item = props.procurementMethodOptions.find(i => String(i.dictValue) === String(method));
  return item ? item.dictLabel : method;
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.detail-drawer {
  :deep(.el-drawer__header) {
    margin-bottom: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    
    span {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
  
  :deep(.el-drawer__body) {
    padding: 0;
    background-color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

.detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-progress {
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }
  
  .chevron-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;

    .chevron-step {
      flex: 1;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      color: #86909C;
      font-size: 13px;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid #E5E6EB;
      
      /* 使用 clip-path 实现箭头形状 */
      clip-path: polygon(
        calc(100% - 10px) 0%, 
        100% 50%, 
        calc(100% - 10px) 100%, 
        0% 100%, 
        10px 50%, 
        0% 0%
      );

      /* 第一个步骤：圆头左侧 */
      &:first-child {
        border-radius: 16px 0 0 16px;
        padding-left: 10px;
        clip-path: polygon(
          calc(100% - 10px) 0%, 
          100% 50%, 
          calc(100% - 10px) 100%, 
          0% 100%, 
          0% 0%
        );
      }

      /* 最后一个步骤：圆头右侧 */
      &:last-child {
        border-radius: 0 16px 16px 0;
        padding-right: 10px;
        clip-path: polygon(
          100% 0%, 
          100% 100%, 
          0% 100%, 
          10px 50%, 
          0% 0%
        );
      }

      &.is-active {
        background-color: #00B881;
        border-color: #00B881;
        color: #fff;
        font-weight: bold;
      }
      
      &.is-completed {
        background-color: #E6F8F3;
        color: #00B881;
        border-color: #00B881;
      }
      
      &:hover:not(.is-active) {
        background-color: #f5f7fa;
      }
    }
  }

  .latest-progress {
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 12px;
    margin-top: 10px;

    .label {
      color: #86909C;
    }

    .all-progress {
      color: #409eff;
      cursor: pointer;
      font-weight: 500;
    }

    .progress-content {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #1D2129;
      
      .user { font-weight: bold; }
      .time { color: #86909C; }
      .desc { color: #4E5969; }
    }
  }
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  
  .left-panel {
    flex: 7;
    background: #fff;
    border-right: 1px solid #f0f0f0;
    padding: 10px 20px 20px;
    overflow-y: auto;
  }
  
  .right-panel {
    flex: 3;
    background: #fff;
    padding: 10px 20px 20px;
    overflow-y: auto;
  }
}

/* 标签页样式 */
.custom-tabs {
  :deep(.el-tabs__header) {
    margin-bottom: 25px;
    border-bottom: none;
  }
  
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  
  :deep(.el-tabs__item) {
    font-size: 14px;
    color: #4e5969;
    padding: 0 15px !important;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    
    &.is-active {
      color: #f53f3f !important;
      font-weight: bold;
    }
    
    &:hover {
      color: #f53f3f;
    }
  }
  
  :deep(.el-tabs__active-bar) {
    background-color: #f53f3f;
    height: 3px;
    border-radius: 2px;
  }
}

/* 信息区块 */
.info-block {
  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .title {
      font-weight: bold;
      font-size: 15px;
      color: #1d2129;
    }
    
    .edit-btn {
      background-color: #409EFF;
      border-color: #409EFF;
      padding: 8px 16px;
      border-radius: 4px;
      font-weight: 500;
      display: flex;
      align-items: center;
      
      &:hover {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }
    }
  }
}

.custom-desc {
  :deep(.el-descriptions__label) {
    color: #86909C;
    width: 100px;
    padding-bottom: 16px;
    font-weight: normal;
  }
  :deep(.el-descriptions__content) {
    color: #1d2129;
    padding-bottom: 16px;
  }
}

/* 团队成员区域 */
.team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  
  .add-icon {
    cursor: pointer;
    color: #86909C;
    font-size: 20px;
    &:hover {
      color: #00B881;
    }
  }
}

.search-box {
  margin-bottom: 20px;
  :deep(.el-input__wrapper) {
    background-color: #fff;
    box-shadow: 0 0 0 1px #E5E6EB inset;
    border-radius: 2px;
    height: 32px;
    
    &.is-focus {
      box-shadow: 0 0 0 1px #00B881 inset;
    }

    .el-input__inner {
      font-size: 13px;
      &::placeholder {
        color: #C9CDD4;
      }
    }
  }
}

.team-list {
  display: flex;
  flex-direction: column;
  
  .team-item {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 12px 0;
    transition: all 0.2s;
    border-bottom: 1px solid #f2f3f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .member-info {
      flex: 1;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      
      .info-top {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        
        .member-name {
          font-size: 14px;
          font-weight: 500;
          color: #1d2129;
        }
        
        .leader-tag {
          font-size: 12px;
          height: 20px;
          line-height: 18px;
          padding: 0 6px;
          color: #00B42A;
          background-color: #fff;
          border: 1px solid #00B42A;
          border-radius: 2px;
          margin-right: 4px;
        }
        
        .role-desc, .permission-desc {
          font-size: 12px;
          color: #86909C;
        }
      }
    }
    
    .member-actions {
      display: flex;
      gap: 12px;
      .el-button {
        padding: 0;
        font-size: 12px;
        &.btn-edit { 
          color: #FF7D00; 
        }
        &.btn-delete { 
          color: #86909C; 
        }
        
        &:hover { opacity: 0.8; }
      }
    }
  }
}

.empty-data {
  text-align: center;
  color: #86909C;
  padding: 30px 0;
  font-size: 13px;
}

/* 其他选项卡样式 */
.tab-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.custom-table {
  :deep(.el-table__header-wrapper th) {
    background-color: #f7f8fa;
    color: #4e5969;
    font-weight: 600;
  }
}

.record-item {
  background: #f7f8fa;
  padding: 15px !important;
  border-radius: 8px;
  border: none;
  margin-bottom: 15px;
  
  .log-time { color: #86909C; }
  .log-user { color: #409eff; font-weight: 500; }
  
  .record-content {
    background: #fff;
    margin-top: 10px;
    border: 1px solid #e5e6eb;
  }
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 4px;
  
  .el-button {
    font-size: 14px;
    font-weight: 500;
    color: #409eff;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
  }
  
  .filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .label {
      font-size: 13px;
      color: #86909C;
      white-space: nowrap;
    }
    
    :deep(.el-input__wrapper) {
      width: 140px;
      height: 32px;
      background-color: #fff;
      box-shadow: 0 0 0 1px #E5E6EB inset;
      border-radius: 2px;
      
      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }
  }
}

.log-list {
  padding: 10px 0;
  
  .log-item {
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    
    .log-time {
      color: #BFBFBF;
      margin-right: 4px;
    }
    
    .log-user {
      color: #409eff;
      cursor: pointer;
    }
    
    .log-action {
      color: #86909c;
    }
    
    .log-target {
      color: #409eff;
      font-weight: normal;
    }
  }
}

.followup-dialog, .team-member-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #e5e6eb;
    padding: 16px 24px;
    margin: 0;
  }
}
</style>
