<template>
    <div>
        <el-form :model="inputQuery" :rules="formRules" ref="dataForm">


            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>委托仓库:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.curInv" placeholder="当前仓库" @change="invChange" clearable>
                            <el-option
                                v-for="item in storageList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>

                        </el-select>

                    </div>
                </el-col>


                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>当前分库:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.invWarehouseCode" placeholder="当前分库"
                                   @change="subInvChange"
                                   clearable>
                            <el-option
                                v-for="item in subInvList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>

                        </el-select>

                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>扫码单据类型:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.action" placeholder="请选择" clearable>
                            <el-option
                                v-for="item in busTypes"
                                :key="item.localAction"
                                :label="item.name"
                                :value="item.localAction">
                                <span style="float: left">{{ item.localName }}</span>
                            </el-option>
                        </el-select>
                    </div>
                </el-col>

                <el-col :span="4" class="el-col">
                    <div class="text item">
                        <el-checkbox v-model="inputQuery.finishRece">是否直接验收完成
                        </el-checkbox>
                    </div>
                </el-col>
            </el-row>

            <el-row :gutter="20" class="el-row" type="flex">
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>接受委托仓库:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.entrustInv" placeholder="接受委托仓库" @change="entrustInvChange"
                                   clearable>
                            <el-option
                                v-for="item in entrustStorageList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>

                        </el-select>

                    </div>
                </el-col>


                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>接受委托分库:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.entrustSubInv" placeholder="接受委托分库"
                                   @change="entrustSubInvChange"
                                   clearable>
                            <el-option
                                v-for="item in entrustSubInvList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>

                        </el-select>

                    </div>
                </el-col>


            </el-row>

            <el-row :gutter="20" class="el-row" type="flex">

                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>生成单据类型:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.entrustAction" placeholder="单据类型" clearable>
                            <el-option
                                v-for="item in entrustBusArray"
                                :key="item.action"
                                :label="item.name"
                                :value="item.action">
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>接受委托人:&nbsp;</span>
                        </div>
                        <el-select v-model="inputQuery.entrustUser" placeholder="接受委托人" clearable>
                            <el-option
                                v-for="item in entrustUserArray"
                                :key="item.userid"
                                :label="item.employeeName"
                                :value="item.userid">
                                <span style="float: left">{{ item.employeeName }}</span>
                            </el-option>

                        </el-select>

                    </div>
                </el-col>


            </el-row>
        </el-form>
    </div>
</template>

<script>

import {
    getBasicThirdSys,
} from "../../api/basic/basicThirdSys";

import {
    getLocalJoinNoUse
} from "../../api/basic/busLocalType";
import {filterAll, filterNext, warehouseBussinessTypeList, warehouseUserList} from "@/api/basic/invWarehouse";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";
import {filterNoUseBusType} from "@/api/basic/EntrustRece";
import {filterSubByInv} from "@/api/basic/invSubWarehouse";


export default {
    name: "inputQuery",
    props: {
        inputQuery: {
            type: Object,
            required: true,
        },
    },

    data() {
        return {
            filterQuery: {
                enabled: true,
                isBuType: true,
                isFilterBind: true,
            },
            storageList: [],
            subInvList: [],
            entrustSubInvList:[],
            entrustStorageList: [],
            orderTypeList: [],
            fromSpecialOptions: [],
            thirdSys: [],
            busTypes: [],
            entrustBusArray: [],
            entrustUserArray: [],
            formRules: {
                action: [
                    {required: true, message: "请输入扫码单据类型", trigger: "blur"}
                ],
                curInv: [
                    {required: true, message: "请输入委托仓库", trigger: "blur"}
                ],
                entrustInv: [
                    {required: true, message: "请输入委托验收人仓库", trigger: "blur"}
                ],
                entrustUser: [
                    {required: true, message: "请输入委托验收人", trigger: "blur"}
                ],
            },
        }
    },
    methods: {
        getList() {
            getBasicThirdSys(this.filterQuery)
                .then((response) => {
                    this.thirdSys = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });
            let query = {
                curAction: this.inputQuery.localAction,
            };
            getLocalJoinNoUse(query)
                .then((response) => {
                    this.localTypes = response.data.list || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.localTypes = [];
                });
        },
        getStorage() {
            this.storageList = [];
            filterAll()
                .then((response) => {
                    this.storageList = response.data || [];
                    this.findSubInvByInv();
                    this.getEntrustStorage();
                })
                .catch(() => {
                });
        },

        findSubInvByInv() {
            this.subInvList = [];
            let query = {
                pcode: this.inputQuery.curInv
            };
            filterSubByInv(query)
                .then((response) => {
                    this.subInvList = response.data || [];
                    this.getOrderType();
                })
                .catch(() => {
                });
        },


        findEntrustSubInvByInv() {
            this.entrustSubInvList = [];
            let query = {
                pcode: this.inputQuery.entrustInv
            };
            filterSubByInv(query)
                .then((response) => {
                    this.entrustSubInvList = response.data || [];
                    this.entrustSubInvChange();
                })
                .catch(() => {
                });
        },


        getEntrustStorage() {
            this.entrustStorageList = [];
            let nextQuery = {pcode: this.inputQuery.curInv};
            filterNext(nextQuery)
                .then((response) => {
                    this.entrustStorageList = response.data || [];
                    this.findEntrustSubInvByInv();
                })
                .catch(() => {
                });
        },
        getOrderType() {
            let query = {
                locSubInvCode: this.inputQuery.invWarehouseCode
            }
            filterNoUseBusType(query).then((response) => {
                this.busTypes = response.data || [];
            }).catch(() => {

            })
        },
        invChange() {

            this.findSubInvByInv();
            this.inputQuery.invWarehouseCode = null;
            this.$set(this.inputQuery, "entrustUser", "");
            this.$set(this.inputQuery, "entrustInv", "");
            this.getEntrustStorage();
        },

        subInvChange(){
            this.getOrderType();
        },

        entrustInvChange() {

            this.findEntrustSubInvByInv();
            this.$forceUpdate();

        },

        entrustSubInvChange(){

            let query = {
                code: this.inputQuery.entrustSubInv,
            }

            //加载用户数据
            warehouseUserList(query).then((res) => {
                this.entrustUserArray = [];
                this.entrustUserArray = res.data;
            }).catch((error) => {
                this.$message.error("用户数据加载失败")
            });

            //加载单据类型数据
            warehouseBussinessTypeList(query).then((res) => {
                this.entrustBusArray = res.data;

            }).catch((error) => {
                this.$message.error("单据类型数据加载失败")
            });
        },

    },
    computed: {
        corpType() {
            return this.inputQuery.corpType;
        }
    },


    created() {

        this.getList();
        this.getStorage();

        if (this.$isNotBlank(this.inputQuery.entrustInv)) {
            this.entrustInvChange(this.inputQuery.entrustInv);
        }

    },
};
</script>

<style scoped>
.itemTag {
    float: left;
    text-align: left;
    margin-top: 10px;
    width: 100px;
}

.text {
    font-size: 13px;
    font-family: "Microsoft YaHei";
}

.el-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
    flex-wrap: wrap;
}
</style>
