<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-actions class="bg-light-blue-10 text-white">
                    <q-card-actions>上架</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="openDialog = false" />
                    </q-btn>
                </q-card-actions> -->
                <q-card-section>
                    <div class="row q-col-gutter-md">
                        <!-- <div class="col-xl-6 col-lg-6 col-xs-12">
                            <q-btn-toggle size="16px" v-model="state" @update:model-value="changeState"
                                toggle-color="primary" rounded glossy push color="white" text-color="primary" :options="[
                                    { label: '待上架', value: 0 },
                                    { label: '已上架', value: 1 },
                                ]" />
                        </div> -->
                        <div class="col-xl-6 col-lg-6 col-xs-12">
                            <q-input outlined v-model="paginationPutaway.data.keyword" label="关键字搜索" class="text-h6"
                                clearable>
                                <template v-slot:after>
                                    <q-btn glossy push rounded size="lg" color="primary" icon="search"
                                        @click="putawayGetPage(0)" />
                                </template>
                            </q-input>
                        </div>
                    </div>
                </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-section :style="{ height: Screen.height - 175 + 'px', padding: '0px' }">
                <!-- 内容 滚动部分 -->
                <q-scroll-area ref="putawayScrollRef" :thumb-style="thumbStyle" :bar-style="barStyle"
                    @scroll="onPutawayScroll" :style="{ height: Screen.height - 175 + 'px' }">
                    <div v-for="(item, index) in putawayDate" :key="index" style="padding:16px 16px 0 16px;">
                        <q-item tag="label" v-ripple="item.state === 0" 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 v-show="item.state === 0">
                                <q-checkbox v-model="checked" :val="item" color="primary" :disable="item.state === 1" />
                            </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.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.materialCode }}
                                    </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
                                    class="col-xl-8 col-lg-8 col-md-8 col-xs-8 text-h6 text-weight-bold q-pb-sm q-pt-sm">
                                    <q-item-label>总数量</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.count }}
                                    </q-item-label>
                                </q-item-actions>
                                <q-item-actions
                                    class="col-xl-4 col-lg-4 col-md-4 col-xs-4 text-h6 text-weight-bold q-pt-sm">
                                    <q-item-label>单位</q-item-label>
                                    <q-item-label class="text-h5">
                                        {{ item.unit }}
                                    </q-item-label>
                                </q-item-actions>
                            </div>
                        </q-item>
                    </div>
                    <div class="row justify-center q-my-md" v-show="loadingPutawayFlag">
                        <q-spinner-dots color="primary" size="40px" />
                    </div>
                </q-scroll-area>
            </q-card-section>
            <q-separator />
            <q-card-actions>
                已勾选：{{ checked.length }}
                <q-space />
                <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>

    <!-- 上架位置选择模态窗 -->
    <putawaySelectDialog ref="putawaySelectRef" @refresh="refresh" @clearChecked="clearChecked"></putawaySelectDialog>
</template>
<script setup lang="ts">
import putawaySelectDialog from './putawaySelectDialog.vue';
import { Notify, Screen } from 'quasar'
import { nextTick, onMounted, ref } from 'vue';
import { Pagination, convert } from 'src/api/class';
import { stockDetailApi } from 'src/api/stock/stockApi'
import { StockPutawayEntity } from 'src/api/stock/model/stock';

const emit = defineEmits(['refresh'])

const thumbStyle = {
    right: '4px',
    borderRadius: '5px',
    width: '5px'
}
const barStyle = {
    right: '2px',
    borderRadius: '9px',
    width: '9px'
}

const paginationPutaway = ref(new Pagination(new StockPutawayEntity())); // 查询待上架集合分页条件
paginationPutaway.value.rowsPerPage = 10
const putawayDate: any = ref([]); // 上架查询出的分页集合
const loadingPutawayFlag = ref(false)

const checked = ref([])
const state = ref(0);
const openDialog = ref(false)
const currObj = ref()

const putawayScrollRef = ref()

// 打开 上架模态窗
const clickForm = (e?: any) => {
    state.value = 0
    checked.value = []
    currObj.value = e
    paginationPutaway.value.data.asnId = e.id;
    if (e.state !== 3 && e.state !== 4) {
        Notify.create({
            position: 'top',
            message: '未收货完成，不可执行上架操作',
            icon: 'close',
            color: 'negative'
        });
        return;
    }
    putawayGetPage(0);
    openDialog.value = true;
};

// 获取 上架物料分页显示
const putawayGetPage = (state: number) => {
    paginationPutaway.value.page = 1
    paginationPutaway.value.data.state = [state];
    checked.value = []
    // 滚动栏置顶
    nextTick(() => {
        putawayScrollRef.value.setScrollPercentage('vertical', 0, 0);
    })
    stockDetailApi.getPageByKeyword(paginationPutaway.value).then((res: any) => {
        convert(paginationPutaway.value, res);
        putawayDate.value = res.dataList;
    });
}


// 上拉搜索 下一页
const onPutawayScroll = ({ verticalPercentage }) => {
    if (verticalPercentage === 1 && paginationPutaway.value.rowsNumber > putawayDate.value.length) {
        loadingPutawayFlag.value = true
        paginationPutaway.value.page = paginationPutaway.value.page + 1
        paginationPutaway.value.data.state = [state.value];
        stockDetailApi
            .getPageByKeyword(paginationPutaway.value)
            .then((res) => {
                loadingPutawayFlag.value = false
                convert(paginationPutaway.value, res);
                putawayDate.value = putawayDate.value.concat(res.dataList);
            });
    }
}



// 切换状态时(待上架、已上架),重新调用分页接口
const changeState = (val: any) => {
    checked.value = []
    putawayGetPage(val)
}

// 提交上架
const putawaySelectRef = ref()
const submitForm = () => {
    if (checked.value.length <= 0) {
        Notify.create({
            position: 'top',
            message: '请至少选择一条物料再进行上架操作！',
            icon: 'close',
            color: 'negative',
        });
        return;
    }
    putawaySelectRef.value.clickForm(currObj.value, checked.value)
};

const refresh = () => {
    putawayGetPage(0);
    emit('refresh')
}

const clearChecked = () => {
    checked.value = [];
};

defineExpose({
    clickForm
})
</script>