<template>
  <div class="campaign-management">
    <el-card>
      <template #header>
        <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="130px" inline>
            <el-form-item label="Campaign ID:">
              <el-input v-model="searchForm.id" placeholder="支持精确查询" clearable style="width:150px" />
            </el-form-item>
            <el-form-item label="Campaign 名称:">
              <el-input v-model="searchForm.name" placeholder="关键字" clearable style="width:150px" />
            </el-form-item>
            <el-form-item label="Campaign 负责人:">
              <el-input v-model="searchForm.owner" placeholder="关键字" clearable style="width:150px" />
            </el-form-item>
            <el-form-item label="跟进员工:">
              <el-input v-model="searchForm.staff" placeholder="员工姓名" clearable style="width:150px" />
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
        <div class="action-row">
          <el-button type="primary" @click="openModal('create')"><el-icon><Plus /></el-icon>新建 Campaign</el-button>
        </div>
        </div>
      </template>

      <el-table :data="tableData" stripe border style="width:100%">
        <el-table-column label="操作" width="200" fixed="left">
          <template #default="scope">
            <el-button type="text" size="small" @click="openModal('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="openModal('view', scope.row)">查看</el-button>
            <el-button type="text" size="small" style="color:#F56C6C" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="Campaign ID" width="120" align="center" />
        <el-table-column prop="name" label="Campaign 名称" width="190" />
        <el-table-column prop="owner" label="Campaign 负责人" width="160" align="center" />
        <el-table-column label="跟进员工" width="120" align="center">
          <template #default="scope">
            <span :class="{ 'empty-text': !scope.row.staff }">{{ scope.row.staff || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column prop="updateTime" label="更新时间" width="180" align="center" />
      </el-table>
    </el-card>

    <!-- 新建/编辑/查看弹窗 -->
    <el-dialog :title="modalTitle" v-model="modalVisible" width="520px" :close-on-click-modal="false">
      <el-form label-width="130px">
        <el-form-item v-if="modalMode !== 'create'" label="Campaign ID">
          <el-input :value="form.id" disabled />
        </el-form-item>
        <el-form-item label="Campaign 名称" required>
          <el-input v-model="form.name" placeholder="请输入Campaign 名称" :disabled="isViewMode" />
        </el-form-item>
        <el-form-item label="Campaign 负责人" required>
          <el-input v-model="form.owner" placeholder="请输入Campaign 负责人" :disabled="isViewMode" />
        </el-form-item>
        <el-form-item label="跟进员工">
          <el-input v-model="form.staff" placeholder="请输入跟进员工姓名" :disabled="isViewMode" />
        </el-form-item>
      </el-form>
      <template v-if="!isViewMode" #footer>
        <span>
          <el-button @click="modalVisible = false">取消</el-button>
          <el-button type="primary" @click="submitModal">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'CampaignManagement',
  data() {
    return {
      searchForm: { id: '', name: '', owner: '', staff: '' },
      tableData: [],
      modalVisible: false,
      modalMode: 'create',
      form: { id: '', name: '', owner: '', staff: '' }
    }
  },
  computed: {
    modalTitle() {
      return this.modalMode === 'create' ? '新建 Campaign' : this.modalMode === 'edit' ? '编辑 Campaign' : '查看 Campaign'
    },
    isViewMode() {
      return this.modalMode === 'view'
    }
  },
  created() {
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const res = await request.get('/api/campaign/list', { params: this.searchForm })
      this.tableData = res.data
    },
    handleSearch() { this.fetchList() },
    handleReset() {
      this.searchForm = { id: '', name: '', owner: '', staff: '' }
      this.fetchList()
    },
    async handleDelete(row) {
      await ElMessageBox.confirm('您确定要删除此条数据吗？删除后将无法恢复。', '确认删除', { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' })
      await request.post('/api/campaign/delete', { id: row.id })
      ElMessage.success('删除成功')
      this.fetchList()
    },
    openModal(mode, row) {
      this.modalMode = mode
      if (mode === 'create') {
        this.form = { id: '', name: '', owner: '', staff: '' }
      } else {
        this.form = { ...row }
      }
      this.modalVisible = true
    },
    async submitModal() {
      if (!this.form.name || !this.form.owner) {
        ElMessage.warning('请填写Campaign 名称和负责人')
        return
      }
      await request.post('/api/campaign/save', this.form)
      ElMessage.success(this.modalMode === 'create' ? '新建成功' : '保存成功')
      this.modalVisible = false
      this.fetchList()
    }
  }
}
</script>

<style scoped>
.search-section .search-row { margin-bottom: 0; }
.search-section .action-row { margin-top: 15px; }
.button-group { display: inline-block; margin-left: 20px; }
.empty-text { color: #c0c4cc; }
</style>
