<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="6">
        <el-card shadow="never">
          <template #header><div class="card-header"><span>法规分类</span><el-button size="small" circle @click="handleAddCate">+</el-button></div></template>
          <el-tree :data="cateTree" :props="{label:'cateName'}" default-expand-all highlight-current
            @node-click="handleCateClick" :expand-on-click-node="false">
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span class="tree-actions">
                  <el-button type="primary" link size="small" @click.stop="handleEditCate(data)">编辑</el-button>
                  <el-button type="danger" link size="small" @click.stop="handleDeleteCate(data)">删除</el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card shadow="never">
          <template #header><div class="card-header"><span>法规列表</span><el-button type="primary" size="small" @click="handleAdd">新增法规</el-button></div></template>
          <el-table :data="lawList" stripe v-loading="loading">
            <el-table-column prop="aid" label="序号" width="60" />
            <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
            <el-table-column prop="subtitle" label="副标题" min-width="150" show-overflow-tooltip />
            <el-table-column prop="cateId" label="分类ID" width="80" />
            <el-table-column prop="pubDate" label="发布日期" width="140" />
            <el-table-column prop="status" label="状态" width="80">
              <template #default="s"><el-tag size="small">{{ s.row.status === '1' ? '已发布' : '草稿' }}</el-tag></template>
            </el-table-column>
            <el-table-column prop="viewCount" label="点击量" width="70" />
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="s">
                <el-button type="primary" link @click="handleView(s.row)">查看</el-button>
                <el-button type="primary" link @click="handleEdit(s.row)">编辑</el-button>
                <el-button type="danger" link @click="handleDelete(s.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!-- 法规新增/编辑对话框 -->
    <el-dialog v-model="open" :title="title" width="800px" top="5vh">
      <el-form :model="form" label-width="100px">
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="法规标题"><el-input v-model="form.title" placeholder="请输入标题" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="副标题"><el-input v-model="form.subtitle" placeholder="请输入副标题" /></el-form-item></el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="分类">
            <el-tree-select v-model="form.cateId" :data="cateTree" :props="{ label:'cateName', value:'cateId' }" check-strictly placeholder="请选择分类" style="width:100%" />
          </el-form-item></el-col>
          <el-col :span="12"><el-form-item label="发布人"><el-input v-model="form.pubUser" placeholder="请输入发布人" /></el-form-item></el-col>
        </el-row>
        <el-form-item label="法规内容">
          <Editor v-model="form.content" :height="300" />
        </el-form-item>
      </el-form>
      <template #footer><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="open=false">取 消</el-button></template>
    </el-dialog>
    <!-- 法规详情对话框 -->
    <el-dialog v-model="viewOpen" title="法规详情" width="800px" top="5vh">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="标题" :span="2">{{ viewData.title }}</el-descriptions-item>
        <el-descriptions-item label="副标题" :span="2">{{ viewData.subtitle }}</el-descriptions-item>
        <el-descriptions-item label="分类ID">{{ viewData.cateId }}</el-descriptions-item>
        <el-descriptions-item label="发布人">{{ viewData.pubUser }}</el-descriptions-item>
        <el-descriptions-item label="发布日期">{{ viewData.pubDate }}</el-descriptions-item>
        <el-descriptions-item label="状态"><el-tag size="small">{{ viewData.status === '1' ? '已发布' : '草稿' }}</el-tag></el-descriptions-item>
      </el-descriptions>
      <div class="law-content" v-html="viewData.content"></div>
    </el-dialog>
    <!-- 分类编辑对话框 -->
    <el-dialog v-model="cateOpen" :title="cateTitle" width="400px">
      <el-form :model="cateForm" label-width="80px">
        <el-form-item label="分类名称"><el-input v-model="cateForm.cateName" placeholder="请输入分类名称" /></el-form-item>
        <el-form-item label="分类说明"><el-input v-model="cateForm.cateMemo" type="textarea" :rows="3" placeholder="请输入分类说明" /></el-form-item>
        <el-form-item label="排序"><el-input-number v-model="cateForm.cateSeq" :min="0" :max="9999" style="width:100%" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submitCateForm">确 定</el-button>
        <el-button @click="cateOpen=false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Law">
import { getLawCateList, getLawCateTree, getLawCate, addLawCate, updateLawCate, delLawCate, getLawList, getLawDetail, saveLaw, delLaw } from '@/api/slgc/law/index'
import Editor from '@/components/Editor/index'
const { proxy } = getCurrentInstance()
const loading = ref(true); const open = ref(false); const title = ref('')
const viewOpen = ref(false); const viewData = ref({})
const cateTree = ref([]); const lawList = ref([]); const form = ref({})
const cateOpen = ref(false); const cateTitle = ref(''); const cateForm = ref({ cateId: '', cateName: '', cateMemo: '', cateSeq: 0 })

function handleCateClick(d) { getLawList({ cateId: d.cateId }).then(r => { lawList.value = r.rows }) }
function handleAdd() { form.value = {}; title.value = '新增法规'; open.value = true }
function handleView(r) {
  getLawDetail(r.aid).then(res => { viewData.value = res.data; viewOpen.value = true })
}
function handleEdit(r) {
  getLawDetail(r.aid).then(res => { form.value = res.data; title.value = '编辑法规'; open.value = true })
}
function handleDelete(r) { proxy.$modal.confirm('确认删除?').then(() => { delLaw(r.aid).then(() => { ElMessage.success('删除成功'); getLawList().then(r2 => { lawList.value = r2.rows }) }) }) }
function submitForm() { saveLaw(form.value).then(() => { proxy.$modal.msgSuccess('操作成功'); open.value = false; getLawList().then(r => { lawList.value = r.rows }) }) }

function handleAddCate() { cateForm.value = { cateId: '', cateName: '', cateMemo: '', cateSeq: 0 }; cateTitle.value = '新增分类'; cateOpen.value = true }
function handleEditCate(data) {
  getLawCate(data.cateId).then(res => {
    cateForm.value = { cateId: res.data.cateId, cateName: res.data.cateName, cateMemo: res.data.cateMemo || '', cateSeq: res.data.cateSeq || 0 }
    cateTitle.value = '编辑分类'; cateOpen.value = true
  })
}
function handleDeleteCate(data) {
  proxy.$modal.confirm('确认删除分类"' + data.cateName + '"？').then(() => {
    delLawCate(data.cateId).then(() => { ElMessage.success('删除成功'); loadCateTree() })
  })
}
function submitCateForm() {
  if (!cateForm.value.cateName) { ElMessage.warning('请输入分类名称'); return }
  const action = cateForm.value.cateId ? updateLawCate(cateForm.value) : addLawCate(cateForm.value)
  action.then(() => { ElMessage.success('操作成功'); cateOpen.value = false; loadCateTree() })
}
function loadCateTree() { getLawCateTree().then(r => { cateTree.value = r.data || r.rows || [] }) }
onMounted(() => {
  loadCateTree()
  getLawList().then(r => { lawList.value = r.rows; loading.value = false })
})
</script>
<style scoped>
.card-header { font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center; }
.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; }
.tree-actions { display: none; }
.custom-tree-node:hover .tree-actions { display: inline; }
.law-content { margin-top: 16px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 4px; line-height: 1.8; max-height: 400px; overflow-y: auto; }
</style>
