<template>
  <div class="material-setting-page">
    <!-- 表格组件 -->
    <TableList ref="tableListRef" :config="tableConfig" />
    <!-- 多设置表单弹窗 -->
    <editForm
      v-model:visible="formDialogVisible"
      :mode="formMode"
      :data="formData"
      :customer-group-options="customerGroupOptions"
      @success="handleFormSuccess"
    />
    
    <!-- 修改记录弹窗 -->
    <Dialog
      v-model="updateLogDialogVisible"
      title="修改记录"
      width="80%"
      :close-on-click-modal="false"
    >
      <TableList ref="updateLogTableRef" :config="updateLogTableConfig" />
    </Dialog>
    
    <!-- 修改记录详情弹窗 -->
    <Dialog
      v-model="updateLogDetailDialogVisible"
      title="修改记录详情"
      width="100%"
      height="100%"
      fullscreen
      :default-fullscreen="true" 
      :close-on-click-modal="false"
    >
      <div class="update-log-detail-container">
        <div class="detail-column">
          <h3 class="section-title">修改前</h3>
          <el-form
            :model="{
              ...updateLogDetailData,
              customerGroup: updateLogDetailData.oldCustomerGroup,
              orderType: updateLogDetailData.oldOrderType
            }"
            label-width="100px"
            label-position="top"
            class="customer-form"
            disabled
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户组">
                  <el-input :value="updateLogDetailData.oldCustomerGroup" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单类型">
                  <el-input :value="updateLogDetailData.oldOrderType === '0' ? 'B2B订单' : 'B2C订单'" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            
            <!-- 倍数明细 -->
            <div class="edit-table-header mb-3">
              <h4>倍数明细</h4>
            </div>
            <el-table
              v-if="updateLogDetailData.oldQuantityDetails && updateLogDetailData.oldQuantityDetails.length > 0"
              :data="updateLogDetailData.oldQuantityDetails"
              border
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="80" align="center" />
              <el-table-column prop="minQuantity" label="数量(>)" align="center" />
              <el-table-column prop="maxQuantity" label="数量(<=" align="center" />
              <el-table-column prop="multiplier" label="倍数" align="center" />
            </el-table>
            <div v-else class="empty-table">
              <p>暂无明细数据</p>
            </div>
          </el-form>
        </div>
        <div class="detail-column">
          <h3 class="section-title">修改后</h3>
          <el-form
            :model="{
              ...updateLogDetailData,
              customerGroup: updateLogDetailData.customerGroup,
              orderType: updateLogDetailData.orderType
            }"
            label-width="100px"
            label-position="top"
            class="customer-form"
            disabled
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="客户组">
                  <el-input :value="updateLogDetailData.customerGroup" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="订单类型">
                  <el-input :value="updateLogDetailData.orderType === '0' ? 'B2B订单' : 'B2C订单'" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            
            <!-- 倍数明细 -->
            <div class="edit-table-header mb-3">
              <h4>倍数明细</h4>
            </div>
            <el-table
              v-if="updateLogDetailData.newQuantityDetails && updateLogDetailData.newQuantityDetails.length > 0"
              :data="updateLogDetailData.newQuantityDetails"
              border
              style="width: 100%"
            >
              <el-table-column type="index" label="序号" width="80" align="center" />
              <el-table-column prop="minQuantity" label="数量(>)" align="center" />
              <el-table-column prop="maxQuantity" label="数量(<=)" align="center" />
              <el-table-column prop="multiplier" label="倍数" align="center" />
            </el-table>
            <div v-else class="empty-table">
              <p>暂无明细数据</p>
            </div>
          </el-form>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, h, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import { checkPermi } from '@/utils/permission'
import TableList from '@/components/TableList/index.vue'
import editForm from './form.vue'
import { multipleSettingPage, 
  createMultipleSetting, 
  updateMultipleSetting, 
  deleteMultipleSetting, 
  multipleSettingOperationLogPage, 
  getMultipleSettingDetail,
  getMultipleSettingDetailList } from '@/api/print/multipleSetting'
import { customerGroupPageAll } from '@/api/print/customerGroup'
// 路由
const router = useRouter()
// 表格引用
const tableListRef = ref()

// 模板选择弹窗相关
const templateDialogVisible = ref(false)
const templateDialogRef = ref()

// 设计器弹窗相关
const designDialogVisible = ref(false)

// 客户组表单弹窗相关
const formDialogVisible = ref(false)
const formMode = ref('add')
const formData = ref({})
// 客户组选项
const customerGroupOptions = ref([])

// 修改记录弹窗相关
const updateLogDialogVisible = ref(false)
const updateLogTableRef = ref()

