<template>
  <div class="store-page">
    <Breadcrumb />
    <a-card title="下载项管理">
      <a-space style="margin-bottom: 12px;">
        <a-button type="primary" @click="openCreate">新增下载项</a-button>
      </a-space>

      <a-table :bordered="false" :data="data" :loading="loading" :pagination="false">
        <template #columns>
          <a-table-column title="标题" data-index="title" :width="200" ellipsis tooltip />
          <a-table-column title="图标" :width="70">
            <template #cell="{ record }">{{ record.icon || '📦' }}</template>
          </a-table-column>
          <a-table-column title="版本" data-index="version" :width="90" />
          <a-table-column title="平台" data-index="platform" :width="90" />
          <a-table-column title="排序" data-index="sort_order" :width="70" />
          <a-table-column title="状态" :width="90">
            <template #cell="{ record }">
              <a-tag :color="record.is_active ? 'green' : 'gray'">{{ record.is_active ? '启用' : '停用' }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="160">
            <template #cell="{ record }">
              <a-space>
                <a-button size="mini" @click="openEdit(record)">编辑</a-button>
                <a-button status="danger" size="mini" @click="remove(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="editorVisible" :title="form.id ? '编辑下载项' : '新增下载项'" width="720px" @before-ok="submitEditor">
      <a-form :model="form" layout="vertical">
        <a-form-item label="标题" required>
          <a-input v-model="form.title" allow-clear />
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-model="form.description" :auto-size="{ minRows: 2 }" />
        </a-form-item>
        <a-form-item label="下载链接" required>
          <a-input v-model="form.download_url" allow-clear />
        </a-form-item>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="版本号">
              <a-input v-model="form.version" allow-clear placeholder="v1.0.0" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="图标 (emoji)">
              <a-input v-model="form.icon" allow-clear :max-length="16" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="按钮文案">
              <a-input v-model="form.button_text" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="平台">
              <a-select v-model="form.platform" allow-clear placeholder="选择平台">
                <a-option value="android">Android</a-option>
                <a-option value="windows">Windows</a-option>
                <a-option value="ios">iOS</a-option>
                <a-option value="mac">macOS</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="提取码">
              <a-input v-model="form.extract_code" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序">
              <a-input-number v-model="form.sort_order" mode="button" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="启用">
          <a-switch v-model="form.is_active" :checked-value="1" :unchecked-value="0" />
        </a-form-item>
        <a-form-item label="更新日志 (HTML)">
          <a-textarea v-model="form.changelog_html" :auto-size="{ minRows: 3 }" placeholder="可选，支持 HTML" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Modal, Notification, Message } from '@arco-design/web-vue'
import { getAdminDownloadList, saveAdminDownload, deleteAdminDownload } from '@/api/download'

const loading = ref(false)
const data = ref([])
const editorVisible = ref(false)
const form = reactive({
  id: null,
  title: '',
  description: '',
  download_url: '',
  version: '',
  icon: '📦',
  button_text: '立即下载',
  button_color: 'primary',
  platform: '',
  extract_code: '',
  changelog_html: '',
  sort_order: 0,
  is_active: 1
})

const getList = async () => {
  loading.value = true
  try {
    const res = await getAdminDownloadList({})
    if (!res || res.code !== 0) {
      Notification.error({ title: '获取列表失败', content: res?.msg ?? '请稍后再试' })
      return
    }
    data.value = res.data || []
  } finally {
    loading.value = false
  }
}

const openCreate = () => {
  form.id = null
  form.title = ''
  form.description = ''
  form.download_url = ''
  form.version = ''
  form.icon = '📦'
  form.button_text = '立即下载'
  form.button_color = 'primary'
  form.platform = ''
  form.extract_code = ''
  form.changelog_html = ''
  form.sort_order = 0
  form.is_active = 1
  editorVisible.value = true
}

const openEdit = (record) => {
  Object.assign(form, {
    id: record.id,
    title: record.title,
    description: record.description || '',
    download_url: record.download_url,
    version: record.version || '',
    icon: record.icon || '📦',
    button_text: record.button_text || '立即下载',
    button_color: record.button_color || 'primary',
    platform: record.platform || '',
    extract_code: record.extract_code || '',
    changelog_html: record.changelog_html || '',
    sort_order: record.sort_order || 0,
    is_active: record.is_active ? 1 : 0
  })
  editorVisible.value = true
}

const submitEditor = async () => {
  if (!form.title || !form.download_url) {
    Message.error('请填写标题和下载链接')
    return false
  }
  const res = await saveAdminDownload({ ...form })
  if (!res || res.code !== 0) {
    Notification.error({ title: '保存失败', content: res?.msg ?? '请稍后再试' })
    return false
  }
  Message.success('保存成功')
  getList()
  return true
}

const remove = (record) => {
  Modal.confirm({
    title: '删除下载项',
    content: `确定删除「${record.title}」吗？`,
    onOk: async () => {
      const res = await deleteAdminDownload({ id: record.id })
      if (!res || res.code !== 0) {
        Notification.error({ title: '删除失败', content: res?.msg ?? '请稍后再试' })
        return
      }
      Message.success('删除成功')
      getList()
    }
  })
}

onMounted(getList)
</script>
