<template>
    <Navbar title="领料" :is-go-back="false">
        <a-space>
            <div @click="openStockOutCar()" style="cursor: pointer;">
                <a-badge :count="count" show-zero :number-style="{ backgroundColor: '#52c41a', marginTop: '10px' }">
                    <ShoppingCartOutlined style="font-size: 26px;" />
                </a-badge>
            </div>
        </a-space>
    </Navbar>

    <a-form :colon="false">
        <a-row :gutter="[8, 0]" justify="space-start">

            <a-col>
                <a-form-item label="选择仓库" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
                    <a-select v-model:value="warehouseId" placeholder="选择仓库" class="w-full" allow-clear
                        @change="getDatas">
                        <a-select-option v-for="item in warehouseList" :key="item.id" :value="item.id">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item label="设备名称" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
                    <a-input v-model:value="inventoryName" placeholder="设备名称" class="w-full" @keyup.enter="getDatas" />
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item label="设备编码" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
                    <a-input v-model:value="inventoryNo" placeholder="设备编码" class="w-full" @keyup.enter="getDatas" />
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item label="设备型号" :label-col="{ style: 'width: 80px' }" class="horizontal-form-item">
                    <a-select v-model:value="inventoryType" placeholder="设备型号" class="w-full" allow-clear
                        :options="inventoryTypeList" @change="getDatas">
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item>
                    <a-space>
                        <a-button style="margin-left: 12px;" type="primary" @click="getDatas">查询</a-button>
                        <a-button style="background: #269745;color: #fff;" @click="submitStock">加入领料车</a-button>
                    </a-space>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
    <CommonTable ref="commonTableRef" :extra-height="70" :columns="inventoryList" :data-source="stockRequisitionList"
        :total="pagination.total" :is-select="true" @get-pager="getPageParams" @get-selected="getSelectParams">
    </CommonTable>

    <Loading v-if="loading" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import Common from '../common/Common.js';
import CommonTable from '../common/CommonTable.vue';
import { ShoppingCartOutlined } from '@ant-design/icons-vue';
import { stockRequisitionColumns, typeList } from './columns.js';
import { useRouter } from 'vue-router';

const router = useRouter();
const commonTableRef = ref(null);
const warehouseId = ref(undefined);
const inventoryName = ref('');
const inventoryNo = ref('');
const inventoryType = ref(undefined);
const count = ref(0);
const warehouseList = ref([]);
const stockRequisitionList = ref([]);
const selectedIds = ref([]);
const loading = ref(false);
const inventoryList = ref(stockRequisitionColumns);
const inventoryTypeList = ref(typeList);
const pagination = ref({
    total: 0,
    start: 1,
    lang: 20,
});

// 打开领料车
const openStockOutCar = () => {
    router.push('/wms/stock-picking-car');
}

// 获取分页参数
const getPageParams = (page, pageSize) => {
    pagination.value.start = page;
    pagination.value.lang = pageSize;
    getStockRequisitionList();
}

// 获取选中的物料ID
const getSelectParams = (selected) => {
    selectedIds.value = selected.selectedRowKeys;
    console.log(selected)
}

// 查询物料数据
const getStockRequisitionList = () => {
    loading.value = true;
    const params = {
        inventoryName: inventoryName.value,
        inventoryNo: inventoryNo.value,
        inventoryType: inventoryType.value,
        warehouseId: warehouseId.value,
        range: {
            start: (pagination.value.start - 1) * pagination.value.lang,
            length: pagination.value.lang,
        }
    };
    $.ajax({
        url: Common.getApiURL('InventoryResource/findInventoryByCondition'),
        type: 'post',
        contentType: 'application/json',

        dataType: 'json',
        data: JSON.stringify(params),
        beforeSend: function (request) {
            Common.addTokenToRequest(request);
        },
        success: function (successData) {

            if (successData.errorCode == 0) {
                if (successData.datas && successData.datas.length > 0) {
                    stockRequisitionList.value = successData.datas;
                } else {
                    stockRequisitionList.value = [];
                }
                pagination.value.total = successData.total;
            }
            loading.value = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
            loading.value = false;
        },
    });
}

// 获取仓库列表
const getWarehouseList = () => {
    $.ajax({
        type: 'get',
        dataType: 'json',
        url: Common.getApiURL('WarehouseResource/queryByCondition'),
        contentType: 'application/json',
        beforeSend: function (request) {
            Common.addTokenToRequest(request);
        },
        success: function ({ datas, errorCode, errorMessage }) {
            if (errorCode == 0) {
                if (datas && datas.length > 0) {
                    warehouseList.value = datas;
                } else {
                    warehouseList.value = [];
                }
            } else {
                message.warning(errorMessage);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
    });
}

// 查询
const getDatas = () => {
    console.log('getDatas');
    commonTableRef.value.backFirstPage();
}

// 加入领料车
const submitStock = () => {
    if (selectedIds.value.length == 0) {
        message.warning('请至少选择一个工装设备');
        return;
    }
    loading.value = true;
    const params = {
        inventoryIds: selectedIds.value,
    }
    $.ajax({
        url: Common.getApiURL('PickingCarResource/generateCFPickCar'),
        type: 'post',
        contentType: 'application/json',

        dataType: 'json',
        data: JSON.stringify(params),
        beforeSend: function (request) {
            Common.addTokenToRequest(request);
        },
        success: function (successData) {

            if (successData.errorCode == 0) {
                commonTableRef.value.clear();
                getDatas();
                queryPickingCarCount();
                message.success('添加领料车成功');
            }
            loading.value = false;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
            loading.value = false;
        },
    });
}

    /**
     * 查询领料车中的数量
     */
    const queryPickingCarCount = () => {
      $.ajax({
        type: 'get',
        dataType: 'json',
        url: Common.getApiURL('PickingCarResource/queryPickingCarCount'),
        contentType: 'application/json',
        beforeSend: function (request) {
            Common.addTokenToRequest(request);
        },
        success: function ({ data, errorCode, errorMessage }) {
            if (errorCode == 0) {
                if (data) {
                    count.value = data;
                } else {
                    count.value = 0;
                }
            } else {
                message.warning(errorMessage);
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
    });
    }
onMounted(() => {
    getDatas();
    getWarehouseList();
    queryPickingCarCount();
})
</script>

<style scoped>
.horizontal-form-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.w-full {
    width: 192px;
}

:deep(.ant-form-item) {
    margin-bottom: 10px !important;
}

:deep(.ant-form-item-label > label) {
    font-size: 14px !important;
    font-weight: 600 !important;
}
</style>