<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">
                    <q-card-section style="width: 100%;padding: 16px 0;">
                        <q-input outlined label="盘点单号" v-model="pagination.data.inventoryCode" class="text-h6" autofocus
                            clearable @input="selectList" @clear="clearFn" ref="inputFoucs">
                            <template v-slot:after>
                                <!-- label="查询"  -->
                                <q-btn glossy push rounded size="lg" color="primary" 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>
                <!-- @right="(details) => { onRight(details, item) }" right-color="positive" -->
                <!-- <template v-slot:right>
                    完成收货 <q-icon color="white" name="done" />
                </template> -->
                <q-slide-item ref="slideItem" v-for="(item, index) in table_list" :key="index" @click="trClick(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.materialName
                                    }}</div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">物料编码：{{
                                        item.materialCode
                                    }}</div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">规格型号：{{
                                        item.specsName
                                    }}</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="getStatusColor(Number(item.status))">{{
                                            getStatus(Number(item.status)) }}</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>

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

<script setup lang="ts">
import inventoryDialog from './components/inventoryDialog.vue';
import { Dialog, Notify, Screen } from 'quasar';
import { Pagination, convert } from 'src/api/class';
import { InventoryDetailMaterialSearchEntity } from 'src/api/inventory/model/inventoryDetailMaterial';
import { inventoryDetailMaterialApi } from 'src/api/inventory/inventoryApi';
import { ref } from 'vue';

const thumbStyle = {
    right: '4px',
    borderRadius: '5px',
    width: '5px'
}
const barStyle = {
    right: '2px',
    borderRadius: '9px',
    width: '9px'
}
const slideItem = ref()
//分页
const pagination = ref(new Pagination(new InventoryDetailMaterialSearchEntity()));
// pagination.value.data.status = [1, 2]
pagination.value.rowsPerPage = 10
pagination.value.data.queryTag = 0
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
    inventoryDetailMaterialApi
        .getPage(pagination.value)
        .then((res) => {
            convert(pagination.value, res);
            // inputFoucs.value.blur()
            table_list.value = res.dataList;
            callback ? callback() : ''
        });
}


const inventoryRef = ref()
// 打开收货模态窗
const trClick = (row: any) => {
    inventoryRef.value.clickForm(row)
}

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
        inventoryDetailMaterialApi
            .getPage(pagination.value)
            .then((res) => {
                loadingFlag.value = false
                convert(pagination.value, res);
                table_list.value = table_list.value.concat(res.dataList);
            });
    }
};

// 修改状态为 完成收货
const onRight = ({ reset }, item: any) => {
    // Dialog.create({
    //     title: '系统提示',
    //     message: '是否将此订单的状态修改为完成收货，状态变更后将不可再修改库存数量?',
    //     class: 'text-h7 text-weight-bold',
    //     cancel: true,
    //     persistent: true
    // }).onOk(() => {
    //     inventoryDetailMaterialApi.overReceiving(item.id).then(() => {
    //         // reset : 调用时，它会将组件重置为其初始非滑动状态
    //         reset();
    //         getPage();
    //     });
    // }).onCancel(() => {
    //     reset();
    // })
}

const getStatus = (val: any) => {
    // 0待盘点，1正常，2盘盈，3盘亏
    let textStatus = ''
    switch (val) {
        case 0:
            textStatus = '待盘点'
            break;
        case 1:
            textStatus = '正常'
            break;
        case 2:
            textStatus = '盘盈'
            break;
        case 3:
            textStatus = '盘亏'
            break;
    }
    return textStatus;
}

const getStatusColor = (val: any) => {
    // 0待盘点，1正常，2盘盈，3盘亏
    let color = ''
    switch (val) {
        case 0:
            color = 'orange'
            break;
        case 1:
            color = 'positive'
            break;
        case 2:
            color = 'secondary'
            break;
        case 3:
            color = 'negative'
            break;
    }
    return color;
}

</script>