// 修改记录详情弹窗相关
const updateLogDetailDialogVisible = ref(false)
const updateLogDetailData = ref({})

// 修改记录表格配置
const updateLogTableConfig = reactive({
  // 查询参数
  queryParams: {
    customerGroup: '',
    customerSapCode: ''
  },
  
  // 搜索表单配置
  searchForm: {
    maxItemsPerRow: 2,
    items: [
      {
        field: 'customerGroup',
        label: '客户组',
        type: 'select',
        placeholder: '请选择客户组',
        options: [],
        width: '200px'
      },
      {
        field: 'orderType',
        label: '订单类型',
        type: 'select',
        placeholder: '请选择订单类型',
        options: [{
          value: '0',
          label: 'B2B订单'
        },{
          value: '1',
          label: 'B2C订单'
        }],
        width: '200px'
      }
    ]
  },
  
  // 表格配置
  table: {
    selection: false,
    index: true,
    columns: [
      {
        prop: 'customerGroup',
        label: '客户组',
        width: 120,
        showOverflowTooltip: true
      },
      {
        prop: 'orderType',
        label: '订单类型',
        width: 120,
        formatter: (row: any) => {
          const typeMap = {
            '0': 'B2B订单',
            '1': 'B2C订单'
          }
          return typeMap[row.orderType] || row.orderType
        },
        showOverflowTooltip: true
      },
      {
        prop: 'operationName',
        label: '操作类型',
        width: 120,
        showOverflowTooltip: true
      },
      {
        prop: 'content',
        label: '内容',
        minWidth: 120,
        formatter: (row: any) => {
          return h('el-button', {
            type: 'primary',
            link: true,
            style: 'color: #1677ff',
            onClick: () => handleViewUpdateLog(row)
          }, '查看')
        }
      },
      {
        prop: 'creatorName',
        label: '操作人',
        width: 120,
        showOverflowTooltip: true,
      },
      {
        prop: 'createTime',
        label: '操作时间',
        width: 180,
        showOverflowTooltip: true,
        formatter: dateFormatter
      }
    ]
  },
  
  // 分页配置
  pagination: {
    pageSize: 10,
    show: true
  },
  
  // 设置
  settings: {
    refresh: false,
    download: false,
    print: false,
    size: false,
    columns: false,
    fullscreen: false
  },
  
  // API配置
  api: {
    getList: async (params: any) => {
      const response = await multipleSettingOperationLogPage(params)
      return response
    }
  }
})

// 打开新增客户组表单
const handleAddCustomerGroup = () => {
  formMode.value = 'add'
  formData.value = {}
  setTimeout(() => {
    formDialogVisible.value = true
  }, 10)
}

// 表单成功回调
const handleFormSuccess = async (type: string, data: any) => {
  try {
    if (formMode.value === 'add') {
      // 创建多设置
      await createMultipleSetting(data)
    } else if (formMode.value === 'edit') {
      // 更新多设置
      await updateMultipleSetting(data)
    }
    
    formDialogVisible.value = false
    ElMessage.success('保存成功')
    tableListRef.value.getList()
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败')
  }
}

// 打开编辑客户组表单
const handleEdit = async (row: any, type: string) => {
  try {
    // 调用getMultipleSettingDetail获取详细数据
    const detailData = await getMultipleSettingDetail(row.id)
    detailData.orderType = String(detailData.orderType)
    // 调用getMultipleSettingDetailList获取明细数据
    const detailListData = await getMultipleSettingDetailList(row.id)
    // 合并数据
    formData.value = {
      ...detailData,
      quantityDetailss: detailListData
    }
    formMode.value = type
    setTimeout(() => {
      formDialogVisible.value = true
    }, 10)
  } catch (error) {
    console.error('获取多设置详情失败:', error)
    ElMessage.error('获取详情失败，请重试')
  }
}
const handleView = async (row: any, type) => {
  handleEdit(row, 'detail')
}
// 打开修改记录弹窗
const handleShowUpdateLog = () => {
  updateLogDialogVisible.value = true
  // 刷新修改记录表格数据
  if (updateLogTableRef.value) {
    updateLogTableRef.value.getList()
  }
}

