<template>
    <div>
        <el-table :data="pager.lists" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="120" />
            <el-table-column label="门店" prop="system_store" show-overflow-tooltip />
            <el-table-column label="单据编号" prop="order_id" show-overflow-tooltip />
            <!-- <el-table-column label="单据金额" prop="total" show-overflow-tooltip /> -->
            <!-- <el-table-column label="抵扣金额" prop="deduction_price" show-overflow-tooltip /> -->
            <el-table-column label="总金额" prop="total" show-overflow-tooltip />
            <el-table-column label="支付金额" prop="money" show-overflow-tooltip />
            <!-- <el-table-column label="单据时间" prop="create_time" show-overflow-tooltip /> -->
            <el-table-column label="操作" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" link @click="handleDetai(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-4 justify-end">
            <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
        </div>
        <!-- <detail
            ref="detailRef"
            v-if="showDetail"
            :dictData="dictData"
            @close="showDetail = false"
        /> -->
        <details-popup
            v-if="showDetails"
            ref="detailsRef"
            @success="getLists"
            @close="showDetails = false"
            :dictData="dictData"
        />
    </div>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import { apiPurchaseOrderLists } from '@/api/purchase_order'
import { useRoute } from 'vue-router'
import DetailsPopup from './details.vue'

//   import detail from "@/views/retail/cashierclass/detail.vue";
// 是否显示编辑框
const showDetails = ref(false)
const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
const route = useRoute()

const queryParams = reactive({
    o_id: route.query.id,
    is_mer: 1
})
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiPurchaseOrderLists,
    params: queryParams
})

defineExpose({
    getLists
})
const handleDetai = async (data: any) => {
    showDetails.value = true
    await nextTick()
    detailsRef.value?.open()
    detailsRef.value?.getDetail(data)
}
// 获取字典数据
const { dictData } = useDictData('pay_type,auditing_type')

const showDetail = ref(false)
const detailRef = ref(null)
const openDetail = async (row: any) => {
    showDetail.value = true
    await nextTick()
    detailRef.value?.open('edit')
    detailRef.value?.getDetail(row)
}
</script>
