<template>
  <div class="list-page">
    <div class="page-title">材料管理</div>
    <div class="toolbar">
      <el-input v-model="filters.name" placeholder="材料名称" style="width: 200px" />
      <el-select v-model="filters.status" placeholder="状态" clearable style="width: 140px">
        <el-option v-for="item in statusOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
      </el-select>
      <el-select v-model="filters.material_subcategory" placeholder="材料子类" clearable style="width: 180px">
        <el-option v-for="item in filterSubcategoryOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-select
        v-model="filters.brand"
        placeholder="品牌"
        clearable
        filterable
        remote
        :remote-method="searchBrands"
        :loading="brandSearchLoading"
        style="width: 180px"
      >
        <el-option v-for="item in brandFilterOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button @click="loadMaterials">查询</el-button>
      <el-button v-if="isAdmin" :loading="importing" @click="importDialogVisible = true">
        {{ importing ? '导入中...' : '导入数据' }}
      </el-button>
      <el-button :loading="exporting" @click="handleExportExcel">
        {{ exporting ? '导出中...' : '导出' }}
      </el-button>
      <el-button type="primary" @click="openCreate">新增材料</el-button>
      <div class="toolbar-spacer" />
    </div>

    <div class="table-wrap">
    <el-table v-loading="tableLoading" :data="materials" border height="100%">
      <el-table-column prop="name" label="材料名称" min-width="180" show-overflow-tooltip />
      <el-table-column prop="major_category_display" label="材料大类" width="100" />
      <el-table-column prop="material_category" label="细分种类" min-width="140" show-overflow-tooltip />
      <el-table-column prop="material_subcategory" label="材料子类" min-width="140" show-overflow-tooltip />
      <el-table-column prop="stage_display" label="阶段" width="130" show-overflow-tooltip />
      <el-table-column prop="importance_level_display" label="重要等级" width="110" />
      <el-table-column prop="landing_project" label="落地项目" min-width="140" show-overflow-tooltip />
      <el-table-column prop="contact_person" label="对接人" width="100" show-overflow-tooltip />
      <el-table-column prop="contact_phone" label="对接人联系方式" width="150" show-overflow-tooltip />
      <el-table-column prop="handler" label="经办人" width="100" show-overflow-tooltip />
      <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
      <el-table-column prop="factory_short_name" label="供应商" min-width="140" show-overflow-tooltip />
      <el-table-column prop="brand_name" label="品牌" min-width="140" show-overflow-tooltip />
      <el-table-column prop="status_display" label="状态" width="100" />
      <el-table-column label="操作" width="320" fixed="right">
        <template #default="scope">
          <div class="table-actions">
            <el-button size="small" @click="goDetail(scope.row)">详情</el-button>
            <el-button v-if="canEdit(scope.row)" size="small" @click="openEdit(scope.row)">编辑</el-button>
            <el-button v-if="canSubmit(scope.row)" size="small" type="warning" @click="onSubmitAudit(scope.row)">提交审核</el-button>
            <el-button v-if="canApprove(scope.row)" size="small" type="success" @click="onApprove(scope.row)">审核通过</el-button>
            <el-button v-if="canApprove(scope.row)" size="small" type="danger" @click="onReject(scope.row)">审核拒绝</el-button>
            <el-button v-if="canDelete(scope.row)" size="small" type="danger" @click="onDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        :current-page="pagination.page"
        :page-size="pagination.pageSize"
        :total="pagination.total"
        @current-change="onPageChange"
        @size-change="onPageSizeChange"
      />
    </div>

    <el-drawer
      v-model="dialogVisible"
      :title="dialogTitle"
      size="60%"
      :close-on-click-modal="false"
      :destroy-on-close="false"
      class="material-drawer"
    >
      <el-form :model="form" label-width="110px">
        <el-form-item label="材料名称" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="材料大类" required>
          <el-select v-model="form.major_category">
            <el-option v-for="item in majorOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="细分种类" required>
          <el-select v-model="form.material_category" filterable @change="onCategoryChange">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="材料子类">
          <el-select v-model="form.material_subcategory" filterable clearable>
            <el-option v-for="item in subcategoryOptions" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="阶段">
          <el-select v-model="form.stage" clearable>
            <el-option v-for="item in stageOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="重要等级">
          <el-select v-model="form.importance_level" clearable>
            <el-option v-for="item in importanceLevelOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="落地项目">
          <el-input v-model="form.landing_project" />
        </el-form-item>
        <el-form-item label="对接人">
          <el-input v-model="form.contact_person" />
        </el-form-item>
        <el-form-item label="对接人联系方式">
          <el-input v-model="form.contact_phone" />
        </el-form-item>
        <el-form-item label="经办人">
          <el-input v-model="form.handler" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="form.spec" />
        </el-form-item>
        <el-form-item label="符合标准">
          <el-input v-model="form.standard" />
        </el-form-item>
        <el-form-item label="应用场景">
          <el-select v-model="form.application_scene" multiple>
            <el-option v-for="item in sceneOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="应用说明">
          <el-input v-model="form.application_desc" type="textarea" />
        </el-form-item>
        <el-form-item label="替代材料类型">
          <el-select v-model="form.replace_type" clearable>
            <el-option v-for="item in replaceOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="竞争优势">
          <el-select v-model="form.advantage" multiple>
            <el-option v-for="item in advantageOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="优势说明">
          <el-input v-model="form.advantage_desc" type="textarea" />
        </el-form-item>
        <el-form-item label="成本对比(%)">
          <el-input-number v-model="form.cost_compare" :min="-100" :max="100" />
        </el-form-item>
        <el-form-item label="成本说明">
          <el-input v-model="form.cost_desc" type="textarea" />
        </el-form-item>
        <el-form-item label="案例">
          <el-input v-model="form.cases" type="textarea" />
        </el-form-item>
        <el-form-item label="宣传页">
          <el-upload
            class="upload"
            :auto-upload="true"
            :show-file-list="false"
            :http-request="handleUpload"
            accept="image/*"
          >
            <el-button :loading="uploading">{{ uploading ? '上传中...' : '选择图片' }}</el-button>
          </el-upload>
          <div v-if="form.brochure_url" class="preview">
            <img :src="form.brochure_url" alt="预览" />
          </div>
        </el-form-item>
        <el-form-item label="质量等级">
          <el-select v-model="form.quality_level" clearable>
            <el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="耐久等级">
          <el-select v-model="form.durability_level" clearable>
            <el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="环保等级">
          <el-select v-model="form.eco_level" clearable>
            <el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="低碳等级">
          <el-select v-model="form.carbon_level" clearable>
            <el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="总评分">
          <el-select v-model="form.score_level" clearable>
            <el-option v-for="item in starOptions" :key="item[0]" :label="item[1]" :value="item[0]" />
          </el-select>
        </el-form-item>
        <el-form-item label="连接方式">
          <el-input v-model="form.connection_method" />
        </el-form-item>
        <el-form-item label="施工工艺">
          <el-input v-model="form.construction_method" />
        </el-form-item>
        <el-form-item label="限制条件">
          <el-input v-model="form.limit_condition" type="textarea" />
        </el-form-item>
        <el-form-item label="供应商" v-if="isAdmin">
          <el-select v-model="form.factory">
            <el-option v-for="item in factories" :key="item.id" :label="item.short_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" required>
          <el-select
            v-model="form.brand"
            filterable
            remote
            :remote-method="searchBrandsForForm"
            :loading="brandFormSearchLoading"
            placeholder="请选择品牌"
          >
            <el-option v-for="item in brandFormOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </template>
    </el-drawer>

    <el-drawer
      v-model="detailVisible"
      title="材料详情"
      size="60%"
      class="material-drawer"
    >
      <el-descriptions v-if="detailData" :column="1" border>
        <el-descriptions-item label="材料名称">{{ displayText(detailData.name) }}</el-descriptions-item>
        <el-descriptions-item label="材料大类">{{ displayText(detailData.major_category_display) }}</el-descriptions-item>
        <el-descriptions-item label="细分种类">{{ displayText(detailData.material_category) }}</el-descriptions-item>
        <el-descriptions-item label="材料子类">{{ displayText(detailData.material_subcategory) }}</el-descriptions-item>
        <el-descriptions-item label="阶段">{{ displayText(detailData.stage_display) }}</el-descriptions-item>
        <el-descriptions-item label="重要等级">{{ displayText(detailData.importance_level_display) }}</el-descriptions-item>
        <el-descriptions-item label="落地项目">{{ displayText(detailData.landing_project) }}</el-descriptions-item>
        <el-descriptions-item label="对接人">{{ displayText(detailData.contact_person) }}</el-descriptions-item>
        <el-descriptions-item label="对接人联系方式">{{ displayText(detailData.contact_phone) }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ displayText(detailData.handler) }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ displayText(detailData.remark) }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ displayText(detailData.spec) }}</el-descriptions-item>
        <el-descriptions-item label="符合标准">{{ displayText(detailData.standard) }}</el-descriptions-item>
        <el-descriptions-item label="应用场景">{{ displayList(detailData.application_scene_display) }}</el-descriptions-item>
        <el-descriptions-item label="应用说明">{{ displayText(detailData.application_desc) }}</el-descriptions-item>
        <el-descriptions-item label="替代材料类型">{{ displayText(detailData.replace_type_display) }}</el-descriptions-item>
        <el-descriptions-item label="竞争优势">{{ displayList(detailData.advantage_display) }}</el-descriptions-item>
        <el-descriptions-item label="优势说明">{{ displayText(detailData.advantage_desc) }}</el-descriptions-item>
        <el-descriptions-item label="成本对比">{{ formatPercent(detailData.cost_compare) }}</el-descriptions-item>
        <el-descriptions-item label="成本说明">{{ displayText(detailData.cost_desc) }}</el-descriptions-item>
        <el-descriptions-item label="案例">{{ displayText(detailData.cases) }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ displayText(detailData.factory_name) }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ displayText(detailData.brand_name) }}</el-descriptions-item>
        <el-descriptions-item label="质量等级">{{ formatStarLevel(detailData.quality_level) }}</el-descriptions-item>
        <el-descriptions-item label="耐久等级">{{ formatStarLevel(detailData.durability_level) }}</el-descriptions-item>
        <el-descriptions-item label="环保等级">{{ formatStarLevel(detailData.eco_level) }}</el-descriptions-item>
        <el-descriptions-item label="低碳等级">{{ formatStarLevel(detailData.carbon_level) }}</el-descriptions-item>
        <el-descriptions-item label="总评分">{{ formatStarLevel(detailData.score_level) }}</el-descriptions-item>
        <el-descriptions-item label="连接方式">{{ displayText(detailData.connection_method) }}</el-descriptions-item>
        <el-descriptions-item label="施工工艺">{{ displayText(detailData.construction_method) }}</el-descriptions-item>
        <el-descriptions-item label="限制条件">{{ displayText(detailData.limit_condition) }}</el-descriptions-item>
      </el-descriptions>
      <div v-if="detailData?.brochure_url" class="brochure">
        <div class="brochure-title">宣传页</div>
        <img :src="detailData.brochure_url" alt="宣传页" />
      </div>
    </el-drawer>

    <el-dialog v-model="importDialogVisible" title="导入材料" width="420px">
      <div class="import-dialog">
        <div class="import-dialog__text">请先下载模板，按模板填写后上传 `.xlsx` 文件。</div>
        <div class="import-dialog__actions">
          <a :href="templateDownloadUrl" download="材料导入模板.xlsx">
            <el-button>模板下载</el-button>
          </a>
          <el-upload
            :auto-upload="true"
            :show-file-list="false"
            :http-request="handleImportExcel"
            accept=".xlsx"
          >
            <el-button type="primary" :loading="importing">{{ importing ? '导入中...' : '上传文件' }}</el-button>
          </el-upload>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAuth } from '@/store/auth'