// 查看修改记录详情
const handleViewUpdateLog = async (row: any) => {
  try {
    // 解析JSON格式的倍数数据
    const parseQuantityDetails = (data: any) => {
      if (!data) return []
      try {
        return Array.isArray(data) ? data : JSON.parse(data)
      } catch (error) {
        console.error('解析倍数数据失败:', error)
        return []
      }
    }
    
    // 直接使用row中的数据，不需要调用接口
    updateLogDetailData.value = {
      ...row,
      // 确保orderType是字符串类型
      orderType: String(row.orderType),
      oldOrderType: String(row.oldOrderType),
      // 处理倍数数据，确保是数组
      oldQuantityDetails: parseQuantityDetails(row.oldQuantityDetails),
      newQuantityDetails: parseQuantityDetails(row.newQuantityDetails)
    }
    updateLogDetailDialogVisible.value = true
  } catch (error) {
    console.error('获取详情失败:', error)
    ElMessage.error('获取详情失败，请重试')
  }
}

// 获取客户组列表
const getCustomerGroupList = async () => {
  try {
    // 导入客户组API
    const response = await customerGroupPageAll()
    if (response) {
      const options = response.map((item: any) => ({
        value: item.customerGroup,
        label: item.customerGroup
      }))
      
      // 更新搜索表单中的客户组选项
      const customerGroupItem = tableConfig.searchForm.items.find((item: any) => item.field === 'customerGroup')
      if (customerGroupItem) {
        customerGroupItem.options = options
      }
      
      // 更新修改记录表格中的客户组选项
      const updateLogCustomerGroupItem = updateLogTableConfig.searchForm.items.find((item: any) => item.field === 'customerGroup')
      if (updateLogCustomerGroupItem) {
        updateLogCustomerGroupItem.options = options
      }
      
      // 更新客户组选项变量，传递给表单组件
      customerGroupOptions.value = options
    }
  } catch (error) {
    console.error('获取客户组列表失败:', error)
  }
}

// 组件加载时获取客户组列表
getCustomerGroupList()

