<template>
  <div class="store-page">
    <Breadcrumb />

    <a-card title="座位志愿">
      <div class="buttonGroup">
        <a-button type="primary" @click="$router.push({ name: 'ic.freeSeats' })">
          <template #icon><icon-plus /></template>
          添加志愿
        </a-button>
        <a-button @click="loadList">
          <template #icon><icon-refresh /></template>
          刷新
        </a-button>
      </div>

      <a-table row-key="id" :data="data" :loading="loading" :pagination="false" :scroll="{ x: 700 }">
        <template #columns>
          <a-table-column title="座位名称" data-index="name" :width="200" />
          <a-table-column title="志愿顺序" data-index="index" :width="120" sortable />
          <a-table-column title="创建时间" :width="170">
            <template #cell="{ record }">{{ formatTimestamp(record.create_time) }}</template>
          </a-table-column>
          <a-table-column title="状态" :width="100">
            <template #cell="{ record }">
              <a-switch
                :model-value="record.state === 1"
                :loading="toggleLoading === record.id"
                @change="() => toggleStar(record)"
              />
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="140" fixed="right">
            <template #cell="{ record }">
              <a-space>
                <a-button type="text" size="small" @click="openModal(record)">编辑</a-button>
                <a-popconfirm content="删除后无法恢复，确认删除？" @ok="handleDelete(record)">
                  <a-button type="text" status="danger" size="small">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <a-modal
      v-model:visible="visible"
      title="编辑志愿信息"
      @before-ok="handleSave"
      :ok-loading="saving"
      draggable
      esc-to-close
    >
      <a-form :model="form" layout="vertical">
        <a-form-item label="座位名称" required>
          <a-input v-model="form.name" placeholder="仅供备注使用" />
        </a-form-item>
        <a-form-item label="志愿顺序" required>
          <a-input-number v-model="form.index" placeholder="数字越小优先级越高" :min="0" style="width: 100%" />
        </a-form-item>
        <a-form-item label="状态" required>
          <a-select v-model="form.state" placeholder="请选择启用状态">
            <a-option :value="0">禁用</a-option>
            <a-option :value="1">启用</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { getStar, saveStar, deleteStar } from '@/api/ic'
import { formatTimestamp } from '@/utils/icTime'

const loading = ref(false)
const saving = ref(false)
const visible = ref(false)
const toggleLoading = ref(null)
const data = ref([])

const form = reactive({
  id: undefined,
  devId: undefined,
  name: '',
  index: 0,
  state: 1
})

const loadList = async () => {
  loading.value = true
  try {
    const res = await getStar()
    if (res?.code !== 0) {
      Notification.error({ title: '获取志愿失败', content: res?.msg })
      return
    }
    data.value = res.data || []
  } finally {
    loading.value = false
  }
}

const openModal = (record) => {
  form.id = record.id
  form.devId = record.devId
  form.name = record.name
  form.index = record.index
  form.state = record.state
  visible.value = true
}

const handleSave = async () => {
  if (!form.name?.trim()) {
    Notification.error({ title: '请填写座位名称' })
    return false
  }
  saving.value = true
  try {
    const res = await saveStar({ ...form })
    if (res?.code !== 0) {
      Notification.error({ title: '保存失败', content: res?.msg })
      return false
    }
    Notification.success({ title: '保存成功' })
    await loadList()
    return true
  } finally {
    saving.value = false
  }
}

const toggleStar = async (record) => {
  toggleLoading.value = record.id
  try {
    const payload = { ...record, state: record.state === 0 ? 1 : 0 }
    const res = await saveStar(payload)
    if (res?.code !== 0) {
      Notification.error({ title: '更改失败', content: res?.msg })
      return
    }
    Notification.success({ title: `${payload.state === 1 ? '启用' : '禁用'}成功` })
    loadList()
  } finally {
    toggleLoading.value = null
  }
}

const handleDelete = async (record) => {
  const res = await deleteStar({ id: record.id })
  if (res?.code !== 0) {
    Notification.error({ title: '删除失败', content: res?.msg })
    return
  }
  Notification.success({ title: '删除成功' })
  loadList()
}

onMounted(loadList)
</script>

<style scoped>
.buttonGroup {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
</style>
