{% extends "../layout.html" %}

{% block title %}{{ columnInfo.name if columnInfo else '文字列表' }}{% endblock %}

{% block content %}
<div id="textApp">
  <el-card shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="font-medium">{{ columnInfo.name if columnInfo else '文字列表' }}</span>
          <el-tag type="warning" size="small">文字列表</el-tag>
        </div>
        <el-button type="primary" @click="openDialog()">+ 新增</el-button>
      </div>
    </template>

    <!-- 筛选栏 -->
    <div class="flex items-center gap-4 mb-4">
      <el-input v-model="query.keyword" placeholder="搜索标题..." style="width:200px;" clearable @keyup.enter="loadList"></el-input>
      <el-select v-model="query.year" placeholder="年度" style="width:100px;" clearable>
        <el-option v-for="y in yearOptions" :key="y" :label="y" :value="y"></el-option>
      </el-select>
      <el-select v-model="query.status" placeholder="状态" style="width:100px;" clearable>
        <el-option label="已发布" :value="1"></el-option>
        <el-option label="待审核" :value="2"></el-option>
        <el-option label="草稿" :value="0"></el-option>
      </el-select>
      <el-button type="primary" @click="loadList">搜索</el-button>
      <el-button @click="resetQuery" class="ml-2">重置</el-button>
    </div>

    <!-- 信息栏 -->
    <div class="flex items-center gap-3 mb-3 text-sm text-gray-500">
      <span>共 <b class="text-orange-500">${ total }</b> 条记录</span>
      <div class="flex-1"></div>
      <el-button size="small" :disabled="!selectedIds.length" @click="batchDelete">批量删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="list" v-loading="loading" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column prop="title" label="标题" min-width="300">
        <template #default="{ row }">
          <a :href="row.file_url" target="_blank" class="text-link">${ row.title }</a>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类" width="120"></el-table-column>
      <el-table-column prop="file_type" label="附件" width="80">
        <template #default="{ row }">
          <span class="file-badge" :class="'file-' + row.file_type?.toLowerCase()">${ row.file_type || '-' }</span>
        </template>
      </el-table-column>
      <el-table-column prop="year" label="年度" width="80"></el-table-column>
      <el-table-column prop="status" label="状态" width="90">
        <template #default="{ row }">
          <el-tag :type="statusMap[row.status]?.type" size="small">${ statusMap[row.status]?.text }</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="发布日期" width="110">
        <template #default="{ row }">${ row.create_time?.slice(0,10) }</template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="openDialog(row)">编辑</el-button>
          <el-button type="primary" link size="small" @click="downloadFile(row)" :disabled="!row.file_url">下载</el-button>
          <el-button type="danger" link size="small" @click="deleteItem(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex justify-end mt-4" v-if="total > pageSize">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:current-page="page" @current-change="loadList"></el-pagination>
    </div>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px" destroy-on-close draggable top="5vh">
    <el-form :model="form" label-width="80px">
      <el-form-item label="标题" required>
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <div class="flex gap-4">
        <el-form-item label="分类" class="flex-1">
          <el-select v-model="form.category" placeholder="选择分类" style="width:100%;" :teleported="false" filterable allow-create>
            <el-option v-for="c in categoryOptions" :key="c" :label="c" :value="c"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年度" class="flex-1">
          <el-select v-model="form.year" placeholder="选择年度" style="width:100%;" :teleported="false">
            <el-option v-for="y in yearOptions" :key="y" :label="y" :value="y"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="附件">
        <div class="flex items-center gap-2 w-full">
          <el-input v-model="form.file_name" placeholder="选择附件（PDF/DOC/XLS）" readonly class="flex-1"></el-input>
          <el-button @click="triggerUpload">选择文件</el-button>
          <input type="file" ref="fileInput" accept=".pdf,.doc,.docx,.xls,.xlsx" style="display:none;" @change="handleUpload">
        </div>
        <div class="text-xs text-gray-400 mt-1">支持 PDF、DOC、XLS 格式</div>
      </el-form-item>
      <div class="flex gap-4">
        <el-form-item label="附件类型" class="flex-1">
          <el-select v-model="form.file_type" style="width:100%;" :teleported="false">
            <el-option label="PDF" value="PDF"></el-option>
            <el-option label="DOC" value="DOC"></el-option>
            <el-option label="XLS" value="XLS"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" class="flex-1">
          <el-select v-model="form.status" style="width:100%;" :teleported="false">
            <el-option label="已发布" :value="1"></el-option>
            <el-option label="待审核" :value="2"></el-option>
            <el-option label="草稿" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveItem" :loading="saving">保存</el-button>
    </template>
  </el-dialog>
</div>