import { fetchMaterials, fetchMaterialDetail, createMaterial, updateMaterial, deleteMaterial, submitMaterial, approveMaterial, rejectMaterial, fetchMaterialChoices, uploadImage, importMaterialsExcel, exportMaterialsExcel } from '@/api/material'
import { fetchCategories, fetchSubcategories } from '@/api/category'
import { fetchFactorySimple } from '@/api/factory'
import { fetchBrands } from '@/api/brand'

const { isAdmin } = useAuth()
const materials = ref([])
const tableLoading = ref(false)
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})
const factories = ref([])
const dialogVisible = ref(false)
const detailVisible = ref(false)
const detailData = ref(null)
const importDialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const currentId = ref(null)
const uploading = ref(false)
const importing = ref(false)
const exporting = ref(false)
// const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL).replace(/\/api$/, "");
// const templateDownloadUrl = `${apiBaseUrl}/media/material_import_template.xlsx`
const templateDownloadUrl = `http://101.42.1.64:2260/media/material_import_template.xlsx`
const filters = reactive({
  name: '',
  status: '',
  material_subcategory: '',
  brand: ''
})

const brandFilterOptions = ref([])
const brandFormOptions = ref([])
const brandSearchLoading = ref(false)
const brandFormSearchLoading = ref(false)

