<template>
    <!--  待上架 -->
    <q-dialog v-model="openDialog" persistent :maximized="true" transition-show="slide-up" transition-hide="slide-down">
        <q-card>
            <q-card-section class="no-padding">
                <q-bar class="bg-primary text-white glossy">
                    <div>出库</div>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="openDialog = false" />
                </q-bar>
                <q-card-section>
                    <div class="row q-col-gutter-md">
                        <div class="col-xl-3 col-lg-3 col-xs-12">
                            <q-input class="text-h6" outlined debounce="500" clearable label="订单号"
                                v-model="pagination.data.orderCode">
                                <template v-slot:after>
                                    <q-btn glossy push rounded size="lg" color="primary" label="查询" icon="search"
                                        @click="getPage()">
                                    </q-btn>
                                </template>
                            </q-input>
                        </div>
                        <!-- <div class="col-xl-3 col-lg-3 col-xs-12">
                            <q-input class="text-h6" outlined square debounce="500" clearable label="项目号"
                                v-model="pagination.data.projectCode" />
                        </div>
                        <div class="col-xl-3 col-lg-3 col-xs-12">
                            <q-input class="text-h6" outlined square debounce="500" clearable label="物料名称"
                                v-model="pagination.data.materialName" />
                        </div>
                        <div class="col-xl-3 col-lg-3 col-xs-12">
                            <q-input class="text-h6" outlined square debounce="500" clearable label="规格型号"
                                v-model="pagination.data.specsName" />
                        </div> -->
                    </div>
                </q-card-section>
            </q-card-section>

            <q-separator />

            <q-card-section :style="{ height: Screen.height - 175 + 'px', padding: '0px' }" class="scroll">
                <!-- <div class="text-subtitle1">
                    TIPS：使用 <kbd>SHIFT</kbd> 或者 <kbd>CTRL</kbd> 连续多选
                </div> -->
                <!-- 内容 滚动部分 -->
                <q-scroll-area ref="scrollRef" :thumb-style="thumbStyle" :bar-style="barStyle" @scroll="onScroll"
                    :style="{ height: Screen.height - 175 + 'px' }">
                    <div v-for="(item, index) in tableData" :key="index" style="padding:16px 16px 0 16px;">
                        <q-item tag="label" v-ripple class="q-mb-md q-pa-md shadow-6 shadow-box">
                            <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>
                            <q-item-section avatar>
                                <q-checkbox v-model="checked" :val="item" color="primary" />
                            </q-item-section>
                            <div class="row q-col-gutter-xs items-center">
                                <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>订单号</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.orderCode }}
                                    </q-item-label>
                                </q-item-actions>
                                <!-- <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>库区</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.areaName == null ? 'N/A' : item.areaName }}
                                    </q-item-label>
                                </q-item-actions> -->
                                <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>项目号</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.projectCode }}
                                    </q-item-label>
                                </q-item-actions>
                                <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>物料名称</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.materialName }}
                                    </q-item-label>
                                </q-item-actions>
                                <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>规格型号</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.specsName }}
                                    </q-item-label>
                                </q-item-actions>
                                <q-item-actions style="border-bottom:1px solid #b4b4b4;"
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>物料编码</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.materialCode }}
                                    </q-item-label>
                                </q-item-actions>
                                <q-item-actions
                                    class="col-xl-6 col-lg-6 col-md-6 col-xs-12 text-h6 text-weight-bold q-pt-sm">
                                    <q-item-label>数量</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.count }} {{ item.unit }}
                                    </q-item-label>
                                </q-item-actions>
                            </div>
                        </q-item>
                    </div>
                    <div class="row justify-center q-my-md" v-show="loadingFlag">
                        <q-spinner-dots color="primary" size="40px" />
                    </div>
                </q-scroll-area>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn glossy push rounded color="white" text-color="black" class="q-mr-xs" @click="openDialog = false">{{
                    $t('cancel')
                }}</q-btn>
                <q-btn glossy push rounded color="primary" @click="submitForm()">出库</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script setup lang="ts">
import { convert, Pagination } from 'src/api/class';
import { DnOutWarehouseEntity } from 'src/api/outbound/model/outbound';
import { ref } from 'vue';
import { Notify, Screen } from 'quasar';
import { dnApi } from 'src/api/outbound/dnApi';

const emit = defineEmits(['refresh']);

const checked = ref([]) // 选中的物料集合 ID
const thumbStyle = {
    right: '4px',
    borderRadius: '5px',
    width: '5px'
}
const barStyle = {
    right: '2px',
    borderRadius: '9px',
    width: '9px'
}

let tableData = ref([{}]);

const currPageInit = ref();
const pagination = ref(new Pagination(new DnOutWarehouseEntity()));
pagination.value.rowsPerPage = 10
const openDialog = ref(false);
const loadingFlag = ref(false)
const fromData = ref({
    dnId: 0,
    stockMaterialList: [] as any,
});

const scrollRef = ref()
const getPage = (callback?: VoidCallback) => {
    // // 滚动栏置顶 防止连续请求接口
    // nextTick(() => {
    //     scrollRef.value.setScrollPercentage('vertical', 0, 0);
    // })
    pagination.value.page = 1
    loadingFlag.value = true;
    pagination.value.data.dnId = currPageInit.value.id;
    pagination.value.data.state = 2;
    dnApi.getPageForDnOutWarehouseForm(pagination.value).then((res: any) => {
        convert(pagination.value, res);
        tableData.value = res.dataList;
        loadingFlag.value = false;
        callback ? callback() : ''
    });
};

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

const clickForm = (e?: any) => {
    checked.value = [];
    fromData.value.dnId = e.id;
    currPageInit.value = e;
    pagination.value.data = new DnOutWarehouseEntity();
    if (e.state !== 3 && e.state !== 4) {
        Notify.create({
            message: '已完成出库',
            icon: 'close',
            color: 'negative',
        });
        return;
    }
    getPage();
    openDialog.value = true;
};

// 出库 提交
const submitForm = () => {
    if (checked.value.length <= 0) {
        Notify.create({
            message: '请至少勾选一条物料进行出库操作！',
            icon: 'close',
            color: 'negative',
        });
        return;
    }
    fromData.value.stockMaterialList = checked.value;
    dnApi.outWarehouse(fromData.value).then(() => {
        openDialog.value = false;
        emit('refresh');
    });
};

defineExpose({
    clickForm,
});
</script>