<template>
  <div class="create-flow-container">
    <div class="page-header">
      <el-button type="primary" link @click="handleBack"><el-icon><ArrowLeft /></el-icon>返回</el-button>
      <span class="page-title">新建审批</span>
    </div>

    <div class="flow-tip">
      <i class="title-bar"></i>
      <span>最多可设置5级审批</span>
    </div>

    <div class="flow-form">
      <div class="form-item">
        <label>流程名称</label>
        <el-input v-model="flowName" placeholder="请输入" style="width: 100%" />
      </div>
    </div>

    <!-- 流程设计器 -->
    <div class="flow-designer">
      <!-- 流程发起节点 -->
      <div class="flow-node start-node">
        <div class="node-header">流程发起</div>
        <div class="node-content">
          <span>发起人：所有人</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>

      <!-- 连接线 + 添加按钮 -->
      <div class="flow-line">
        <div class="line"></div>
        <div class="add-btn" @click="handleAddNode"><el-icon><Plus /></el-icon></div>
        <div class="line"></div>
      </div>

      <!-- 审批人节点 -->
      <div v-for="(node, index) in approvalNodes" :key="index" class="flow-node approval-node">
        <div class="node-header">
          <span>审批人</span>
          <div class="node-actions">
            <el-icon @click="handleEditNode(index)"><Edit /></el-icon>
            <el-icon @click="handleDeleteNode(index)"><Delete /></el-icon>
          </div>
        </div>
        <div class="node-content">
          <span>审批人：{{ node.approvers }}</span>
          <el-icon><ArrowRight /></el-icon>
        </div>

        <!-- 连接线 -->
        <div class="flow-line">
          <div class="line"></div>
          <div class="add-btn" @click="handleAddNodeAfter(index)"><el-icon><Plus /></el-icon></div>
          <div class="line"></div>
        </div>
      </div>

      <!-- 审批结束节点 -->
      <div class="flow-node end-node">
        <div class="node-btn">审批结束</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft, ArrowRight, Plus, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const flowName = ref('')

const approvalNodes = ref([
  { approvers: '周杰伦,杨幂,党群行政人事部...' }
])

const handleBack = () => {
  router.back()
}

const handleAddNode = () => {
  if (approvalNodes.value.length >= 5) {
    ElMessage.warning('最多可设置5级审批')
    return
  }
  approvalNodes.value.unshift({ approvers: '请选择审批人' })
}

const handleAddNodeAfter = (index: number) => {
  if (approvalNodes.value.length >= 5) {
    ElMessage.warning('最多可设置5级审批')
    return
  }
  approvalNodes.value.splice(index + 1, 0, { approvers: '请选择审批人' })
}

const handleEditNode = (index: number) => {
  ElMessage.info(`编辑第${index + 1}级审批人`)
}

const handleDeleteNode = (index: number) => {
  approvalNodes.value.splice(index, 1)
}
</script>

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

.page-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  .page-title { font-size: 16px; font-weight: bold; color: #333; }
}

.flow-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
  .title-bar { display: inline-block; width: 3px; height: 14px; background: #e60012; border-radius: 2px; }
}

.flow-form {
  margin-bottom: 30px;
  .form-item {
    label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; }
    :deep(.el-input__wrapper) { background: #f5f5f5; box-shadow: none; }
  }
}

.flow-designer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.flow-node {
  width: 280px;
  border-radius: 4px;
  overflow: hidden;

  &.start-node {
    .node-header { background: #ff6b6b; color: #fff; padding: 8px 15px; font-size: 13px; }
    .node-content { background: #fff; border: 1px solid #eee; border-top: none; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; cursor: pointer; }
  }

  &.approval-node {
    .node-header { background: #409eff; color: #fff; padding: 8px 15px; font-size: 13px; display: flex; justify-content: space-between; align-items: center;
      .node-actions { display: flex; gap: 10px; .el-icon { cursor: pointer; &:hover { opacity: 0.8; } } }
    }
    .node-content { background: #fff; border: 1px solid #eee; border-top: none; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #666; cursor: pointer; }
  }

  &.end-node {
    .node-btn { background: #909399; color: #fff; padding: 10px 40px; border-radius: 4px; font-size: 13px; text-align: center; }
  }
}

.flow-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;

  .line { width: 1px; height: 20px; background: #ddd; }
  .add-btn { width: 20px; height: 20px; border-radius: 50%; background: #409eff; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; margin: 5px 0;
    &:hover { background: #66b1ff; }
  }
}
</style>
