<template>
  <div class="workflow-solution-editor" :class="{ 'is-compact': compact }">
    <el-divider v-if="dividerTitle" content-position="left">{{ dividerTitle }}</el-divider>

    <el-form label-width="100px" :size="formSize">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="方案名称">
            <el-input v-model="model.templateName" :size="fieldSize" :disabled="readonly" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业类型">
            <el-select v-model="model.industryType" :size="fieldSize" style="width:100%" :disabled="readonly">
              <el-option label="旅游" value="travel" />
              <el-option label="教育" value="education" />
              <el-option label="医疗" value="medical" />
              <el-option label="医美" value="medical_beauty" />
              <el-option label="装修" value="decoration" />
              <el-option label="零售" value="retail" />
              <el-option label="通用" value="general" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="方案描述">
        <el-input v-model="model.description" :size="fieldSize" type="textarea" :rows="compact ? 2 : 3" :disabled="readonly" />
      </el-form-item>
    </el-form>

    <div class="section-title">动态变量定义（{{ (model.variables || []).length }}个）</div>
    <div v-for="(item, index) in model.variables" :key="'var-' + index" class="edit-row">
      <el-row :gutter="8">
        <el-col :span="4"><el-input v-model="item.varCode" :size="fieldSize" placeholder="变量编码" :disabled="readonly" /></el-col>
        <el-col :span="4"><el-input v-model="item.varName" :size="fieldSize" placeholder="变量名称" :disabled="readonly" /></el-col>
        <el-col :span="3">
          <el-select v-model="item.varType" :size="fieldSize" style="width:100%" :disabled="readonly">
            <el-option label="文本" value="string" />
            <el-option label="日期" value="date" />
            <el-option label="数字" value="number" />
            <el-option label="布尔" value="boolean" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="item.sourceType" :size="fieldSize" style="width:100%" :disabled="readonly">
            <el-option label="手动输入" value="manual" />
            <el-option label="客户画像" value="user_profile" />
            <el-option label="外部API" value="external_api" />
          </el-select>
        </el-col>
        <el-col :span="2"><el-switch v-model="item.required" :active-value="1" :inactive-value="0" :disabled="readonly" /></el-col>
        <el-col :span="5"><el-input v-model="item.description" :size="fieldSize" placeholder="说明" :disabled="readonly" /></el-col>
        <el-col :span="2"><el-button v-if="!readonly" type="danger" :size="btnSize" @click="removeVariable(index)">删除</el-button></el-col>
      </el-row>
    </div>
    <el-button v-if="!readonly" type="primary" plain :size="btnSize" @click="addVariable">添加变量</el-button>

    <div class="section-title">工作流节点（{{ (model.nodes || []).length }}个）</div>
    <draggable v-model="model.nodes" handle=".drag-handle" class="node-list" :disabled="readonly">
      <transition-group>
        <el-card
          v-for="(node, index) in model.nodes"
          :key="(node.nodeCode || 'node') + '-' + index"
          shadow="hover"
          class="node-card"
        >
          <div slot="header" class="node-header">
            <div>
              <i class="el-icon-rank drag-handle" />
              <span class="node-index">#{{ index + 1 }}</span>
            </div>
            <el-button v-if="!readonly" type="text" style="color:#f56c6c" @click="removeNode(index)">删除</el-button>
          </div>
          <el-form label-width="90px" :size="formSize">
            <el-row :gutter="8">
              <el-col :span="12">
                <el-form-item label="节点名称">
                  <el-input v-model="node.nodeName" :size="fieldSize" :disabled="readonly" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="节点类型">
                  <el-select v-model="node.nodeType" :size="fieldSize" style="width:100%" :disabled="readonly">
                    <el-option label="开始节点" :value="1" />
                    <el-option label="消息节点" :value="2" />
                    <el-option label="判断节点" :value="3" />
                    <el-option label="等待节点" :value="4" />
                    <el-option label="结束节点" :value="5" />
                    <el-option label="API调用节点" :value="6" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="节点编码"><el-input v-model="node.nodeCode" :size="fieldSize" :disabled="readonly" /></el-form-item>
            <el-form-item label="下个节点"><el-input v-model="node.nextNodeCode" :size="fieldSize" :disabled="readonly" /></el-form-item>
            <el-form-item label="消息模板" v-if="node.nodeType === 2">
              <el-input v-model="node.messageTemplate" :size="fieldSize" type="textarea" :rows="compact ? 2 : 3" :disabled="readonly" />
            </el-form-item>
            <el-form-item label="发送时间" v-if="node.nodeType === 2">
              <el-input v-model="node.sendTime" :size="fieldSize" :disabled="readonly" placeholder="例如：09:00" />
            </el-form-item>
            <el-form-item label="条件表达式" v-if="node.nodeType === 3">
              <el-input v-model="node.conditionExpr" :size="fieldSize" type="textarea" :rows="compact ? 2 : 3" :disabled="readonly" />
            </el-form-item>
            <el-form-item label="节点配置">
              <el-input v-model="node.nodeConfig" :size="fieldSize" type="textarea" :rows="compact ? 2 : 3" :disabled="readonly" />
            </el-form-item>
          </el-form>
        </el-card>
      </transition-group>
    </draggable>
    <el-button v-if="!readonly" type="primary" plain :size="btnSize" @click="addNode">添加节点</el-button>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'WorkflowSolutionEditor',
  components: { draggable },
  props: {
    value: {
      type: Object,
      required: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    dividerTitle: {
      type: String,
      default: ''
    },
    compact: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formSize() {
      return this.compact ? 'mini' : 'small'
    },
    fieldSize() {
      return this.compact ? 'mini' : 'small'
    },
    btnSize() {
      return this.compact ? 'mini' : 'mini'
    },
    model: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    addVariable() {
      if (!this.model.variables) this.$set(this.model, 'variables', [])
      const idx = this.model.variables.length + 1
      this.model.variables.push({
        varCode: 'VAR_' + idx,
        varName: '新变量' + idx,
        varType: 'string',
        sourceType: 'manual',
        required: 0,
        description: ''
      })
    },
    removeVariable(index) {
      if (!this.model.variables) return
      this.model.variables.splice(index, 1)
    },
    addNode() {
      if (!this.model.nodes) this.$set(this.model, 'nodes', [])
      const idx = this.model.nodes.length + 1
      this.model.nodes.push({
        nodeCode: 'NODE_' + idx,
        nodeName: '新节点' + idx,
        nodeType: 2,
        nodeConfig: '{}',
        messageTemplate: '',
        sendTime: '',
        conditionExpr: '',
        nextNodeCode: ''
      })
    },
    removeNode(index) {
      if (!this.model.nodes) return
      this.model.nodes.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.section-title {
  margin: 14px 0 10px;
  font-weight: 600;
  color: #303133;
}
.edit-row {
  margin-bottom: 8px;
}
.node-list {
  min-height: 20px;
}
.node-card {
  margin-bottom: 10px;
}
.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drag-handle {
  cursor: move;
  margin-right: 8px;
  color: #409eff;
}
.node-index {
  color: #909399;
  font-size: 12px;
}

.workflow-solution-editor.is-compact {
  .section-title {
    margin: 10px 0 8px;
    font-size: 15px;
  }
  .edit-row {
    margin-bottom: 6px;
  }
  .node-card {
    margin-bottom: 8px;
  }
  ::v-deep .el-card__header {
    padding: 8px 12px;
  }
  ::v-deep .el-card__body {
    padding: 10px 12px;
  }
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
  ::v-deep .el-form-item__label {
    font-size: 14px;
  }
  ::v-deep .el-input__inner {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
  ::v-deep .el-textarea__inner {
    padding: 6px 10px;
    line-height: 1.5;
    font-size: 14px;
    min-height: 56px !important;
  }
  ::v-deep .el-select .el-input__inner {
    font-size: 14px;
  }
  ::v-deep .el-switch__label {
    font-size: 13px;
  }
  .node-index {
    font-size: 13px;
  }
  ::v-deep .el-form-item__content {
    font-size: 14px;
  }
}
</style>
