<template>
    <!-- 收货模态窗 -->
    <q-dialog v-model="openDialog" persistent :maximized="maximizedToggle" transition-show="slide-up"
        transition-hide="slide-down">
        <q-card>
            <q-bar class="bg-primary text-white glossy">
                <div>下架</div>
                <q-space />
                <q-btn dense flat round icon="close" @click="clickForm(null, 'close')" />
            </q-bar>
            <q-card-section style="padding: 10px;">
                <!-- q-col-gutter-md -->
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-xs-12 text-h6 text-weight-bold">
                        {{ selectLabelByValue('wareHouseList', formData.warehouseId.toString()) }}
                        <!-- <q-select class="text-h7" outlined square use-input clearable v-model="formData.warehouseId"
                            :options="filterOption['wareHouseList']" @filter="filterFunction['wareHouseList']"
                            :option-label="filterLabel['wareHouseList']" :option-value="filterValue['wareHouseList']"
                            :readonly="warehouseDisable" emit-value map-options label="所属工厂">
                        </q-select> -->
                    </div>
                    <!-- <div class="col-xl-7 col-lg-7 col-xs-7">
                            <q-input outlined v-model="asnRowSearch.keyword" label="关键字搜索" class="text-h6" clearable>
                                <template v-slot:after>
                                    <q-btn glossy push rounded size="lg" color="primary" icon="search"
                                        @click="getListByKeyword" />
                                </template>
                            </q-input>
                        </div> -->
                </div>
            </q-card-section>

            <q-separator />

            <q-card-section :style="{ height: Screen.height - 140 + 'px', padding: '0px' }" class="scroll">
                <!-- 内容 滚动部分 -->
                <q-scroll-area ref="putawayScrollRef" :thumb-style="thumbStyle" :bar-style="barStyle"
                    :style="{ height: Screen.height - 140 + 'px' }">
                    <div v-for="(item, index) in addData.dnRowPickVOList" :key="index" style="padding:16px 16px 0 16px;">
                        <q-item tag="label" @click="openStockMaterialDialog(item, index)" v-ripple
                            v-if="!calculate(item.totalCount, item.pickedCount)"
                            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.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.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.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-pt-sm">
                                    <q-item-label>待下架数量</q-item-label>
                                    <q-item-label class="text-h5">
                                        <span
                                            :style="{ color: calculate(item.totalCount, item.pickedCount) ? 'red' : 'green', fontSize: '24px' }">
                                            {{ Number(item.totalCount) - Number(item.pickedCount) }}
                                        </span>
                                        {{ item.unit }}
                                    </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.count === undefined ? '暂无' : item.count }}
                                    </q-item-label>
                                </q-item-actions>
                            </div>
                        </q-item>
                    </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="clickForm(null, 'close')">{{
                        $t('cancel')
                    }}</q-btn>
                <q-btn glossy push rounded color="primary" @click="submitForm()">{{ $t('submit') }}</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>

    <stockMaterialDialog ref="stockMaterialRef" @stockMaterialSelected="stockMaterialSelected" />
</template>

<script setup lang="ts">
import stockMaterialDialog from './stockMaterialDialog.vue';
import { Notify } from 'quasar';
import { Pagination, convert } from 'src/api/class';
import { DnSearchEntity } from 'src/api/outbound/model/outbound';
import { Screen } from 'quasar'
import { computed, onMounted, ref, watch } from 'vue';
import { init } from 'src/Utils/filterUtils';
import {
    filterFunction,
    filterOption,
    filterLabel,
    filterValue,
    selectLabelByValue
} from 'src/Utils/filterUtils';
import { dnApi, dnRowApi } from 'src/api/outbound/dnApi';

const emit = defineEmits(['refresh']);
//分页
const pagination = ref(new Pagination(new DnSearchEntity()));
pagination.value.data.state = [1, 2]
pagination.value.rowsPerPage = 10

const warehouseDisable = ref(false);
const maximizedToggle = ref(true)
const openDialog = ref(false)

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

const formData = ref({
    orderCode: '',
    warehouseId: '',
    projectCode: '',
});

const addData = ref({
    dnId: '', // 工厂id
    dnRowPickVOList: [
        {
            dnRowId: 0,
            totalCount: 0,
            pickedCount: 0,
            stockMaterialList: [
                {
                    id: 0,
                    count: 0,
                },
            ],
        },
    ] as any,
});

const calculate = (totalCount: string, pickedCount: string) => {
    const diff = Number(totalCount) - Number(pickedCount)
    return diff <= 0
}


onMounted(() => {
    init(); // 初始化工厂默认下拉
});

const clearFormData = () => {
    formData.value.orderCode = '';
    formData.value.warehouseId = '';
    formData.value.projectCode = '';
    addData.value.dnRowPickVOList = [];
};

const clickForm = (e?: any, type?: string) => {
    if (e != null) {
        if (e.state !== 1 && e.state !== 2) {
            Notify.create({
                message: '已完成下架',
                icon: 'close',
                color: 'negative',
            });
            return;
        }
        addData.value.dnId = e.id;
        formData.value.warehouseId = e.warehouseId.toString();
        dnRowApi.getListForPickForm(e.id).then((res: any) => {
            addData.value.dnRowPickVOList = res;
        });
    }
    if (type !== '' && type === 'close' && openDialog.value === true) {
        // confirm.value = true; // 显示确认框
        openDialog.value = false;
        return;
    }
    openDialog.value = true;
};

const stockMaterialRef = ref();
// asnRow点击事件打开模态窗组件,触发查询当前物料的库存
const openStockMaterialDialog = (row: any, rowIndex: any) => {
    // 当前行、当前索引
    stockMaterialRef.value.queryMaterial(row, rowIndex);
};

// 库存选择
const stockMaterialSelected = (
    checked: any,
    totalCount: any,
    rowIndex: any,
    stockMaterialLists: any
) => {
    addData.value.dnRowPickVOList[rowIndex].checkedList = checked;
    addData.value.dnRowPickVOList[rowIndex].count = totalCount;
    addData.value.dnRowPickVOList[rowIndex].stockMaterialList = [];
    stockMaterialLists.forEach((item: any) => {
        addData.value.dnRowPickVOList[rowIndex].stockMaterialList.push({
            id: item.id,
            count: item.count
        });
    });
};

// 提交下架
const submitForm = () => {
    const counter = addData.value.dnRowPickVOList.filter((item: any) => { return item.stockMaterialList !== undefined && item.stockMaterialList.length > 0 })
    if (counter.length <= 0) {
        Notify.create({
            position: 'center',
            message: '请至少选择一条物料再操作下架！',
            icon: 'close',
            color: 'negative',
        });
        return;
    }
    dnApi.pick(addData.value).then(() => {
        clearFormData();
        emit('refresh');
        openDialog.value = false;
    });
};

// 监听 出库单集合是否存在数据，如存在数据则不能修改工厂信息
watch(
    () => {
        return addData.value.dnRowPickVOList;
    },
    (value: any) => {
        if (value.length > 0) {
            warehouseDisable.value = true;
        } else {
            warehouseDisable.value = false;
        }
    },
    { deep: true, immediate: true }
);

defineExpose({
    clickForm
});
</script>