<template>
  <div class="page-wrap">
    <page-section :title="form.id ? '编辑用例' : '新建用例'">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
        <el-form-item label="项目ID">
          <el-input v-model="projectId" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="前置条件">
          <el-input v-model="form.preconditions" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="步骤(JSON)" prop="steps">
          <el-input v-model="stepsText" type="textarea" :rows="10"></el-input>
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="form.priority">
            <el-option label="P0" :value="0"></el-option>
            <el-option label="P1" :value="1"></el-option>
            <el-option label="P2" :value="2"></el-option>
            <el-option label="P3" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.case_type">
            <el-option label="功能" :value="1"></el-option>
            <el-option label="性能" :value="2"></el-option>
            <el-option label="安全" :value="3"></el-option>
            <el-option label="接口" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="tagsText" placeholder="多个标签用逗号分隔"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
          <el-button @click="$router.push('/test-platform/cases')">返回</el-button>
        </el-form-item>
      </el-form>
    </page-section>
  </div>
</template>

<script>
import PageSection from '@/components/TestPlatform/common/PageSection'
import { createCase, getCaseDetail, updateCase } from '@/api/caseApi'

export default {
  name: 'CaseEditor',
  components: { PageSection },
  data() {
    return {
      saving: false,
      projectId: this.$route.query.projectId || 1,
      form: {
        id: '',
        title: '',
        preconditions: '',
        steps: [],
        priority: 2,
        case_type: 1,
        tags: []
      },
      stepsText: '[]',
      tagsText: '',
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        steps: [{ required: true, message: '请输入步骤', trigger: 'change' }]
      }
    }
  },
  methods: {
    fetchDetail() {
      const caseId = this.$route.query.caseId
      if (!caseId) {
        return
      }
      getCaseDetail(this.projectId, caseId).then(res => {
        const data = (res && res.data) || res || {}
        this.form = Object.assign({}, this.form, data)
        this.stepsText = JSON.stringify(data.steps || [], null, 2)
        this.tagsText = (data.tags || []).join(',')
      })
    },
    submitForm() {
      try {
        this.form.steps = JSON.parse(this.stepsText || '[]')
      } catch (e) {
        this.$message({ type: 'error', message: '步骤 JSON 格式错误' })
        return
      }
      this.form.tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
      this.saving = true
      const request = this.form.id || this.$route.query.caseId
        ? updateCase(this.projectId, this.form.id || this.$route.query.caseId, this.form)
        : createCase(this.projectId, this.form)
      request.then(() => {
        this.$message({ type: 'success', message: '保存成功' })
        this.$router.push({ path: '/test-platform/cases', query: { projectId: this.projectId } })
      }).finally(() => {
        this.saving = false
      })
    }
  },
  created() {
    this.fetchDetail()
  }
}
</script>

<style scoped>
.page-wrap {
  padding: 20px;
}
</style>
