<template>
    <div>
        <div class="divborder newSearchDiv">
            <div class="filter">
                <label>仓库名称：</label>
                <Select v-model="name" clearable class="searchSelect">
                    <Option
                        v-for="item in storeList"
                        :value="item.id"
                        :key="item.id"
                        >{{ item.name }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label>单号：</label>
                <Select v-model="orderNum" clearable class="searchSelect">
                    <Option
                        v-for="item in billCodes"
                        :value="item.name"
                        :key="item.id"
                        >{{ item.name }}</Option
                    >
                </Select>
            </div>
            <div class="filter">
                <label>料号：</label>
                <Select
                    v-model="materialCode"
                    clearable
                    class="searchSelect"
                    filterable
                    label-in-value
                    remote
                    :remote-method="getMaterialPn"
                >
                    <Option value style="color: red"
                        >数据过多请继续输入搜索内容</Option
                    >
                    <Option
                        v-for="(item, index) in pnList"
                        :value="item.id"
                        :key="item.id"
                        :label="item.name"
                    >
                        <span>{{ item.name }}</span>
                    </Option>
                </Select>
            </div>
            <div class="filter">
                <label>原始单号：</label>
                <Select v-model="originalOrder" clearable class="searchSelect">
                    <Option
                        v-for="item in originalOrderList"
                        :value="item.origin_order_number"
                        :key="item.id"
                        >{{ item.origin_order_number }}</Option
                    >
                </Select>
            </div>
            <!-- 次级搜索条件--隐藏 -->
            <div v-show="!morecondition">
                <div class="filter">
                    <label>{{ $t("900908") }}：</label>
                    <DatePicker
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm:ss"
                        :clearable="false"
                        v-model="index_time"
                        class="searchInput MaxWidth"
                    ></DatePicker>
                </div>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search(1, 10)"
                    >{{ $t("1001") }}</Button
                >
            </div>
            <!-- 更多条件 按钮组件 -->
            <MoreConbtn
                @getCon="morecondition = !morecondition"
                :morecondition="morecondition"
            ></MoreConbtn>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10, 20, 30, 40, 100]"
                    ></Page>
                </div>
            </div>
        </div>
        <div class="divborder newTableDiv" v-show="show">
            <Table
                class="tableClass"
                highlight-row
                :data="tableData3"
                :columns="tableColumns3"
            ></Table>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total3"
                        :current="page3"
                        @on-change="changePage1"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize1"
                        :page-size-opts="[10, 20, 30, 40, 100]"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal
            class="newModalClass"
            v-model="modal1"
            title="批量出库"
            :styles="{ width: '1000px' }"
        >
            <div class="modal_body" style="margin-right: 40px">
                <div class="filter">
                    <label> 单号： </label>
                    <Input
                        type="text"
                        class="searchInput"
                        disabled
                        v-model="code"
                    />
                </div>
                <div class="filter">
                    <label> 料号： </label>
                    <Input
                        type="text"
                        disabled
                        class="searchInput"
                        v-model="mtcode"
                    />
                </div>

                <div class="newTableDiv">
                    <Table
                        class="tableClass"
                        :data="tableData2"
                        :columns="tableColumns2"
                        ref="table2"
                        highlight-row
                        @on-selection-change="selectChange"
                        @on-current-change="dataChange"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{
                    $t("1033")
                }}</Button>
                <Button type="primary" size="large" @click="warehousingPost(3)"
                    >出库</Button
                >
            </div>
        </Modal>
        <Modal
            class="newModalClass"
            v-model="modal2"
            title="序号出库"
            :styles="{ width: '1000px' }"
        >
            <div class="modal_body" style="margin-right: 40px">
                <div class="filter">
                    <label>单号：</label>
                    <Input
                        type="text"
                        class="searchInput"
                        disabled
                        v-model="code"
                    />
                </div>
                <div class="filter">
                    <label>料号：</label>
                    <Input
                        type="text"
                        disabled
                        class="searchInput"
                        v-model="mtcode"
                    />
                </div>
                <div class="filter">
                    <label style="width: 200px">请刷序号出库</label>
                    <Input type="text" class="searchInput" v-model="order" />
                </div>
                <div class="filter">
                    <Button
                        type="primary"
                        icon="ios-search"
                        @click="warehousingPost(2)"
                        >出库</Button
                    >
                </div>
                <div class="newTableDiv">
                    <Table
                        class="tableClass"
                        :data="tableData3"
                        :columns="tableColumns4"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="modal2 = false">{{
                    $t("1033")
                }}</Button>
                <Button type="primary" size="large" @click="modal2 = false"
                    >确定</Button
                >
            </div>
        </Modal>
        <Modal
            class="newModalClass"
            v-model="modal3"
            title="批次出库"
            :styles="{ width: '1000px' }"
        >
            <div class="modal_body" style="margin-right: 40px">
                <div class="filter">
                    <label>单号：</label>
                    <Input
                        type="text"
                        class="searchInput"
                        disabled
                        v-model="code"
                    />
                </div>
                <div class="filter">
                    <label>料号：</label>
                    <Input
                        type="text"
                        disabled
                        class="searchInput"
                        v-model="mtcode"
                    />
                </div>
                <div class="filter">
                    <label style="width: 200px">请刷系统批次出库</label>
                    <Input
                        type="text"
                        class="searchInput"
                        v-model="order"
                        @on-keyup.enter="getOutgoingData(1)"
                    />
                </div>

                <div class="newTableDiv">
                    <Table
                        class="tableClass"
                        :data="tableData2"
                        :columns="tableColumns2"
                        @on-selection-change="selectChange"
                        @on-current-change="dataChange"
                    ></Table>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="closeadd()">{{
                    $t("1033")
                }}</Button>
                <Button type="primary" size="large" @click="warehousingPost(1)"
                    >出库</Button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
