<template>
  <div>
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
      <h3 style="margin: 0;">门店管理</h3>
      <el-button type="primary" @click="openDialog()">新增门店</el-button>
    </div>

    <el-table :data="list" v-loading="loading" border stripe>
      <el-table-column label="照片" width="120" align="center">
        <template #default="{ row }">
          <el-image :src="row.photo" style="width: 80px; height: 80px; border-radius: 8px;" fit="cover" :preview-src-list="[row.photo]" preview-teleported />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="门店名称" min-width="120" />
      <el-table-column prop="location" label="位置" min-width="140" show-overflow-tooltip />
      <el-table-column label="打包费" width="140" align="center">
        <template #default="{ row }">
          <span>{{ row.packingFeeType === 'Fixed' ? '总打包费' : '单份' }} ¥{{ row.packingFeeAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="dishCount" label="菜品数" width="80" align="center" />
      <el-table-column label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.isEnabled ? 'success' : 'info'" size="small">{{ row.isEnabled ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right" align="center">
        <template #default="{ row }">
          <div style="display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap;">
            <el-button size="small" @click="openDialog(row)">编辑</el-button>
            <el-button size="small" @click="manageBanners(row)">Banner</el-button>
            <el-button size="small" type="primary" @click="$router.push(`/shops/${row.id}/dishes`)">菜品</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑门店弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑门店' : '新增门店'" width="550px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="门店照片" prop="photo">
          <el-upload action="/api/upload/image" :headers="uploadHeaders" :show-file-list="false"
            :on-success="(res) => form.photo = res.url" accept="image/*">
            <el-image v-if="form.photo" :src="form.photo" style="width: 120px; height: 120px; cursor: pointer; border-radius: 8px;" fit="cover" />
            <el-button v-else size="small">上传照片</el-button>
          </el-upload>
          <el-button v-if="form.photo" size="small" text type="danger" style="margin-top: 4px;" @click="form.photo = ''">移除</el-button>
        </el-form-item>
        <el-form-item label="门店位置" prop="location">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input v-model="form.notice" type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="打包费类型" prop="packingFeeType">
          <el-select v-model="form.packingFeeType" style="width: 100%;">
            <el-option label="总打包费（固定金额）" value="Fixed" />
            <el-option label="单份打包费（按份数）" value="PerItem" />
          </el-select>
        </el-form-item>
        <el-form-item label="打包费金额">
          <el-input-number v-model="form.packingFeeAmount" :min="0" :precision="2" :step="0.5" />
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="form.isEnabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 门店 Banner 管理弹窗 -->
    <el-dialog v-model="bannerDialogVisible" :title="`${bannerShopName} - Banner 管理`" width="600px">
      <el-upload action="/api/upload/image" :headers="uploadHeaders" :show-file-list="false"
        :on-success="handleBannerUpload" accept="image/*" style="margin-bottom: 16px;">
        <el-button type="primary" size="small">添加 Banner</el-button>
      </el-upload>
      <el-table :data="shopBanners" v-loading="bannerLoading" border size="small">
        <el-table-column label="图片" width="160">
          <template #default="{ row }">
            <el-image :src="row.imageUrl" style="width: 120px; height: 60px;" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="80" />
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button size="small" type="danger" @click="deleteBanner(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '../utils/request'

const loading = ref(false)
const submitting = ref(false)
const list = ref([])
const dialogVisible = ref(false)
const isEdit = ref(false)
const editId = ref(null)
const formRef = ref(null)

const uploadHeaders = { Authorization: `Bearer ${localStorage.getItem('admin_token')}` }

const defaultForm = () => ({
  name: '', photo: '', location: '', notice: '',
  packingFeeType: 'Fixed', packingFeeAmount: 0, isEnabled: true
})
const form = reactive(defaultForm())

const rules = {
  name: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
  photo: [{ required: true, message: '门店照片不能为空', trigger: 'blur' }],
  location: [{ required: true, message: '门店位置不能为空', trigger: 'blur' }],
  packingFeeType: [{ required: true, message: '请选择打包费类型', trigger: 'change' }]
}

// 门店 Banner 相关
const bannerDialogVisible = ref(false)
const bannerLoading = ref(false)
const bannerShopId = ref(null)
const bannerShopName = ref('')
const shopBanners = ref([])

async function fetchList() {
  loading.value = true
  try {
    list.value = await request.get('/admin/shops')
  } finally {
    loading.value = false
  }
}

function openDialog(row) {
  isEdit.value = !!row
  editId.value = row?.id || null
  Object.assign(form, row ? {
    name: row.name, photo: row.photo, location: row.location,
    notice: row.notice || '', packingFeeType: row.packingFeeType,
    packingFeeAmount: row.packingFeeAmount, isEnabled: row.isEnabled
  } : defaultForm())
  dialogVisible.value = true
}

async function handleSubmit() {
  const valid = await formRef.value.validate().catch(() => false)
  if (!valid) return
  submitting.value = true
  try {
    if (isEdit.value) {
      await request.put(`/admin/shops/${editId.value}`, form)
      ElMessage.success('更新成功')
    } else {
      await request.post('/admin/shops', form)
      ElMessage.success('创建成功')
    }
    dialogVisible.value = false
    fetchList()
  } finally {
    submitting.value = false
  }
}

async function handleDelete(row) {
  await ElMessageBox.confirm(`确定删除门店「${row.name}」？将同时删除其菜品和 Banner`, '提示', { type: 'warning' })
  await request.delete(`/admin/shops/${row.id}`)
  ElMessage.success('删除成功')
  fetchList()
}

/** 门店 Banner 管理 */
async function manageBanners(row) {
  bannerShopId.value = row.id
  bannerShopName.value = row.name
  bannerDialogVisible.value = true
  await fetchBanners()
}

async function fetchBanners() {
  bannerLoading.value = true
  try {
    shopBanners.value = await request.get(`/admin/shops/${bannerShopId.value}/banners`)
  } finally {
    bannerLoading.value = false
  }
}

async function handleBannerUpload(res) {
  await request.post(`/admin/shops/${bannerShopId.value}/banners`, { imageUrl: res.url, sortOrder: 0 })
  ElMessage.success('添加成功')
  fetchBanners()
}

async function deleteBanner(row) {
  await ElMessageBox.confirm('确定删除该 Banner？', '提示', { type: 'warning' })
  await request.delete(`/admin/shops/${bannerShopId.value}/banners/${row.id}`)
  ElMessage.success('删除成功')
  fetchBanners()
}

onMounted(fetchList)
</script>