const form = reactive({
  name: '',
  major_category: '',
  material_category: '',
  material_subcategory: '',
  stage: '',
  importance_level: '',
  landing_project: '',
  contact_person: '',
  contact_phone: '',
  handler: '',
  remark: '',
  spec: '',
  standard: '',
  application_scene: [],
  application_desc: '',
  replace_type: '',
  advantage: [],
  advantage_desc: '',
  cost_compare: null,
  cost_desc: '',
  cases: '',
  brochure: null,
  brochure_url: '',
  quality_level: null,
  durability_level: null,
  eco_level: null,
  carbon_level: null,
  score_level: null,
  connection_method: '',
  construction_method: '',
  limit_condition: '',
  factory: null,
  brand: null
})

const majorOptions = ref([])
const stageOptions = ref([])
const importanceLevelOptions = ref([])
const replaceOptions = ref([])
const advantageOptions = ref([])
const sceneOptions = ref([])
const starOptions = ref([])
const statusOptions = ref([])
const categoryOptions = ref([])
const subcategoryOptions = ref([])
const filterSubcategoryOptions = ref([])
const allSubcategories = ref([])

const loadMaterials = async () => {
  tableLoading.value = true
  try {
    const data = await fetchMaterials({
      ...filters,
      page: pagination.page,
      page_size: pagination.pageSize
    })
    materials.value = data.results || data
    pagination.total = data.count || materials.value.length
  } finally {
    tableLoading.value = false
  }
}

