<script setup lang="ts">
import XCellList from '@af-mobile-client-vue3/components/data/XCellList/index.vue'
import XExpandDetail from '@af-mobile-client-vue3/views/userRecords/operateRecordDetail/index.vue'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
// 简易crud表单测试——变更记录
const configName = 'mobile_operateRecordCRUD'
const serviceName = 'af-revenue'
// 获取默认值
const idKey = ref('info_id')
const userId = computed(() => useRoute().query.userId?.toString() || '')

// 当前展开的行ID
const expandedItemId = ref<string>()

// 处理列表项点击
function handleItemClick(item: any) {
  if (expandedItemId?.value === item[idKey.value]) {
    // 如果点击的是当前展开的项，则收起
    expandedItemId.value = null
  }
  else {
    // 否则展开当前项
    expandedItemId.value = item[idKey.value]
  }
}
// 跳转到表单——以表单组来渲染纯表单
function toDetail(item) {
  handleItemClick(item)
}
</script>

<template>
  <XCellList
    :config-name="configName"
    :service-name="serviceName"
    :fix-query-form="{
      info_f_userinfo_id: userId,
    }"
    @to-detail="toDetail"
  >
    <!-- 添加详情展开插槽 -->
    <template #item-detail="{ item }">
      <XExpandDetail
        :item="item"
        :expanded-id="expandedItemId"
        :id-key="idKey"
      />
    </template>
  </XCellList>
</template>
