<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="closePutawaySelectForm" />
                </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="closePutawaySelectForm()" />
                </q-card-actions> -->
            </q-card-section>
            <q-separator />
            <q-card-section :style="{ height: Screen.height - 88 + 'px' }" class="scroll">
                <q-form ref="myForm">
                    <q-card-section>
                        <div class="row q-col-gutter-sm">
                            <!-- <div class="col-12">
                                <q-input class="text-h6" outlined square debounce="500" label="容器"
                                    v-model="formData.orderCode" :rules="[
                                        (val) => (val !== null && val !== '') || '请输入订单号',
                                    ]" />
                            </div> -->
                            <div class="col-12">
                                <q-select class="text-h6" outlined square use-input clearable v-model="formData.warehouseId"
                                    :options="filterOption['wareHouseList']" @filter="filterFunction['wareHouseList']"
                                    @update:model-value="filterUpdate['areaListJoin']"
                                    :option-label="filterLabel['wareHouseList']"
                                    :option-value="filterValue['wareHouseList']" emit-value map-options :disable="false"
                                    readonly label="所属工厂" :rules="[
                                        (val) => (val && val.length > 0) || '请选择所属工厂',
                                    ]" />
                            </div>
                            <div class="col-12">
                                <q-select class="text-h6" outlined square use-input clearable v-model="formData.areaId"
                                    :options="filterOption['areaList']" @filter="filterFunction['areaList']"
                                    @update:model-value="(value) => { filterUpdate['binListJoin'](value); areaChangeClear(); }"
                                    :option-label="filterLabel['areaList']" :option-value="filterValue['areaList']"
                                    emit-value map-options :disable="false" label="所属库区" :rules="[
                                        (val) => (val && val.length > 0) || '请选择所属库区',
                                    ]" />
                            </div>
                            <div class="col-12">
                                <q-select class="text-h6" outlined square use-input clearable v-model="formData.binId"
                                    :options="filterOption['binList']" @filter="filterFunction['binList']"
                                    :option-label="filterLabel['binList']" :option-value="filterValue['binList']" emit-value
                                    map-options :disable="false" label="所属库位" :rules="[
                                        (val) => (val && val.length > 0) || '请选择所属库位',
                                    ]" />
                            </div>
                        </div>
                    </q-card-section>
                </q-form>
            </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="closePutawaySelectForm()">{{ $t('cancel')
                    }}</q-btn>
                <q-btn glossy push rounded color="primary" @click="submitPutawaySelectForm()">{{ $t('submit') }}</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script setup lang="ts">
import { Screen } from 'quasar'
import { ref, onMounted } from 'vue';
import { asnApi } from 'src/api/inbound/asnApi';
import {
    filterFunction,
    filterOption,
    filterLabel,
    filterValue,
    filterUpdate,
} from 'src/Utils/filterUtils';
import {
    AsnPutawayEntity,
    AsnPutawayStockMaterialListEntity,
} from 'src/api/inbound/model/asn';
import { init } from 'src/Utils/filterUtils';

const emit = defineEmits(['refresh', 'clearChecked'])

const checked = ref([]);
const openDialog = ref(false);
const submitData = ref(new AsnPutawayEntity());
const formData = ref({
    binId: '',
    areaId: '',
    warehouseId: '',
    warehouseName: '',
});
const myForm = ref();


const areaChangeClear = () => {
    formData.value.binId = '';
};

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

// 打开 上架模态窗
const clickForm = (e: any, checkedList: any) => {
    submitData.value.asnId = e.id
    formData.value.warehouseId = e.warehouseId.toString()
    filterUpdate['areaListJoin'](e.warehouseId.toString()); // 手动触发查询库区
    checked.value = checkedList
    openDialog.value = true;
};

const clearFormData = () => {
    formData.value.binId = '';
    formData.value.areaId = '';
    formData.value.warehouseId = '';
    formData.value.warehouseName = '';
    checked.value = [];
};


const submitPutawaySelectForm = () => {
    const list: AsnPutawayStockMaterialListEntity[] = [];
    myForm.value.validate().then((success: any) => {
        if (success) {
            checked.value.forEach((item: any) => {
                list.push({
                    id: item.id, // 主键
                    asnId: item.asnId, // 入库单ID
                    asnRowId: item.asnRowId, // 行ID
                    warehouseId: formData.value.warehouseId, // 工厂ID
                    areaId: formData.value.areaId, // 库区
                    binId: formData.value.binId, // 库位
                    containerId: '', // 容器ID
                    count: item.count,
                });
            });
            submitData.value.stockMaterialList = list;
            asnApi.putaway(submitData.value).then(() => {
                clearFormData(); // 清空选择项
                emit('clearChecked')
                emit('refresh')
                openDialog.value = false;
            });
        } else {
            // 哦，不，用户至少 填写了一个无效值
        }
    });
};

const closePutawaySelectForm = () => {
    clearFormData();
    openDialog.value = false
}

defineExpose({
    clickForm
})

</script>