<template>
    <q-page style="padding-top: 90px">

        <q-pull-to-refresh @refresh="refresh">

            <!-- 置顶 搜索栏 -->
            <q-page-sticky expand position="top" style="z-index: 999;" class="shadow-5 flex inline shadow-box flex-center">
                <q-toolbar class="bg-white text-white" s>
                    <q-card-section style="width: 100%;padding: 16px 0;">
                        <q-input outlined label="出库单号" v-model="pagination.data.asnCode" class="text-h6" autofocus clearable
                            @input="selectList" @clear="clearFn" ref="inputFoucs">
                            <template v-slot:after>
                                <q-btn glossy push rounded size="lg" color="primary" label="查询" icon="search"
                                    @click="getPage()" />
                            </template>
                        </q-input>
                    </q-card-section>
                </q-toolbar>
            </q-page-sticky>

        </q-pull-to-refresh>

        <!-- 内容 滚动部分 -->
        <q-scroll-area ref="scrollRef" :thumb-style="thumbStyle" :bar-style="barStyle" @scroll="onScroll"
            :style="{ height: Screen.height - 141 + 'px' }">
            <q-list bordered separator>
                <q-slide-item v-for="(item, index) in table_list" :key="index" @click="rowClick(item)">
                    <q-item>
                        <q-item-section>
                            <q-card-section>
                                <div class="absolute-top-right">
                                    <q-badge color="grey-5" rounded floating style="
                                        font-size: 1.2rem;
                                        font-weight: 500;
                                        line-height: 1.2rem;
                                        letter-spacing: 0.0125em;
                                        z-index:99;
                                    ">
                                        {{ index + 1 }}
                                    </q-badge>
                                </div>
                                <div class="row q-col-gutter-sm">
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">订单号：{{ item.asnCode
                                    }}</div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">状态：
                                        <q-badge class="text-h6" :color="Number(item.state) == 3 ? 'primary' : 'orange'">{{
                                            Number(item.state) == 3 ?
                                            '待出库'
                                            : '出库中' }}</q-badge>
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">建单人：{{
                                        item.createName
                                    }}
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 text-h6">建单时间：{{
                                        item.createAt }}
                                    </div>
                                </div>
                            </q-card-section>
                        </q-item-section>
                    </q-item>
                </q-slide-item>
                <div class="row justify-center q-my-md" v-show="loadingFlag">
                    <q-spinner-dots color="primary" size="40px" />
                </div>
            </q-list>
        </q-scroll-area>

        <!-- 回到顶部 -->
        <q-page-scroller position="bottom-right" style="z-index: 98;" :scroll-offset="300" :offset="[18, 18]">
            <q-btn fab push glossy icon="keyboard_arrow_up" color="light-blue-5" />
        </q-page-scroller>
    </q-page>

    <!-- 收货模态窗 -->
    <outWarehouseDialog ref="outWarehouseRef" @refresh="getPage"></outWarehouseDialog>
</template>

<script setup lang="ts">
import outWarehouseDialog from './components/outWarehouseDialog.vue'
import { Notify } from 'quasar';
import { Pagination, convert } from 'src/api/class';
import { DnSearchEntity } from 'src/api/outbound/model/outbound';
import { dnApi } from 'src/api/outbound/dnApi';
import { Screen } from 'quasar'
import { onMounted, ref } from 'vue';

const thumbStyle = {
    right: '4px',
    borderRadius: '5px',
    width: '5px'
}
const barStyle = {
    right: '2px',
    borderRadius: '9px',
    width: '9px'
}
//分页
const pagination = ref(new Pagination(new DnSearchEntity()));
pagination.value.data.state = [3, 4]
pagination.value.rowsPerPage = 10

const outWarehouseRef = ref()
const loadingFlag = ref(false)
const table_list: any = ref([])

const selectList = () => {
    getPage()
}

const clearFn = () => {
    getPage();
}

const inputFoucs = ref()
const scrollRef = ref()
const getPage = (callback?: VoidCallback) => {
    // 滚动栏置顶
    scrollRef.value.setScrollPercentage('vertical', 0, 0);
    pagination.value.page = 1
    dnApi
        .getPage(pagination.value)
        .then((res) => {
            convert(pagination.value, res);
            // inputFoucs.value.blur()
            table_list.value = res.dataList;
            callback ? callback() : ''
        });
}

const rowClick = (row: any) => {
    outWarehouseRef.value.clickForm(row);
}

onMounted(() => {
    getPage()
})

const refresh = (done: any) => {
    getPage(() => {
        done()
        Notify.create({
            message: '刷新成功',
            icon: 'check_circle_outline',
            color: 'positive',
            position: 'top'
        });
    })
}

// 上拉搜索 下一页
const onScroll = ({ verticalPercentage }) => {
    if (verticalPercentage === 1 && pagination.value.rowsNumber > table_list.value.length) {
        loadingFlag.value = true
        pagination.value.page = pagination.value.page + 1
        dnApi
            .getPage(pagination.value)
            .then((res) => {
                loadingFlag.value = false
                convert(pagination.value, res);
                table_list.value = table_list.value.concat(res.dataList);
            });
    }
};
</script>