<template>
  <div v-if="selectedNode" class="property-panel">
    <div class="panel-title">节点属性</div>
    <el-form label-width="100px" size="small">
      <el-form-item label="节点ID">
        <el-input v-model="selectedNode.id" disabled />
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input v-model="nodeName" @blur="updateNodeName" />
      </el-form-item>
      <template v-if="selectedNode.type === 'approval-node'">
        <el-form-item label="审批对象类型">
          <el-select
            v-model="nodeProps.assigneeType"
            placeholder="请选择审批对象类型"
            style="width: 100%"
            @change="nodeProps.assigneeValue = ''"
          >
            <el-option label="审批角色" value="ROLE" />
            <el-option label="发起人自己" value="SELF" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="nodeProps.assigneeType === 'ROLE'" label="审批角色">
          <el-select
            v-model="nodeProps.assigneeValue"
            filterable
            clearable
            placeholder="请选择审批角色"
            style="width: 100%"
          >
            <el-option
              v-for="role in roleList"
              :key="role.id"
              :label="role.roleName"
              :value="role.roleCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审批方式">
          <el-select v-model="nodeProps.approveMode" placeholder="请选择" style="width: 100%">
            <el-option label="或签（一人通过即可）" value="or" />
            <el-option label="会签（全部通过）" value="and" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <template #label>
            审批时限
            <el-tooltip placement="top" content="单位：小时，为空则不计算超时">
              <el-icon style="margin-left: 4px; cursor: help;"><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
          <el-input-number
            v-model="nodeProps.timeoutHours"
            :min="1"
            :max="720"
            :precision="0"
            placeholder="不填表示无限制"
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="超时动作">
          <el-select v-model="nodeProps.timeoutAction" placeholder="请选择" style="width: 100%">
            <el-option label="提醒" value="remind" />
            <el-option label="无" value="" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <template #label>
            审批时间字段
            <el-tooltip placement="top" content="导入时按此字段的值作为该节点的审批时间，Excel 列名需与此一致">
              <el-icon style="margin-left: 4px; cursor: help;"><QuestionFilled /></el-icon>
            </el-tooltip>
          </template>
          <el-input v-model="nodeProps.approveTimeField" placeholder="如：审批时间" />
        </el-form-item>
      </template>
      <template v-if="selectedNode.type === 'condition-node'">
        <div class="panel-title">分支配置</div>
        <el-table :data="outgoingEdges" size="small" border class="branch-table">
          <el-table-column label="目标节点" min-width="100">
            <template #default="{ row }">
              {{ getEdgeTargetName(row) }}
            </template>
          </el-table-column>
          <el-table-column label="默认分支" width="80" align="center">
            <template #default="{ row }">
              <el-switch v-model="row.properties.isDefault" @change="onDefaultChange(row)" />
            </template>
          </el-table-column>
          <el-table-column label="分支名称" min-width="100">
            <template #default="{ row }">
              <el-input v-model="row.properties.branchName" size="small" placeholder="如：大额" @blur="onBranchBlur(row)" />
            </template>
          </el-table-column>
          <el-table-column label="条件表达式" min-width="160">
            <template #default="{ row }">
              <el-input v-model="row.properties.condition" size="small" placeholder="如：amount >= 1000" :disabled="row.properties.isDefault" @blur="onBranchBlur(row)" />
            </template>
          </el-table-column>
        </el-table>
        <div class="form-tip">默认分支无需填写条件；有且只能有一个默认分支。</div>
      </template>
      <template v-if="selectedNode.type === 'cc-node'">
        <el-form-item label="抄送人">
          <el-select
            v-model="nodeProps.ccUsers"
            filterable
            clearable
            placeholder="请选择抄送人"
            style="width: 100%"
          >
            <el-option
              v-for="role in roleList"
              :key="role.id"
              :label="role.roleName"
              :value="role.roleCode"
            />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
  </div>
  <div v-else class="property-panel empty">
    <div class="panel-title">节点属性</div>
    <el-empty description="请选择节点" />
  </div>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import type { Role } from '@/types/system'

const props = defineProps<{
  selectedNode: any
  nodeProps: Record<string, any>
  outgoingEdges: any[]
  roleList: Role[]
  getEdgeTargetName: (edge: any) => string
  updateNodeName: () => void
  onDefaultChange: (edge: any) => void
  onBranchBlur: (edge: any) => void
}>()

const { selectedNode, outgoingEdges, roleList, nodeProps } = toRefs(props)
const { getEdgeTargetName, updateNodeName, onDefaultChange, onBranchBlur } = props

const nodeName = computed({
  get: () => selectedNode.value?.text?.value || '',
  set: (val: string) => {
    if (selectedNode.value) {
      selectedNode.value.text = { ...selectedNode.value.text, value: val }
    }
  }
})
</script>

<style scoped>
.property-panel {
  width: 300px;
  border-left: 1px solid #dcdfe6;
  padding: 16px;
  background: #fafafa;
  overflow-y: auto;
}
.property-panel.empty {
  display: flex;
  flex-direction: column;
}
.panel-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #303133;
}
.branch-table {
  margin-top: 8px;
}
.branch-table :deep(.el-input__wrapper) {
  padding-left: 4px;
  padding-right: 4px;
}
</style>
