<template>
  <div class="create-ticket-page">
    <BackNav />
    <div class="form-card">
      <el-form :model="form" label-width="100px">
        <el-form-item :label="$t('ticket.subject')"><el-input v-model="form.title" /></el-form-item>
        <el-form-item :label="$t('ticket.category')">
          <el-select v-model="form.category" popper-class="dark-select-dropdown">
            <el-option value="order" label="订单" />
            <el-option value="account" label="账户" />
            <el-option value="product" label="商品" />
            <el-option value="other" label="其他" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('ticket.content')"><el-input v-model="form.content" type="textarea" :rows="6" /></el-form-item>
        <el-form-item><el-button type="primary" @click="submit">{{ $t('common.submit') }}</el-button></el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ticketApi } from '../../api'
import BackNav from '../../components/BackNav.vue'

const router = useRouter()
const form = reactive({ title: '', content: '', category: 'other' })

async function submit() {
  await ticketApi.create(form)
  ElMessage.success('工单已提交')
  router.push('/tickets')
}
</script>

<style scoped lang="scss">
.create-ticket-page { padding: 0; }
.form-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 24px; }
</style>