const loadChoices = async () => {
  const data = await fetchMaterialChoices()
  majorOptions.value = data.major_category
  stageOptions.value = data.stage
  importanceLevelOptions.value = data.importance_level
  replaceOptions.value = data.replace_type
  advantageOptions.value = data.advantage
  sceneOptions.value = data.application_scene
  starOptions.value = data.star_level
  statusOptions.value = data.status
}

const loadCategories = async () => {
  const data = await fetchCategories()
  categoryOptions.value = (data.results || data).map((item) => ({
    id: item.id,
    name: item.name,
    value: item.value
  }))
}

const loadSubcategories = async (categoryId = '') => {
  const data = await fetchSubcategories(categoryId ? { category_id: categoryId } : {})
  allSubcategories.value = data.results || data
  const mapped = allSubcategories.value.map((item) => ({
    id: item.id,
    name: item.name,
    value: item.value,
    category: item.category
  }))
  filterSubcategoryOptions.value = mapped
  subcategoryOptions.value = mapped
}

const loadFactories = async () => {
  factories.value = await fetchFactorySimple()
}

const resetForm = () => {
  Object.assign(form, {
    name: '',
    major_category: '',
    material_category: '',
    material_subcategory: '',
    stage: '',
    importance_level: '',
    landing_project: '',
    contact_person: '',
    contact_phone: '',
    handler: '',
    remark: '',
    spec: '',
    standard: '',
    application_scene: [],
    application_desc: '',
    replace_type: '',
    advantage: [],
    advantage_desc: '',
    cost_compare: null,
    cost_desc: '',
    cases: '',
    brochure: null,
    brochure_url: '',
    quality_level: null,
    durability_level: null,
    eco_level: null,
    carbon_level: null,
    score_level: null,
    connection_method: '',
    construction_method: '',
    limit_condition: '',
    factory: null,
    brand: null
  })
}

