<template>
    <div>
        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="3">
                <div class="ao-text">
                    <span>原单据类型：</span>
                </div>
            </el-col>

            <el-col :span="7" class="el-col">
                <el-select v-model="inputQuery.originAction" placeholder="请选择" clearable="true" style="width: 80%">
                    <el-option
                        v-for="item in originBusTypes"
                        :key="item.localAction"
                        :label="item.localName"
                        :value="item.localAction">
                        <span style="float: left">{{ item.localName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.localAction }}</span>
                    </el-option>
                </el-select>
            </el-col>


            <el-col :span="3">
                <div class="ao-text">
                    <span>目标单据类型：</span>
                </div>
            </el-col>

            <el-col :span="7" class="el-col">
                <el-select v-model="inputQuery.action" placeholder="请选择" clearable="true" style="width: 80%">
                    <el-option
                        v-for="item in targetBusTypes"
                        :key="item.localAction"
                        :label="item.localName"
                        :value="item.localAction">
                        <span style="float: left">{{ item.localName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.localAction }}</span>
                    </el-option>
                </el-select>
            </el-col>

        </el-row>

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

            <el-col :span="3">
                <div class="ao-text">
                    <span>目标所在仓库：</span>
                </div>
            </el-col>

            <el-col :span="7" class="el-col">
                <el-select v-model="inputQuery.locSubInv" placeholder="目标所在仓库" clearable="true"
                           @change="invChange" style="width: 80%"
                           size="small">
                    <el-option
                        v-for="item in locInvs"
                        :key="item.name"
                        :label="item.name"
                        :value="item.code">
                        <span style="float: left">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-col>


            <el-col :span="3">
                <div class="ao-text">
                    <span>目标往来仓库：</span>
                </div>
            </el-col>

            <el-col :span="7" class="el-col">
                <el-select v-model="inputQuery.defaultSubInv" placeholder="目标往来仓库" clearable="true" style="width: 80%"
                           @change="invChange"
                           size="small">
                    <el-option
                        v-for="item in fromInvs"
                        :key="item.name"
                        :label="item.name"
                        :value="item.code">
                        <span style="float: left">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </el-col>


        </el-row>


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

            <el-col :span="3">
                <div class="ao-text">
                    <span>推移时间(小时)：</span>
                </div>
            </el-col>

            <el-col :span="7" class="el-col">
                <el-input
                    style="width: 80%"
                    size="small"
                    type="number"
                    splaceholder="请输入内容"
                    v-model="inputQuery.beforeTime"
                ></el-input>

            </el-col>
            <el-col :span="3">
                <div class="ao-text">
                    <span>流转方式：</span>
                </div>
            </el-col>
            <el-col :span="7" class="el-col">
                <el-select v-model="inputQuery.supplementAll" placeholder="流转方式" style="width: 80%">
                    <el-option label="全量补单" :value="true"></el-option>
                    <el-option label="自动补单" :value="false"></el-option>
                </el-select>
            </el-col>


        </el-row>


        <el-row :gutter="20" class="el-row" type="flex">
            <el-col :span="3">
                <div class="ao-text">
                    <span>备注：</span>
                </div>
            </el-col>
            <el-col :span="7" class="el-col">
                <el-input
                    style="width: 80%"
                    size="small"
                    splaceholder="请输入内容"
                    v-model="inputQuery.intro"
                ></el-input>
            </el-col>
        </el-row>

        <el-divider></el-divider>
    </div>
</template>

<script>


import {
    getLocalJoinByUser, getLocalJoinBusType,
} from "../../api/basic/busLocalType";
import {filterSubAll, filterSubByInv} from "@/api/basic/invSubWarehouse";

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

    data() {
        return {
            filterQuery: {
                enabled: true,
                isBuType: true,
            },
            originBusTypes: [],
            targetBusTypes: [],

            locInvs: [],
            fromInvs: [],

            isAdd: false,
        }
    },
    methods: {

        getOriginBusType() {
            let query = {
                enabled: true,
            };
            getLocalJoinBusType(query)
                .then((response) => {
                    this.originBusTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },


        getTargetBusType() {
            let query = {
                invWarehouseCode: this.inputQuery.locSubInv,
                enabled: true,
            };
            getLocalJoinByUser(query)
                .then((response) => {
                    this.targetBusTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },

        getLocalInv() {
            let subQuery = {}
            filterSubAll(subQuery).then((res) => {
                if (res.code == 20000) {
                    this.locInvs = res.data;
                }
            }).catch((error) => {
            });
        },

        invChange(){
            this.getTargetBusType();
            this.getFromInv();
        },


        getFromInv() {
            let subQuery = {
                code:this.inputQuery.locSubInv,
                filter:2

            }
            filterSubByInv(subQuery).then((res) => {
                if (res.code == 20000) {
                    this.fromInvs = res.data;
                }
            }).catch((error) => {
            });
        },


    },

    created() {

        if (this.inputQuery.originAction == null) {
            this.isAdd = true;
        }else {
            this.getFromInv();
            this.getTargetBusType();
        }
        this.getOriginBusType();
        this.getLocalInv();


    },
}
;
</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>
