<template>
  <el-card shadow="never">
    <template #header>
      <div style="display: flex; align-items: center; gap: 8px">
        <span>运营备注（monitor.note.write · 写 platform.db.Annotations）</span>
        <el-tag size="small" type="success" v-if="auth.hasOp('monitor.note.write')">可写</el-tag>
        <el-tag size="small" type="danger" v-else>只读</el-tag>
      </div>
    </template>
    <el-form inline @submit.prevent>
      <el-form-item label="标题">
        <el-input v-model="form.title" style="width: 240px" />
      </el-form-item>
      <el-form-item label="关联目标">
        <el-input v-model="form.target" placeholder="例如 C01 / M02 / S006" style="width: 200px" />
      </el-form-item>
      <el-form-item label="层级">
        <el-select v-model="form.level" style="width: 120px">
          <el-option v-for="lv in ['info','warn','error']" :key="lv" :label="lv" :value="lv" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :disabled="!auth.hasOp('monitor.note.write')" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
    <el-input
      v-model="form.content"
      type="textarea"
      :rows="4"
      placeholder="描述备注内容..."
      :disabled="!auth.hasOp('monitor.note.write')" />

    <el-divider />

    <el-table :data="notes" size="small" max-height="400">
      <el-table-column prop="ts" label="时间" width="180" />
      <el-table-column prop="author" label="作者" width="100" />
      <el-table-column prop="target" label="目标" width="100" />
      <el-table-column prop="level" label="层级" width="80">
        <template #default="s"><el-tag size="small" :type="levelTag(s.row.level)">{{ s.row.level }}</el-tag></template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" />
    </el-table>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()

const form = reactive({ title: '', target: '', level: 'info', content: '' })

interface NoteRow { id: string; ts: string; author: string; target: string; level: string; title: string; content: string }

const notes = ref<NoteRow[]>([
  { id: 'N001', ts: '2026-05-19 10:25', author: 'ops', target: 'C05', level: 'warn', title: 'AGV-005 故障观察', content: '出库点附近频繁停顿，怀疑激光被遮挡' }
])

function levelTag(lv: string) {
  if (lv === 'error') return 'danger'
  if (lv === 'warn') return 'warning'
  return 'info'
}

function submit() {
  if (!form.title) { ElMessage.warning('请填写标题'); return }
  const id = `N${String(notes.value.length + 1).padStart(3, '0')}`
  notes.value.unshift({
    id,
    ts: new Date().toLocaleString('zh-CN'),
    author: auth.user?.username ?? 'mock',
    target: form.target,
    level: form.level,
    title: form.title,
    content: form.content
  })
  ElMessage.success('已记录（Mock，未写入数据库）')
  form.title = ''
  form.content = ''
  form.target = ''
}
</script>
