<template>
  <div class="select-table-list-example">
    <h3>SelectTableList 使用示例</h3>
    
    <el-form :model="formData" label-width="120px">
      <!-- 基础用法 -->
      <el-form-item label="基础选择">
        <SelectTableList
          v-model="formData.basicValue"
          v-model:displayValue="formData.basicDisplay"
          :table-config="basicTableConfig"
          placeholder="请选择基础数据"
        />
      </el-form-item>

      <!-- 多选用法 -->
      <el-form-item label="多选选择">
        <SelectTableList
          v-model="formData.multipleValues"
          v-model:displayValue="formData.multipleDisplay"
          :table-config="basicTableConfig"
          :multiple="true"
          placeholder="请选择多个数据"
        />
      </el-form-item>

      <!-- 字段映射用法 -->
      <el-form-item label="工作中心">
        <SelectTableList
          v-model="formData.workCenter"
          v-model:displayValue="formData.workCenterLabel"
          :table-config="workCenterTableConfig"
          :field-mapping="{
            workCenterCode: 'bomNo',
            workCenterName: 'remark'
          }"
          placeholder="请选择工作中心"
          @change="handleWorkCenterChange"
        />
      </el-form-item>

      <!-- 只读状态 -->
      <el-form-item label="只读状态">
        <SelectTableList
          v-model="formData.readonlyValue"
          v-model:displayValue="formData.readonlyDisplay"
          :table-config="basicTableConfig"
          placeholder="只读状态"
          readonly
        />
      </el-form-item>

      <!-- 禁用状态 -->
      <el-form-item label="禁用状态">
        <SelectTableList
          v-model="formData.disabledValue"
          v-model:displayValue="formData.disabledDisplay"
          :table-config="basicTableConfig"
          placeholder="禁用状态"
          disabled
        />
      </el-form-item>
    </el-form>

    <div class="result-section">
      <h4>表单数据：</h4>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import SelectTableList from './index.vue'
import type { SelectionChangeData } from './types'
import { BomHeadApi } from '@/api/ccs/bom'

// 表单数据
const formData = reactive({
  basicValue: '',
  basicDisplay: '',
  multipleValues: [],
  multipleDisplay: '',
  workCenter: '',
  workCenterLabel: '',
  workCenterCode: '',
  workCenterName: '',
  readonlyValue: 'readonly_value',
  readonlyDisplay: '只读显示值',
  disabledValue: 'disabled_value',
  disabledDisplay: '禁用显示值'
})

// 基础表格配置
const basicTableConfig = {
  searchForm: {
    items: [
      {
        field: 'name',
        label: '名称',
        type: 'input',
        placeholder: '请输入名称'
      }
    ]
  },
  actions: [],
  settings: {
    refresh: true,
    download: false,
    print: false,
    size: false,
    columns: false,
    fullscreen: false
  },
  table: {
    loading: false,
    data: [],
    selection: false,
    columns: [
      {
        prop: 'id',
        label: 'ID',
        minWidth: 80,
        align: 'center'
      },
      {
        prop: 'name',
        label: '名称',
        minWidth: 150,
        align: 'left'
      },
      {
        prop: 'code',
        label: '编码',
        minWidth: 120,
        align: 'left'
      }
    ]
  },
  pagination: {
    show: true,
    pageSize: 10
  },
  api: {
    getList: async (params: any) => {
      // 模拟接口数据
      const mockData = Array.from({ length: 50 }, (_, index) => ({
        id: index + 1,
        name: `数据项 ${index + 1}`,
        code: `CODE${String(index + 1).padStart(3, '0')}`
      }))
      
      return {
        total: mockData.length,
        list: mockData.slice(
          (params.pageNo - 1) * params.pageSize,
          params.pageNo * params.pageSize
        )
      }
    }
  },
  queryParams: { pageNo: 1, pageSize: 10 }
}

// 工作中心表格配置
const workCenterTableConfig = {
  searchForm: {
    items: [
      {
        field: 'bomNo',
        label: '单号',
        type: 'input',
        placeholder: '请输入单号'
      },
      {
        field: 'remark',
        label: '备注',
        type: 'input',
        placeholder: '请输入备注'
      }
    ]
  },
  actions: [],
  settings: {
    refresh: true,
    download: false,
    print: false,
    size: false,
    columns: false,
    fullscreen: false
  },
  table: {
    loading: false,
    data: [],
    selection: false,
    columns: [
      {
        prop: 'bomNo',
        label: '单号',
        minWidth: 220,
        align: 'left'
      },
      {
        prop: 'remark',
        label: '备注',
        minWidth: 200,
        align: 'left'
      }
    ]
  },
  pagination: {
    show: true,
    pageSize: 10
  },
  api: {
    getList: async (params: any) => {
      // 使用真实的BOM接口
      return await BomHeadApi.getBomHeadPage(params)
    }
  },
  queryParams: { pageNo: 1, pageSize: 10 }
}

// 工作中心选择变化处理
const handleWorkCenterChange = (data: SelectionChangeData) => {
  console.log('工作中心选择变化:', data)
  
  if (data.mode === 'single' && data.selectedRows.length > 0) {
    const selectedRow = data.selectedRows[0]
    // 字段映射会自动处理，这里可以添加额外的逻辑
    console.log('选中的工作中心:', selectedRow)
  }
}
</script>

<style scoped>
.select-table-list-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.result-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-section h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

pre {
  margin: 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
}
</style>