<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header"><span>栏目分类</span><el-button type="primary" size="small" style="float:right" @click="handleAdd">新增分类</el-button></div>
      </template>
      <el-table v-loading="loading" :data="list" stripe>
        <el-table-column prop="cateId" label="ID" width="80" />
        <el-table-column prop="cateName" label="分类名称" min-width="160" />
        <el-table-column prop="cateMemo" label="分类说明" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="s">
            <el-button type="primary" link icon="Edit" @click="handleEdit(s.row)">编辑</el-button>
            <el-button type="danger" link icon="Delete" @click="handleDelete(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="open" :title="title" width="450px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="分类名称"><el-input v-model="form.cateName" placeholder="请输入分类名称" /></el-form-item>
        <el-form-item label="分类说明"><el-input v-model="form.cateMemo" type="textarea" :rows="3" placeholder="请输入分类说明" /></el-form-item>
        <el-form-item label="排序"><el-input-number v-model="form.cateSeq" :min="0" :max="9999" style="width:100%" /></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>
  </div>
</template>

<script setup name="CmsCategory">
import { getCateList, getCate, addCate, updateCate, delCate } from '@/api/slgc/cms/index'
const { proxy } = getCurrentInstance()
const loading = ref(true)
const list = ref([])
const open = ref(false)
const title = ref('')
const form = ref({ cateId: '', cateName: '', cateMemo: '', cateSeq: 0 })

function handleAdd() { form.value = { cateId: '', cateName: '', cateMemo: '', cateSeq: 0 }; title.value = '新增分类'; open.value = true }
function handleEdit(row) {
  getCate(row.cateId).then(res => {
    form.value = { cateId: res.data.cateId, cateName: res.data.cateName, cateMemo: res.data.cateMemo || '', cateSeq: res.data.cateSeq || 0 }
    title.value = '编辑分类'; open.value = true
  })
}
function handleDelete(row) {
  proxy.$modal.confirm('确认删除分类"' + row.cateName + '"？').then(() => {
    delCate(row.cateId).then(() => { ElMessage.success('删除成功'); loadData() })
  })
}
function submitForm() {
  if (!form.value.cateName) { ElMessage.warning('请输入分类名称'); return }
  const action = form.value.cateId ? updateCate(form.value) : addCate(form.value)
  action.then(() => { ElMessage.success('操作成功'); open.value = false; loadData() })
}
function loadData() { getCateList().then(res => { list.value = res.rows; loading.value = false }) }
onMounted(() => { loadData() })
</script>
<style scoped>.card-header { font-weight: 600; font-size: 16px; }</style>