const loadBrandFilterOptions = async () => {
  const data = await fetchBrands({ page_size: 100 })
  brandFilterOptions.value = data.results || data
}

const searchBrands = async (query) => {
  brandSearchLoading.value = true
  try {
    const data = await fetchBrands({ page_size: 50, search: query || '' })
    brandFilterOptions.value = data.results || data
  } finally {
    brandSearchLoading.value = false
  }
}

const searchBrandsForForm = async (query) => {
  brandFormSearchLoading.value = true
  try {
    const data = await fetchBrands({ page_size: 50, search: query || '' })
    brandFormOptions.value = data.results || data
  } finally {
    brandFormSearchLoading.value = false
  }
}

const ensureBrandInFormOptions = (brandId, brandName) => {
  if (!brandId) return
  if (!brandFormOptions.value.some((item) => item.id === brandId)) {
    brandFormOptions.value = [{ id: brandId, name: brandName || '' }, ...brandFormOptions.value]
  }
}

const onCategoryChange = async (val, resetSub = true) => {
  if (!val) {
    await loadSubcategories()
    return
  }
  const category = categoryOptions.value.find((item) => item.value === val)
  if (category) {
    await loadSubcategories(category.id)
  }
  if (resetSub) {
    form.material_subcategory = ''
  }
}

const openCreate = async () => {
  resetForm()
  isEdit.value = false
  dialogTitle.value = '新增材料'
  await searchBrandsForForm('')
  dialogVisible.value = true
}

const openEdit = async (row) => {
  resetForm()
  isEdit.value = true
  currentId.value = row.id
  const item = await fetchMaterialDetail(row.id)
  Object.assign(form, item)
  form.application_scene = item.application_scene || []
  form.advantage = item.advantage || []
  form.brochure_url = item.brochure_url || ''
  form.brand = item.brand || null
  if (form.material_category) {
    await onCategoryChange(form.material_category, false)
  }
  await searchBrandsForForm('')
  ensureBrandInFormOptions(item.brand, item.brand_name)
  dialogTitle.value = '编辑材料'
  dialogVisible.value = true
}

const handleUpload = async (options) => {
  uploading.value = true
  try {
    const result = await uploadImage(options.file)
    form.brochure = result.path
    form.brochure_url = result.url
    ElMessage.success('图片上传成功')
  } catch {
    ElMessage.error('图片上传失败')
  } finally {
    uploading.value = false
  }
}

const onSave = async () => {
  if (!form.brand) {
    ElMessage.warning('请选择品牌')
    return
  }
  try {
    const payload = { ...form }
    delete payload.brochure_url
    delete payload.brand_name
    if (!isAdmin.value) {
      delete payload.factory
    }
    if (isEdit.value) {
      await updateMaterial(currentId.value, payload)
    } else {
      await createMaterial(payload)
      pagination.page = 1
    }
    ElMessage.success('保存成功')
    dialogVisible.value = false
    await loadMaterials()
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || '保存失败')
  }
}

