<template>
    <q-page style="padding-top: 90px">
        <!-- 置顶 搜索栏 -->
        <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="id" class="text-h6" autofocus clearable
                        @update:model-value="selectList" @clear="clearFn" @focus="focusFn" ref="inputFoucs">
                        <template v-slot:after>
                            <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-scroll-area ref="scrollRef" :thumb-style="thumbStyle" :bar-style="barStyle"
            :style="{ height: Screen.height - 141 + 'px' }">
            <q-list bordered separator>
                <q-slide-item ref="slideItem" v-for="(item, index) in list" :key="index">
                    <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-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        物料编码：{{ item.materialCode }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        物料名称：{{ item.materialName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        项目号：{{ item.projectCode }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        销售订订单号：{{ item.marketCode }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        状态：<q-badge rounded style="font-size: 20px;height:26px;"
                                            :color="helper.getStockState(item.state).color"
                                            :label="helper.getStockState(item.state).text" />
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">
                                        数量：{{ item.count }}
                                    </div>
                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-h6">
                                        单位：{{ item.unit }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        SAP工厂标识：{{ item.warehouseSapFlag }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        所属工厂：{{ item.warehouseName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        库存地点标识：{{ item.storageSapFlag }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        库存地点：{{ item.storageName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        所属库区：{{ item.areaName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        所属库位：{{ item.binName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        收货人：{{ item.createName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        收货时间：{{ item.createAt }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        最后操作人：{{ item.updateName }}
                                    </div>
                                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-h6">
                                        最后操作时间：{{ item.updateAt }}
                                    </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>
</template>

<script setup lang="ts">
import helper from 'src/Utils/helper';
import { Dialog, Notify, Screen } from 'quasar';
import { pdaApi } from 'src/api/pda/pdaApi';
import { ref } from 'vue';

const thumbStyle = {
    right: '4px',
    borderRadius: '5px',
    width: '5px'
}
const barStyle = {
    right: '2px',
    borderRadius: '9px',
    width: '9px'
}
const slideItem = ref()
//分页
const id = ref();
const loadingFlag = ref(false)
const list: any = ref([])

const selectList = (val: any) => {
    if (val != null)
        getPage()
}

const clearFn = (val: any) => {
    if (id.value != null)
        getPage()
}

const focusFn = () => {
    id.value = ''
}

const inputFoucs = ref()
const scrollRef = ref()
const getPage = (callback?: VoidCallback) => {
    // 滚动栏置顶
    if (id.value != null) {
        list.value = [];
        scrollRef.value.setScrollPercentage('vertical', 0, 0);
        pdaApi.getStock(id.value).then((res) => {
            list.value.push(res);
            callback ? callback() : ''
        });
    }
}

</script>