<style>
.text-link { color: #333; transition: .15s; }
.text-link:hover { color: #ff7800; }
.file-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; background: #fef0f0; color: #f56c6c; letter-spacing: .5px; }
.file-badge.file-xls { background: #f0f9eb; color: #67c23a; }
.file-badge.file-xlsx { background: #f0f9eb; color: #67c23a; }
.file-badge.file-doc { background: #ecf5ff; color: #409eff; }
.file-badge.file-docx { background: #ecf5ff; color: #409eff; }
</style>
{% endblock %}

{% block js %}
<script>
const col = '{{ col }}';
const { createApp, ref, reactive, computed, onMounted } = Vue;

const app = createApp({
  delimiters: ['${', '}'],
  setup() {
    const loading = ref(false);
    const list = ref([]);
    const total = ref(0);
    const page = ref(1);
    const pageSize = ref(20);
    const query = reactive({ keyword: '', year: '', status: '' });
    const selectedIds = ref([]);

    const dialogVisible = ref(false);
    const dialogTitle = ref('新增');
    const saving = ref(false);
    const fileInput = ref(null);

    const currentYear = new Date().getFullYear();
    const yearOptions = Array.from({ length: 5 }, (_, i) => String(currentYear - i));
    const categoryOptions = ['药品援助公示', '管理制度', '机构年报', '审计报告', '财务报告', '关联方信息', '项目执行报告', '党建规章'];
    const statusMap = {
      1: { type: 'success', text: '已发布' },
      2: { type: 'warning', text: '待审核' },
      0: { type: 'info', text: '草稿' }
    };

    const defaultForm = {
      id: null, title: '', category: '', year: String(currentYear),
      file_url: '', file_name: '', file_type: 'PDF', status: 1
    };
    const form = reactive({ ...defaultForm });

    async function loadList() {
      loading.value = true;
      try {
        const params = new URLSearchParams({ col, page: page.value, pageSize: pageSize.value, ...query });
        const res = await fetch('/admin/content/text/list?' + params).then(r => r.json());
        if (res.code === 0) {
          list.value = res.data.data || [];
          total.value = res.data.count || 0;
        }
      } finally { loading.value = false; }
    }

    function resetQuery() {
      query.keyword = '';
      query.year = '';
      query.status = '';
      page.value = 1;
      loadList();
    }

    function handleSelectionChange(rows) {
      selectedIds.value = rows.map(r => r.id);
    }

    function openDialog(item) {
      if (item) {
        dialogTitle.value = '编辑';
        Object.assign(form, {
          id: item.id, title: item.title, category: item.category || '',
          year: item.year || String(currentYear), file_url: item.file_url || '',
          file_name: item.file_name || '', file_type: item.file_type || 'PDF',
          status: item.status
        });
      } else {
        dialogTitle.value = '新增';
        Object.assign(form, { ...defaultForm });
      }
      dialogVisible.value = true;
    }

    function triggerUpload() {
      fileInput.value?.click();
    }

    async function handleUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const formData = new FormData();
      formData.append('file', file);
      try {
        const res = await fetch('/admin/upload', { method: 'POST', body: formData }).then(r => r.json());
        if (res.code === 0) {
          form.file_url = res.data.url;
          form.file_name = file.name;
          // 自动识别文件类型
          const ext = file.name.split('.').pop().toUpperCase();
          if (['PDF'].includes(ext)) form.file_type = 'PDF';
          else if (['DOC', 'DOCX'].includes(ext)) form.file_type = 'DOC';
          else if (['XLS', 'XLSX'].includes(ext)) form.file_type = 'XLS';
          ElementPlus.ElMessage.success('上传成功');
        } else {
          ElementPlus.ElMessage.error(res.msg || '上传失败');
        }
      } catch (err) {
        ElementPlus.ElMessage.error('上传失败');
      }
      e.target.value = '';
    }

    async function saveItem() {
      if (!form.title.trim()) { ElementPlus.ElMessage.warning('请输入标题'); return; }
      saving.value = true;
      try {
        const url = form.id ? '/admin/content/text/edit' : '/admin/content/text/add';
        const body = { ...form, col };
        const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '保存失败');
        }
      } finally { saving.value = false; }
    }

    async function deleteItem(item) {
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除"' + item.title + '"？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/text/delete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: item.id }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    async function batchDelete() {
      if (!selectedIds.value.length) return;
      try {
        await ElementPlus.ElMessageBox.confirm('确定删除选中的 ' + selectedIds.value.length + ' 条记录？', '提示', { type: 'warning' });
        const res = await fetch('/admin/content/text/batchDelete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: selectedIds.value }) }).then(r => r.json());
        if (res.code === 0) {
          ElementPlus.ElMessage.success('删除成功');
          loadList();
        } else {
          ElementPlus.ElMessage.error(res.msg || '删除失败');
        }
      } catch {}
    }

    function downloadFile(row) {
      if (row.file_url) {
        window.open(row.file_url, '_blank');
      }
    }

    onMounted(() => loadList());

    return {
      loading, list, total, page, pageSize, query, selectedIds,
      dialogVisible, dialogTitle, saving, form, fileInput,
      yearOptions, categoryOptions, statusMap,
      loadList, resetQuery, handleSelectionChange, openDialog,
      triggerUpload, handleUpload, saveItem, deleteItem, batchDelete, downloadFile
    };
  }
});

app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
app.mount('#textApp');
</script>
{% endblock %}