import moment from "moment";

export default {
    data() {
        return {
            morecondition: false, // 条件
            name: "",
            storeList: [],
            orderNum: "",
            billCodes: "",
            materialCode: "",
            codeList: "",
            originalOrder: "",
            originalOrderList: "",
            pnList: [],
            index_time: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            tableColumns1: [
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                },
                {
                    title: "单号",
                    key: "billCode",
                },
                {
                    title: "供应商",
                    key: "businessName",
                },
                {
                    title: "料号",
                    key: "material_pn",
                },
                {
                    title: "管理模式",
                    key: "manage_modeName",
                },
                {
                    title: "名称",
                    key: "material_name",
                },
                {
                    title: "规格",
                    key: "material_spec",
                },
                {
                    title: "总数量",
                    key: "quantity",
                },
                {
                    title: "出库数量",
                    key: "access_quantity",
                },
                {
                    title: "操作",
                    key: "action",
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "p",
                                {
                                    style: {
                                        color: "#2D8CF0",
                                        cursor: "pointer",
                                    },
                                    on: {
                                        click: (row) => {
                                            if (params.row.manage_mode == 1) {
                                                this.modal3 = true;
                                            }
                                            if (params.row.manage_mode == 2) {
                                                this.modal2 = true;
                                                this.tableData3 = [];

                                                this.getDetail(1, 10);
                                            }
                                            if (params.row.manage_mode == 3) {
                                                this.modal1 = true;
                                            }
                                            this.detailobj = params.row;
                                            this.getOutgoingData(
                                                params.row.manage_mode
                                            );

                                            // console.log(params.row.manage_mode);
                                            this.code = params.row.billCode;
                                            this.mtcode =
                                                params.row.material_pn;

                                            this.order = "";
                                            this.selection = [];

                                            // this.getStorageLocation(
                                            //     params.row.storageid
                                            // );
                                        },
                                    },
                                },
                                "出库"
                            ),
                        ]);
                    },
                },
            ],
            detailobj: {},
            modal1: false,
            modal2: false,
            modal3: false,
            code: "",
            mtcode: "",
            storageLocation: "",
            storageList: [],
            useorder: false,
            order: "",
            totalNum: "",
            storedNum: "",
            tableData2: [],
            total1: 0,
            page1: 1,
            pagesize1: 10,
            tableColumns2: [
                {
                    type: "selection",
                    width: 60,
                    align: "center",
                },
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page1 - 1) * this.pagesize1 + 1
                        );
                    },
                    width: 70,
                },
                {
                    title: "批次号",
                    key: "batch_number",
                },
                {
                    title: "储位",
                    key: "storage_location_name",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Tooltip",
                                {
                                    props: {
                                        placement: "top",
                                        transfer: true,
                                    },
                                },
                                [
                                    params.row.storage_location_name,
                                    h(
                                        "span",
                                        {
                                            slot: "content",
                                            style: {
                                                whiteSpace: "normal",
                                            },
                                        },
                                        params.row.location
                                    ),
                                ]
                            ),
                        ]);
                    },
                },
                {
                    title: "供应商",
                    key: "businessName",
                },
                {
                    title: "料号",
                    key: "material_pn",
                },
                {
                    title: "名称",
                    key: "material_name",
                },
                {
                    title: "规格",
                    key: "material_spec",
                },
                {
                    title: "数量",
                    key: "quantity",
                },
                {
                    title: "出库数量",
                    key: "qty",
                    align: "center",
                    render: (h, params) => {
                        return h("InputNumber", {
                            props: {
                                value: params.row.qty,
                                min: 0,
                                max: params.row.quantity,
                            },
                            on: {
                                "on-change": (e) => {
                                    // console.log(e);
                                    this.tableData2[params.index][
                                        params.column.key
                                    ] = e;
                                },
                            },
                        });
                    },
                },
            ],
            selection: [],
            useorder1: false,
            productDate: "",
            number: "",
            show: false,
            total3: 0,
            page3: 1,
            pagesize3: 10,
            tableData3: [],
            tableColumns3: [
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page3 - 1) * this.pagesize3 + 1
                        );
                    },
                    width: 70,
                },
                {
                    title: "单号",
                    key: "billID",
                },
                {
                    title: "供应商",
                    key: "businessName",
                },
                {
                    title: "料号",
                    key: "inventorySN",
                },
                {
                    title: "总数量",
                    key: "allqty",
                },
                {
                    title: "出库数量",
                    key: "qty",
                },
                {
                    title: "批次号",
                    key: "batch",
                },
                {
                    title: "序号",
                    key: "no",
                },
                {
                    title: "出库人",
                    key: "username",
                },
                {
                    title: "出库时间",
                    key: "updatetime",
                },
            ],
            tableData4: [], // 序号出库
            tableColumns4: [
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: 70,
                },
                {
                    title: "单号",
                    key: "billID",
                },
                {
                    title: "料号",
                    key: "inventorySN",
                },
                {
                    title: "名称",
                    key: "inventoryName",
                },
                {
                    title: "规格",
                    key: "inventorySpec",
                },
                {
                    title: "总数量",
                    key: "allqty",
                },
                {
                    title: "出库数量",
                    key: "qty",
                },
                {
                    title: "出库人",
                    key: "username",
                },
                {
                    title: "出库时间",
                    key: "updatetime",
                },
            ],
        };
    },
    created() {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2);
        this.tableColumns3 = this.$time.initTableTitle(this.tableColumns3);
        this.tableColumns4 = this.$time.initTableTitle(this.tableColumns4);
        this.index_time = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                "YYYY-MM-DD "
            ) + "00:00:00",
            moment(new Date().getTime()).format("YYYY-MM-DD ") + "23:59:59",
        ];
        this.search(1, 10);
        this.initData();
    },
    methods: {
        initData() {
            this.getStoreList();
            // this.getType();
            // this.getState();
            this.getOrderList();
            // this.getSupplier();
            this.getMaterialPn();
            this.getBill();
            // this.getStorageLocation();
        },
        // 仓库名称
        getStoreList() {
            this.request("/wms/WaveHouse/GetWaveHouseNameList", "", "get").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.storeList = res.data.data;
                    }
                }
            );
        },
        // 原始单号
        getOrderList() {
            this.request(
                "/wms/WaveHousing/GetOriginOrderNumbers?type=2",
                "",
                "get"
            ).then((res) => {
                // console.log(res.data);
                if (res.data.ret == 1) {
                    this.originalOrderList = res.data.data;
                }
            });
        },
        getBill() {
            var data = {
                type: 2, // 1入库，2出库
                storageid: "",
            };
            this.request("/wms/WaveHousing/GetBillCodes", data, "get").then(
                (res) => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.billCodes = res.data.data;
                    }
                }
            );
        },
        getMaterialPn(query) {
            if (query !== "") {
                setTimeout(() => {
                    let data = {
                        type: 1,
                        billCode: this.orderNum,
                        pn: "",
                        count: 50,
                    };
                    this.request(
                        "/wms/WaveHousing/GetInventoryNameList",
                        data,
                        "get"
                    ).then((res) => {
                        // console.log(res.data.data);
                        if (res.data.ret == 1) {
                            this.pnList = res.data.data;
                        }
                    });
                }, 200);
            } else {
                this.pnList = [];
            }
        },

        search(page, pagesize) {
            let starttime = this.index_time[0];
            let endtime = this.index_time[1];

            var data = {
                type: 2, // 1入库2出库
                dataFilter: 1, // 0获取所有数据，1获取审核数据
                wavehouseid: this.name,
                billCode: this.orderNum,
                inventoryid: this.materialCode,
                originOrderNumber: this.originalOrder,
                start: starttime,
                end: endtime,
                page: page,
                pageSize: pagesize,
            };
            this.request("/wms/Stock/GetBillList", data, "get").then((res) => {
                console.log(res.data.data);
                if (res.data.ret == 1) {
                    // this.typeList = res.data.data;
                    this.total = res.data.total;
                    let arr = res.data.data;
                    let list = [];
                    arr.forEach((item) => {
                        list.push({
                            id: item.id,
                            storageid: item.storageid,
                            billCode: item.billCode,
                            material_id: item.material_id,
                            material_name: item.material_name,
                            material_pn: item.material_pn,
                            material_spec: item.material_spec,
                            businessName: item.businessName,
                            businessid: item.businessid,
                            manage_modeName: item.manage_modeName,
                            manage_mode: item.manage_mode,
                            quantity: item.quantity,
                            access_quantity: item.access_quantity,
                            stateid: item.stateid,
                            auditdesc: item.auditdesc, // 审核备注
                        });
                    });
                    this.tableData1 = list;
                }
            });
        },
        warehousingPost(type) {
            let data = {};
            let arr = [],
                total = 0,
                empty = 0;
            if (this.selection.length < 0) {
                this.$Message.error("请选择出库数据");
                return false;
            }
            // console.log(this.selection)
            this.selection.forEach((ele) => {
                total += ele.qty;
                var item = {};
                item.count = ele.qty;
                item.stockid = ele.id; // 供应商id
                if (item.count == 0 || item.count == undefined) {
                    // console.log(ele.count)
                    empty = 1;
                }
                arr.push(item);
            });
            if (type != 2) {
                if (this.selection.length <= 0) {
                    this.$Message.error("请选择要出库的物料");
                    return false;
                }
                if (empty == 1) {
                    this.$Message.error("请填写要出库的物料数量");
                    return false;
                }
                let totalNum = total + this.detailobj.access_quantity;
                if (totalNum > this.detailobj.quantity) {
                    this.$Message.error("出库总数量不能大于需要出库数量");
                    return false;
                }
            }

            if (type == 1) {
                let code = "";
                if (this.order == "") {
                    code = this.selection[this.selection.length - 1]
                        .batch_number;
                } else {
                    code = this.order;
                }

                data = {
                    id: this.detailobj.id,
                    inventories: arr,
                    type: 1, // 1批次 2序号 3批量
                    code: code,
                };
            }

            if (type == 2) {
                if (this.order == "") {
                    this.$Message.error("请输入序号");
                    return false;
                }

                data = {
                    id: this.detailobj.id,
                    type: 2,
                    inventories: [],
                    code: this.order,
                };
            }

            if (type == 3) {
                data = {
                    id: this.detailobj.id,
                    inventories: arr,
                    type: 3, // 1批次 2序号 3批量
                    code: "",
                };
            }
            console.log(data);

            this.request("/wms/Stock/CheckOut", data, "post").then((res) => {
                // console.log(res.data);
                if (res.data.ret == 1) {
                    this.$Message.success("出库成功");
                    this.modal1 = false;
                    if (type == 2) {
                        // this.modal2 = false;
                        this.getDetail(1, 10);
                    }
                    this.modal3 = false;
                    this.search(this.page, this.pagesize);
                    this.getDetail(1, 10);

                    // 需要打印
                    // 批量不需要打印，批次和序号需要调用打印接口
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        getOutgoingData(type) {
            let data = {
                billCode: this.detailobj.billCode,
                invantorysn: this.detailobj.material_pn,
                businessID: this.detailobj.businessid,
                type: type, // 1批次2序号3批量
                filter: this.order,
                billType: 2,
            };
            this.request("/wms/Stock/GetStockByInvantory", data, "get").then(
                (res) => {
                    console.log(res.data);
                    if (res.data.ret == 1) {
                        let arr = res.data.data;
                        let list = [];
                        arr.forEach((item) => {
                            let location = item.storage_location_name;
                            let a = location.split("->");
                            if (a.length > 1) {
                                location =
                                    a[0] +
                                    "->...->" +
                                    a[a.length - 2] +
                                    "->" +
                                    a[a.length - 1];
                            }
                            list.push({
                                id: item.id,
                                storageid: item.storageid,
                                billCode: item.billCode,
                                material_id: item.material_id,
                                material_name: item.material_name,
                                material_pn: item.material_pn,
                                material_spec: item.material_spec,
                                businessName: item.businessName,
                                businessid: item.businessid,
                                manage_modeName: item.manage_modeName,
                                manage_mode: item.manage_mode,
                                quantity: item.quantity,
                                storage_location_id: item.storage_location_id,
                                storage_location_name: location,
                                location: item.storage_location_name,
                                batch_number: item.batch_number,
                                qty: 0,
                                _checked: false,
                            });
                        });
                        this.tableData2 = list;
                    }
                }
            );
        },
        getDetail(page, pagesize) {
            let data = {
                type: 2, // 入库1 出库2
                billCode: this.detailobj.billCode, // 单号
                inventorySN: this.detailobj.material_pn,
                businessID: this.detailobj.businessid,
                page: page,
                pageSize: pagesize,
            };
            this.request("/wms/Stock/GetBillTrace", data, "get").then((res) => {
                // console.log(res.data.data);
                if (res.data.ret == 1) {
                    this.total3 = res.data.total;
                    let arr = res.data.data;
                    let list = [];
                    arr.forEach((item) => {
                        list.push({
                            id: item.id,
                            locationname: item.locationname,
                            locationid: item.locationid,
                            billID: item.billID,
                            material_id: item.material_id,
                            material_name: item.material_name,
                            inventoryName: item.inventoryName,
                            inventorySN: item.inventorySN,
                            inventorySpec: item.inventorySpec,
                            businessName: item.businessName,
                            businessid: item.businessid,
                            manage_modeName: item.manage_modeName,
                            username: item.username,
                            allqty: item.allqty,
                            qty: item.qty,
                            batch: item.batch,
                            no: item.no,
                            updatetime: item.updatetime, // 审核备注
                        });
                    });
                    this.tableData3 = list;
                }
            });
        },
        closeadd() {
            this.modal1 = false;
            this.modal2 = false;
            this.modal3 = false;
        },
        selectChange(data) {
            this.selection = [];

            this.tableData2.forEach((ele) => {
                ele._checked = false;
                data.forEach((item) => {
                    if (ele.id == item.id) {
                        ele._checked = true;
                        this.selection.push(ele);
                    }
                });
            });
            // console.log(this.selection);
        },
        dataChange(currentRow, oldCurrentRow) {
            let selected = currentRow;
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.getDetail(1, 10);
            this.show = true;
        },
        handlePageSize(value) {
            this.pagesize = value;
            this.show = false;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage(value) {
            this.page = value;
            this.show = false;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        handlePageSize1(value) {
            this.pagesize3 = value;
            this.tableData3 = this.getDetail(this.page, this.pagesize);
        },
        changePage1(value) {
            this.page3 = value;
            this.tableData3 = this.getDetail(this.page, this.pagesize);
        },
        request(url, data, type) {
            if (type == "get") {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
    },
};
</script>

<style scoped>
.row {
    display: flex;
    flex-wrap: wrap;
}
.inblock {
    margin: 0 10px;
    height: 40px;
    line-height: 40px;
    /* display: inline-block; */
}
</style>
