<template>
  <div class='container'>
    <CommonPage :operationBtnList='operationBtnList' :showSearchForm='true' :show-pagination='true' :total='pageTotal'
      :current-page='currentPage' :page-size='pageSize' @size-change='handleSizeChange'
      @current-change='handleCurrentChange'>
      <!-- 搜索区域 -->
      <template #searchForm>
         <SearchForm ref="searchFormRef" v-model="searchFormData" :fields="searchFields" label-position="top"
                    :label-width="null" :inline="false" :gutter="20" class="custom-search-form" />
      </template>
      <!-- 列表区域 -->
      <template #table>
        
      </template>
    </CommonPage>
    <!-- 弹窗-->
    <CommonDialog dialogTitle='弹窗' dialogWidth='80%' :openDialog=dialogFlag :showAction='false' :showClose='true'
      @close='dialogFlag = false'>
      
    </CommonDialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import CommonPage from '@/components/commonPage'
import CommonDialog from '@/components/commonDialog'
import SearchForm from '@/components/searchForm'

// 接口
import { getPolicyCommissionList } from '@/api/financial/commission'

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const loading = ref(false)
// 搜索表单数据 
const searchFormData = reactive({

})
// 弹窗相关
const dialogFlag = ref(false)

// 按钮事件处理
const handleAdd = () => {
  ElMessage.info('点击新增按钮')
}
const handleImport = () => {
  ElMessage.info('点击导入按钮')
}
const handleExport = () => {
  ElMessage.info('点击导出按钮')
}
const handleReset = () => {
  // 重置搜索表单
  Object.keys(searchFormData).forEach(key => {
    if (Array.isArray(searchFormData[key])) {
      searchFormData[key] = []
    } else {
      searchFormData[key] = ''
    }
  })
  ElMessage.success('搜索条件已重置')
  // 重新加载数据
  loadTableData()
}
const handleQuery = async () => {
  loadTableData()
}
// 按钮配置
const operationBtnList = ref([
  {
    key: 'add',
    direction: 'left',
    click: handleAdd
  },
  {
    key: 'import',
    direction: 'left',
    click: handleImport
  },
  {
    key: 'export',
    direction: 'right',
    click: handleExport
  },
  {
    key: 'reset',
    direction: 'right',
    click: handleReset
  },
  {
    key: 'query',
    direction: 'right',
    click: handleQuery
  }
])

// 加载表格数据
const loadTableData = async () => {
  loading.value = true
  try {
    const res = await getPolicyCommissionList({
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      ...searchFormData
    })
    if (res.code === 200) {
      tableData.value = res.data.records || []
      pageTotal.value = res.data.total || 0
    } else {
      ElMessage.error(res.msg || '加载数据失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '加载数据失败')
  } finally {
    loading.value = false
  }
}

// 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  loadTableData()
}
// 表格数据
const tableData = ref([])

// 搜索表单字段
const searchFields = ref([
    {
        type: 'input',
        field: 'policyNo',
        label: '保单号',
        placeholder: '请输入保单号',
        colSpan: 6,
        clearable: true,
        rules: [
            { max: 50, message: '保单号长度不能超过50个字符', trigger: 'blur' }
        ]
    },
    {
        type: 'select',
        field: 'status',
        label: '比对状态',
        placeholder: '请选择比对状态',
        colSpan: 6,
        options: [
            { label: '已比对', value: '1' },
            { label: '部分来佣', value: '0' },
            { label: '部分入账', value: '2' }
        ]
    },
    {
        type: 'select',
        field: 'reconciliationCompany',
        label: '对账公司',
        placeholder: '请输入关键词搜索',
        colSpan: 6,
        remoteConfig: {
            type: 'company',
            defaultOptions: []
        }
    },
    {
        type: 'date',
        field: 'expectedDate',
        label: '预计入账日',
        placeholder: '请选择预计入账日',
        colSpan: 6,
    },
    {
        type: 'input',
        field: 'insurerBizId',
        label: '保险公司',
        placeholder: '请输入关键词搜索保险公司',
        colSpan: 6,
    },
    {
        type: 'date',
        field: 'productLaunchBizId',
        label: '检核年月',
        placeholder: '请选择检核年月',
        colSpan: 6,
    }
])



</script>

<style scoped></style>