<template>
  <div class="position-stat table_form-container">
    <!-- 搜索 -->
    <PositionStatSearch 
      :buttonLoading="loading" :search-form="searchForm" :search-options="searchOptions" @search="handleSearch"
      @reset="handleReset">
      <!--            <template #button="{ form }">-->
      <!--                <el-button type="primary" @click="handleExport()">-->
      <!--                    导出-->
      <!--                </el-button>-->
      <!--            </template>-->
    </PositionStatSearch>
    <!-- 表格 -->
    <PositionStatTable :table-data="orderPositionStore.positionOrderList" :columns="tableColumnsOptions"
      :loading="loading" row-key="id" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Position',
})
// 组件
import PositionStatSearch from '@/components/common/Search.vue'
import PositionStatTable from '@/components/common/Table.vue'
import { checkAccountIdIsSonForUser } from '@/api/modules/user.ts'
// 配置以及表单验证
import { search, tableColumns } from './options'

import { useTransactionStore } from '@/stores/modules/transaction.ts'
import { useOrderPositionStore } from '@/stores/modules/orderPosition.ts'
import { usePageLoading } from '@/composables/useLoading'

// 按钮 loading
const { loading, startLoading, stopLoading } = usePageLoading()

// 导出表格
import { exportToExcel } from '@/utils/exportToExcel'

const transactionStore = useTransactionStore()
const orderPositionStore = useOrderPositionStore()
/**
 * @description: 定义搜索数据
 */
const searchOptions = ref(search)
const searchForm = ref({
  account_id: '',
})
/**
 * @description: 定义表格数据
 */
const tableTree = ref([])
const tableColumnsOptions = ref(tableColumns)
/**
 * @description: 定义搜索方法
 */
const handleSearch = async () => {
  try {
    startLoading()
    const data = await checkAccountIdIsSonForUser({ account_id: searchForm.value.account_id })

    if (!data.flag) {
      return ElMessage.warning('请输入下级ID')
    }
    transactionStore.getPositionList(searchForm.value.account_id)
  } finally { stopLoading() }
}
const handleReset = () => {
  console.log('重置搜索')
}
const handleExport = () => {
  exportToExcel({
    tableData: tableTree.value,
    columns: tableColumnsOptions.value,
    title: '导出资金明细',
    defaultFileNamePrefix: '资金明细',
  })
}
onMounted(() => {
  transactionStore?.disconnect()
  transactionStore.initMarketConditionsMQTT()
})
onUnmounted(()=>{
  transactionStore?.disconnect()
})

</script>