// 删除客户组
const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定删除数据？此操作不可逆', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })
    
    // 调用删除接口
    await deleteMultipleSetting(row.id)
    
    ElMessage.success('删除成功')
    tableListRef.value.getList()
  } catch (error) {
    // 用户取消操作或删除失败
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 模拟数据
const mockData = [
  {
    id: 1,
    customerGroup: 'A组',
    customerSapCode: 'SAP001',
    customerName: '客户一',
    createUser: '张三',
    createTime: '2024-01-01 10:00:00',
    updateUser: '李四',
    updateTime: '2024-01-02 14:30:00'
  },
  {
    id: 2,
    customerGroup: 'B组',
    customerSapCode: 'SAP002',
    customerName: '客户二',
    createUser: '王五',
    createTime: '2024-01-03 09:00:00',
    updateUser: '赵六',
    updateTime: '2024-01-04 11:00:00'
  },
  {
    id: 3,
    customerGroup: 'C组',
    customerSapCode: 'SAP003',
    customerName: '客户三',
    createUser: '钱七',
    createTime: '2024-01-05 16:00:00',
    updateUser: '孙八',
    updateTime: '2024-01-06 10:30:00'
  }
]
// 同步SAP
const handleSyncSAP = async () => {
  const selectedRows = tableListRef.value.selectedRows
  if (selectedRows.length === 0) {
    ElMessage.warning('请选择要同步的物料')
    return
  }

  // 检查是否有已同步的数据
  const syncedRows = selectedRows.filter((row) => row.sapSyncStatus === 'synced')
  if (syncedRows.length > 0) {
    ElMessage.warning('只能同步未同步的物料，请重新选择')
    return
  }

  try {
    await ElMessageBox.confirm(`确定要同步选中的 ${selectedRows.length} 条物料到SAP吗？`, '提示', {
      type: 'warning'
    })

    // 模拟同步操作
    for (const row of selectedRows) {
      const index = mockData.findIndex((item) => item.id === row.id)
      if (index > -1) {
        mockData[index].sapSyncStatus = 'synced'
        mockData[index].syncTime = new Date().toLocaleString('zh-CN')
      }
    }

    ElMessage.success('同步SAP成功')
    tableListRef.value.getList()
  } catch {
    // 用户取消操作
  }
}

// 获取当前实例
const { proxy } = getCurrentInstance() as any

// 打印
const handlePrint = () => {
  const templateData = {
    panels: [
      {
        index: 0,
        name: 1,
        height: 297,
        width: 210,
        paperHeader: 49.5,
        paperFooter: 780.0000000000001,
        printElements: [
          {
            options: {
              left: 1.5,
              top: 1.5,
              height: 11.34,
              width: 68,
              title: 'COZY EARTH',
              right: 119.25,
              bottom: 11.25,
              vCenter: 59.25,
              hCenter: 6.375,
              field: 'logo',
              testData: 'COZY EARTH',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 11.25,
              qrCodeLevel: 0
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 1.5,
              top: 15,
              height: 14,
              width: 100,
              title: '客户物料',
              field: 'name',
              testData: '客户物料',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 1,
              top: 31,
              height: 14,
              width: 100,
              title: '标签颜色',
              field: 'color',
              testData: '标签颜色',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 2,
              top: 47,
              height: 14,
              width: 100,
              title: '物料编码',
              field: 'code',
              testData: '物料编码',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 1.5,
              top: 63,
              height: 14,
              width: 100,
              title: '标签尺码',
              field: 'size',
              testData: '标签尺码',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0,
              qid: 'code_1',
              right: 112.75,
              bottom: 71.00000429153442,
              vCenter: 62.75,
              hCenter: 64.00000429153442
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 1.5,
              top: 79.5,
              height: 42.52,
              width: 100,
              title: '客户物料编码',
              barcodeType: 'code128',
              testData: 'barcode',
              right: 103,
              bottom: 122.02000429153443,
              vCenter: 53,
              hCenter: 100.76000429153443,
              field: 'code',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true
            },
            printElementType: { title: '条形码', type: 'barcode' }
          },
          {
            options: {
              left: 108,
              top: 1.5,
              height: 11.34,
              width: 68,
              title: 'COZY EARTH',
              right: 182.25000762939453,
              bottom: 8.589996185302734,
              vCenter: 148.25000762939453,
              hCenter: 2.9199961853027343,
              field: 'logo',
              testData: 'COZY EARTH',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 11.25,
              qrCodeLevel: 0,
              qid: 'logo_1'
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 108,
              top: 15,
              height: 14,
              width: 100,
              title: '客户物料',
              field: 'name',
              testData: '客户物料',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0,
              qid: 'name_1',
              right: 209.00000762939453,
              bottom: 27.749996185302734,
              vCenter: 159.00000762939453,
              hCenter: 20.749996185302734
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 108,
              top: 31.5,
              height: 14,
              width: 100,
              title: '标签颜色',
              field: 'color',
              testData: '标签颜色',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0,
              qid: 'color_1',
              right: 207.74999237060547,
              bottom: 42.24999237060547,
              vCenter: 157.74999237060547,
              hCenter: 35.24999237060547
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 108,
              top: 46.5,
              height: 14,
              width: 100,
              title: '物料编码',
              field: 'code',
              testData: '物料编码',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0,
              qid: 'code_2',
              right: 209.5,
              bottom: 54.5,
              vCenter: 159.5,
              hCenter: 47.5
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 108,
              top: 63,
              height: 14,
              width: 100,
              title: '标签尺码',
              field: 'size',
              testData: '标签尺码',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              fontSize: 8.25,
              textContentVerticalAlign: 'middle',
              qrCodeLevel: 0,
              qid: 'size_1',
              right: 207.25,
              bottom: 72.5,
              vCenter: 157.25,
              hCenter: 65.5
            },
            printElementType: { title: '文本', type: 'text' }
          },
          {
            options: {
              left: 108,
              top: 79.5,
              height: 42.52,
              width: 100,
              title: '客户物料编码',
              barcodeType: 'code128',
              testData: 'barcode',
              right: 209.75000762939453,
              bottom: 122.27000762939454,
              vCenter: 159.75000762939453,
              hCenter: 101.01000762939454,
              field: 'code',
              coordinateSync: false,
              widthHeightSync: false,
              hideTitle: true,
              qid: 'code_3'
            },
            printElementType: { title: '条形码', type: 'barcode' }
          }
        ],
        paperNumberLeft: 565.5,
        paperNumberTop: 573,
        paperNumberContinue: true,
        watermarkOptions: {
          content: 'vue-plugin-hiprint',
          rotate: 25,
          timestamp: true,
          format: 'YYYY-MM-DD HH:mm'
        },
        panelLayoutOptions: {}
      }
    ]
  }
  console.log('$hiprint', proxy.$hiprint)
  // 使用Vue 3的方式访问全局插件
  const hiprintTemplate = new proxy.$hiprint.PrintTemplate({
    template: templateData // 模板json [对象]
  })
  console.log('hiprintTemplate', hiprintTemplate)
  hiprintTemplate.print({
    id: '1',
    logo: 'COZY EARTH',
    name: '物料1',
    code: '12345678',
    size: '120',
    color: '红色'
  })
}

// 单行同步SAP
const handleSyncSAPRow = async (row: any) => {
  try {
    await ElMessageBox.confirm(`确定要将物料【${row.materialName}】同步到SAP吗？`, '提示', {
      type: 'warning'
    })

    // 模拟同步操作
    const index = mockData.findIndex((item) => item.id === row.id)
    if (index > -1) {
      mockData[index].sapSyncStatus = 'synced'
      mockData[index].syncTime = new Date().toLocaleString('zh-CN')
    }

    ElMessage.success('同步SAP成功')
    tableListRef.value.getList()
  } catch {
    // 用户取消操作
  }
}

// 单行打印
const handlePrintRow = (row: any) => {
  templateDialogVisible.value = true
  // 设置当前物料到弹窗组件
  if (templateDialogRef.value) {
    templateDialogRef.value.setMaterial(row)
  }
}

// 单行设计
const handleDesignRow = (row: any) => {
  designDialogVisible.value = true
}

// 设计弹窗关闭处理
const handleDesignDialogClose = () => {
  designDialogVisible.value = false
}

// 预览打印处理
const handlePreviewPrint = (material: any, template: any) => {
  console.log('预览打印处理', material, template)
  // 这里可以调用实际的打印预览功能
  templateDialogVisible.value = false
  router.push('/print/print/designer')
}

// 表格配置
const tableConfig: any = reactive({
  // 查询参数
  queryParams: {
    customerGroup: '',
    customerSapCode: ''
  },

  // 搜索表单配置
  searchForm: {
    maxItemsPerRow: 2,
    items: [
      {
        field: 'customerGroup',
        label: '客户组',
        type: 'select',
        placeholder: '请选择客户组',
        options: [],
        width: '200px'
      },
      {
        field: 'orderType',
        label: '订单类型',
        type: 'select',
        placeholder: '请选择订单类型',
        options: [{
          // B2B订单/B2C订单
          value: '0',
          label: 'B2B订单'
        },{
          // B2B订单/B2C订单
          value: '1',
          label: 'B2C订单'
        }],
        width: '200px'
      }
    ]
  },

  // 操作按钮配置
  actions: [
    {
      label: '新增',
      type: 'primary',
      icon: 'ep:plus',
      handler: handleAddCustomerGroup,
      permission: 'print:multiple:add',
    },
    {
      label: '修改记录',
      type: 'default',
      handler: handleShowUpdateLog,
      permission: 'print:multiple:updateLog',
    }
  ],

  // 表格配置
  table: {
    selection: true,
    index: true,
    columns: [
      {
        prop: 'customerGroup',
        label: '客户组',
        minWidth: 120,
        showOverflowTooltip: true
      },
      {
        prop: 'orderType',
        label: '订单类型',
        width: 120,
        formatter: (row: any) => {
          const typeMap = {
            '0': 'B2B订单',
            '1': 'B2C订单'
          }
          return typeMap[row.orderType] || row.orderType
        },
        showOverflowTooltip: true
      },
      {
        prop: 'creatorName',
        label: '创建人',
        width: 100,
        showOverflowTooltip: true
      },
      {
        prop: 'createTime',
        label: '创建时间',
        width: 180,
        showOverflowTooltip: true,
        formatter: (row: any) => dateFormatter(row, {}, row.createTime)
      },
      {
        prop: 'updaterName',
        label: '修改人',
        width: 100,
        showOverflowTooltip: true
      },
      {
        prop: 'updateTime',
        label: '修改时间',
        width: 180,
        showOverflowTooltip: true,
        formatter: (row: any) => dateFormatter(row, {}, row.updateTime)
      }
    ],
    actions: [
      {
        label: '编辑',
        type: 'primary',
        link: true,
        handler: (row: any) => handleEdit(row, 'edit'),
        show: () => checkPermi(['print:multiple:edit'])
      },
      {
        label: '详情',
        type: 'primary',
        link: true,
        handler: (row: any) => handleEdit(row, 'detail'),
        show: () => checkPermi(['print:multiple:detail'])
      },
      {
        label: '删除',
        type: 'danger',
        link: true,
        handler: handleDelete,
        show: () => checkPermi(['print:multiple:delete'])
      }
    ],
    actionsWidth: 150
  },

  // 分页配置
  pagination: {
    pageSize: 10,
    show: true
  },

  // 设置
  settings: {
    refresh: true,
    download: false,
    print: true,
    size: true,
    columns: true,
    fullscreen: true
  },

  // API配置
  api: {
    getList: async (params: any) => {
      // 使用实际的API调用
      const response = await multipleSettingPage(params)
      return response
    }
  }
})
onMounted(() => {
  // 初始化时调用 getList()
  tableListRef.value.getList()
})
</script>

<style scoped>
.page-header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h2 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.page-header p {
  margin: 0;
  font-size: 14px;
  color: #909399;
}
.update-log-detail-container {
  display: flex;
  gap: 20px;
}
.detail-column {
  width: 50%;
}
</style>
