<template>
  <div class="app-container model-route-container">
    <el-card shadow="never">
      <div slot="header">
        <span><i class="el-icon-setting" /> 多模型路由配置</span>
        <el-button style="float:right" type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增配置</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData" border>
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column align="center" label="租户ID" prop="companyId" width="80" />
        <el-table-column align="center" label="配置类型" prop="configType" width="130">
          <template slot-scope="scope">
            <el-tag :type="typeTag(scope.row.configType)">{{ typeName(scope.row.configType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="模型A (生成/主质检)" prop="modelA" width="180" />
        <el-table-column align="center" label="模型B (完善/辅助)" prop="modelB" width="180" />
        <el-table-column align="center" label="模型C (校验/复核)" prop="modelC" width="180" />
        <el-table-column align="center" label="行业" prop="industryType" width="100" />
        <el-table-column align="center" label="启用" width="70">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enabled" :active-value="1" :inactive-value="0"
                       @change="(val) => handleToggle(scope.row, val)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" style="color:#f56c6c" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="580px" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="配置类型" prop="configType">
          <el-select v-model="form.configType" placeholder="请选择" :disabled="isEdit" style="width:100%">
            <el-option v-for="t in configTypes" :key="t.code" :label="t.name" :value="t.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型A" prop="modelA">
          <el-input v-model="form.modelA" placeholder="如 doubao-pro-32k" />
        </el-form-item>
        <el-form-item label="模型B" prop="modelB">
          <el-input v-model="form.modelB" placeholder="如 gpt-4o" />
        </el-form-item>
        <el-form-item label="模型C" prop="modelC">
          <el-input v-model="form.modelC" placeholder="如 claude-3-opus" />
        </el-form-item>
        <el-form-item label="行业类型" prop="industryType">
          <el-input v-model="form.industryType" placeholder="如 医疗/教育/通用" />
        </el-form-item>
        <el-form-item label="额外参数" prop="paramsJson">
          <el-input v-model="form.paramsJson" type="textarea" :rows="3" placeholder="JSON格式扩展配置" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listModelConfigs, addModelConfig, updateModelConfig, deleteModelConfig, getModelConfigTypes } from '@/api/workflow/model-route'

export default {
  name: 'ModelRouteConfig',
  data() {
    return {
      loading: false,
      saving: false,
      tableData: [],
      configTypes: [],
      dialogVisible: false,
      dialogTitle: '',
      isEdit: false,
      form: {
        id: null,
        companyId: 0,
        configType: '',
        modelA: '',
        modelB: '',
        modelC: '',
        industryType: '',
        paramsJson: '',
        enabled: 1
      },
      rules: {
        configType: [{ required: true, message: '请选择配置类型', trigger: 'change' }],
        modelA: [{ required: true, message: '请输入模型A', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetchTypes()
    this.fetchList()
  },
  methods: {
    fetchTypes() {
      getModelConfigTypes().then(res => {
        this.configTypes = res.data || []
      }).catch(() => {})
    },
    fetchList() {
      this.loading = true
      listModelConfigs().then(res => {
        this.tableData = res.data || []
      }).finally(() => { this.loading = false })
    },
    typeName(type) {
      const t = this.configTypes.find(c => c.code === type)
      return t ? t.name : type
    },
    typeTag(type) {
      const map = { workflow_generator: 'success', quality_check: 'warning', intent_router: 'info', reply_generator: '' }
      return map[type] || ''
    },
    handleAdd() {
      this.dialogTitle = '新增模型路由配置'
      this.isEdit = false
      this.form = { id: null, companyId: 0, configType: '', modelA: '', modelB: '', modelC: '', industryType: '', paramsJson: '', enabled: 1 }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑模型路由配置'
      this.isEdit = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleToggle(row, val) {
      updateModelConfig(row.id, { enabled: val }).then(() => {
        row.enabled = val
        this.$message.success(val === 1 ? '已启用' : '已禁用')
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除该配置？', '提示', { type: 'warning' }).then(() => {
        deleteModelConfig(row.id).then(() => {
          this.$message.success('已删除')
          this.fetchList()
        })
      }).catch(() => {})
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.saving = true
        const api = this.isEdit ? updateModelConfig(this.form.id, this.form) : addModelConfig(this.form)
        api.then(() => {
          this.$message.success(this.isEdit ? '更新成功' : '新增成功')
          this.dialogVisible = false
          this.fetchList()
        }).finally(() => { this.saving = false })
      })
    }
  }
}
</script>
<style scoped>
.model-route-container { padding: 10px; }
</style>
