<template>
  <div class="approval-flow-container">
    <div class="page-header">
      <PageTitle title="审批流程" />
      <el-button type="danger" @click="handleAddFlow">新增流程</el-button>
    </div>

    <el-table :data="flowList" border>
      <el-table-column prop="id" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="流程名称" min-width="200" />
      <el-table-column prop="status" label="流程状态" min-width="150">
        <template #default="{ row }">
          <span :class="['status-text', row.status === '生效' ? 'active' : '']">{{ row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="handleDisable(row)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { PageTitle } from '@/components'

const router = useRouter()

const flowList = ref([
  { id: 1, name: '物资采购审批', status: '生效' },
  { id: 2, name: '流程名称', status: '生效' },
  { id: 3, name: '测试流程', status: '生效' }
])

const handleAddFlow = () => {
  router.push('/organization/approvalFlow/create')
}

const handleEdit = (row: any) => {
  router.push(`/organization/approvalFlow/create?id=${row.id}`)
}

const handleDisable = (row: any) => {
  ElMessageBox.confirm(`确定要禁用"${row.name}"吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = '禁用'
    ElMessage.success('已禁用')
  }).catch(() => {})
}
</script>

<style scoped lang="scss">
.approval-flow-container {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}

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

  :deep(.page-title) {
    margin-bottom: 0;
  }
}

:deep(.el-table) {
  th.el-table__cell {
    background: #fafafa;
    font-weight: 500;
    color: #333;
  }
  .el-table__cell {
    padding: 12px 0;
  }
}

.status-text {
  color: #999;
  &.active { color: #67c23a; }
}
</style>
