<template>
    <view class="container">
        <MBCard>
            <uni-forms ref="baseForm" :modelValue="queryParams">
                <uni-forms-item label="货主">
                    <ProductionUnit v-model="queryParams.companyId" @change="handleQuery"/>
                </uni-forms-item>
                <uni-forms-item label="仓库">
                    <WareHouse
                        v-model="queryParams.warehouseid"
                        :companyId="queryParams.companyId"
                        @change="handleQuery"
                    />
                </uni-forms-item>
                <uni-forms-item label="大区">
                    <LargeArea v-model="queryParams.bigAreaId" @change="handleQuery"/>
                </uni-forms-item>
                <uni-forms-item label="状态">
                    <DictSelect
                        v-model="queryParams.state"
                        dict="dazhong_dingdanshenhe_list_state"
                        @change="handleQuery"
                    />
                </uni-forms-item>
            </uni-forms>
        </MBCard>

        <MBLoading v-if="loading"/>
        <view v-else>
            <ListItem :items="tableData"/>
            <MBPagination
                v-if="total > 0"
                v-model:limit="paging.pageSize"
                v-model:page="paging.pageNum"
                :total="total"
                @pagination="handleQuery"
            />
        </view>

    </view>
</template>

<script setup>

import {getCurrentInstance, onMounted, ref} from "vue"
import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import MBCard from "../../../components/MB/MBCard.vue";
import ProductionUnit from "../../../components/ProductionUnit/ProductionUnit.vue";
import DictSelect from "../../../components/DictSelect/DictSelect.vue";
import WareHouse from "../../../components/Warehouse/WareHouse.vue";
import LargeArea from "../../../components/LargeArea/LargeArea.vue";
import MBLoading from "../../../components/MB/MBLoading.vue";
import {getOrderApprovalList} from "../../../api/Salemain";
import ListItem from "./ListItem.vue";
import MBPagination from "../../../components/MB/MBPagination.vue";

const {proxy} = getCurrentInstance()


const queryParams = ref({})

const loading = ref(true)
const total = ref(0)
const paging = ref({
    pageNum: 1,
    // 分页数量
    pageSize: 10,
    isAsc: 'descending',
    orderByColumn: 'adddate'
})
const tableData = ref([])

const handleQuery = async () => {
    loading.value = true
    const data = await getOrderApprovalList(queryParams.value, paging.value)
    total.value = data.total
    tableData.value = data.rows
    loading.value = false
}

onMounted(async () => {
    await handleQuery()
})
</script>