const handleImportExcel = async (options) => {
  importing.value = true
  try {
    const result = await importMaterialsExcel(options.file)
    pagination.page = 1
    await loadMaterials()
    importDialogVisible.value = false
    ElMessage.success(`导入完成：新增 ${result.created} 条，更新 ${result.updated} 条，跳过 ${result.skipped} 条，新建供应商 ${result.created_factory || 0} 条`)
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || '导入失败')
  } finally {
    importing.value = false
  }
}

const getDownloadFilename = (headers, fallback) => {
  const disposition = headers?.['content-disposition'] || ''
  const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i)
  if (utf8Match?.[1]) {
    return decodeURIComponent(utf8Match[1])
  }
  const asciiMatch = disposition.match(/filename="?([^"]+)"?/i)
  if (asciiMatch?.[1]) {
    return asciiMatch[1]
  }
  return fallback
}

const handleExportExcel = async () => {
  exporting.value = true
  try {
    const response = await exportMaterialsExcel({ ...filters })
    const blob = response.data instanceof Blob ? response.data : new Blob([response.data])
    const filename = getDownloadFilename(response.headers, 'materials_export.xlsx')
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = filename
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    ElMessage.success('导出成功')
  } catch (error) {
    let detail = error.response?.data?.detail
    if (error.response?.data instanceof Blob) {
      const text = await error.response.data.text()
      try {
        detail = JSON.parse(text).detail || text
      } catch {
        detail = text
      }
    }
    ElMessage.error(detail || '导出失败')
  } finally {
    exporting.value = false
  }
}

const onDelete = (row) => {
  ElMessageBox.confirm(`确认删除材料 ${row.name} 吗？`, '提示', { type: 'warning' })
    .then(async () => {
      await deleteMaterial(row.id)
      ElMessage.success('删除成功')
      loadMaterials()
    })
    .catch(() => {})
}

const onSubmitAudit = async (row) => {
  await submitMaterial(row.id)
  ElMessage.success('已提交审核')
  loadMaterials()
}

const onApprove = async (row) => {
  await approveMaterial(row.id)
  ElMessage.success('审核通过')
  loadMaterials()
}

const onReject = async (row) => {
  await rejectMaterial(row.id)
  ElMessage.success('审核拒绝')
  loadMaterials()
}

const canEdit = (row) => isAdmin.value || row.status === 'draft'
const canDelete = (row) => isAdmin.value || row.status === 'draft'
const canSubmit = (row) => !isAdmin.value && row.status === 'draft'
const canApprove = (row) => isAdmin.value && row.status === 'pending'

const goDetail = async (row) => {
  try {
    detailData.value = await fetchMaterialDetail(row.id)
    detailVisible.value = true
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || '加载详情失败')
  }
}

const displayText = (value) => value || '-'
const displayList = (value) => (value?.length ? value.join('、') : '-')
const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
const formatStarLevel = (value) => (value ? `${value}星` : '-')

const onPageChange = (page) => {
  pagination.page = page
  loadMaterials()
}

const onPageSizeChange = (size) => {
  pagination.pageSize = size
  pagination.page = 1
  loadMaterials()
}

onMounted(() => {
  loadChoices()
  loadCategories()
  loadSubcategories()
  loadFactories()
  loadBrandFilterOptions()
  loadMaterials()
})
</script>

<style scoped>
.toolbar-spacer {
  flex: 1 1 auto;
}

.import-dialog__text {
  color: #606266;
  line-height: 1.6;
}

.import-dialog__actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.dialog-scroll :deep(.el-dialog__body) {
  max-height: 60vh;
  overflow: auto;
  padding-right: 8px;
}

.material-drawer :deep(.el-drawer__body) {
  padding: 20px 24px;
  overflow-y: auto;
}

.material-drawer :deep(.el-drawer__footer) {
  padding: 12px 24px;
}

.brochure {
  margin-top: 20px;
}

.brochure-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.brochure img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #eee;
}
</style>

<style scoped>
.preview img {
  width: 120px;
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid #eee;
}
</style>
