<template>
    <div>
        <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-input
                        style="width: 200px"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.name"
                    ></el-input>
                </div>
            </el-col>
            <el-col :span="10" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>业务类型代码:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 200px"
                        size="small"
                        splaceholder="请输入内容"
                        disabled
                        v-model="inputQuery.action"
                    ></el-input>
                </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.originAction"
                        filterable
                        remote
                        clearable="true"
                        reserve-keyword
                        placeholder="请选择第三方系统单据类型"
                        :loading="loading"
                    >
                        <el-option
                            v-for="item in originTypes"
                            :key="item.name"
                            :label="item.name"
                            :value="item.action">
                            <span style="float: left;font-size: 13px">{{ item.name }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px;margin-left: 10px">{{
                                    item.action
                                }}</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-input
                        style="width: 200px"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.prefix"
                    ></el-input>
                </div>
            </el-col>

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

            <el-col :span="20" class="el-col">
                <div class="text item">
                    <div class="itemTag">
                        <span>备注:&nbsp;</span>
                    </div>
                    <el-input
                        style="width: 80%"
                        size="small"
                        splaceholder="请输入内容"
                        v-model="inputQuery.remark"
                    ></el-input>
                </div>
            </el-col>

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


            <el-col :span="4" class="el-col">
                <div class="text item">
                    <el-checkbox v-model="inputQuery.spUse">允许供应商使用</el-checkbox>
                </div>
            </el-col>
            <el-col :span="4" class="el-col">
                <div class="text item">
                    <el-checkbox v-model="inputQuery.advanceType"
                                 @change="advanceChange"
                                 :disabled="inputQuery.preIn"
                    >寄售类型单据
                    </el-checkbox>
                </div>
            </el-col>
            <el-col :span="4" class="el-col">
                <div class="text item">
                    <el-checkbox v-model="inputQuery.preIn" @change="preInChange"
                                 :disabled="inputQuery.mainAction=='WareHouseOut' || inputQuery.mainAction==null || inputQuery.advanceType">
                        预验收
                    </el-checkbox>
                </div>
            </el-col>
<!--            <el-col :span="4" class="el-col">-->
<!--                <div class="text item">-->
<!--                    <el-checkbox v-model="inputQuery.changeEnable" @change="isChangeOrder"-->
<!--                                 :disabled="!changeEnable || inputQuery.mainAction=='WareHouseIn'-->
<!--                                    || inputQuery.id == null  || inputQuery.mainAction==null ||inputQuery.preIn ">-->
<!--                        自动补单-->
<!--                    </el-checkbox>-->
<!--                </div>-->
<!--            </el-col>-->
<!--            <el-col :span="4" class="el-col">-->
<!--                <div class="text item">-->
<!--                    <el-checkbox v-model="inputQuery.supplementAll"-->
<!--                                 @change="supplementChange"-->
<!--                                 :disabled="!inputQuery.changeEnable ">全量补单-->
<!--                    </el-checkbox>-->
<!--                </div>-->
<!--            </el-col>-->

        </el-row>

        <div v-if="visibleChange">

            <el-table border style="margin-bottom: 20px;margin-top: 10px" :data="changeList">
                <el-table-column label="补单扫码单据类型" prop="name"></el-table-column>
                <el-table-column label="推前时长（小时）" prop="beforeTime"></el-table-column>
                <el-table-column label="补单默认仓库" prop="defautInvName"></el-table-column>
                <el-table-column label="补单默认分库" prop="defautSubInvName"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="handleModifyClick(scope.row)"
                        >编辑
                        </el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-dialog
            :title="formMap[changeEdit]"
            :visible.sync="editChangeTypeVisible"
            width="55%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
            v-if="editChangeTypeVisible">

            <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="editQuery.scAction" placeholder="请选择扫码单据类型" clearable="true">
                            <el-option
                                v-for="item in codeTypes"
                                :key="item.name"
                                :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-input
                            style="width: 200px"
                            size="small"
                            splaceholder="请输入内容"
                            v-model="editQuery.beforeTime"
                        ></el-input>
                    </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="editQuery.defaultInv" placeholder="默认仓库" clearable="true"
                                   @change="invChange"
                                   size="small">
                            <el-option
                                v-for="item in storageList"
                                :key="item.name"
                                :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="editQuery.defaultSubInv" placeholder="默认分库" clearable="true"
                                   size="small">
                            <el-option
                                v-for="item in subInvList"
                                :key="item.name"
                                :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-input
                            style="width: 200px"
                            size="small"
                            splaceholder="请输入内容"
                            v-model="editQuery.index"
                            disabled="false"
                        ></el-input>
                    </div>
                </el-col>
                <el-col :span="10" class="el-col">
                    <div class="text item">
                        <div class="itemTag">
                            <span>备注:&nbsp;</span>
                        </div>
                        <el-input
                            style="width: 200px"
                            size="small"
                            splaceholder="请输入内容"
                            v-model="editQuery.remark"
                        ></el-input>
                    </div>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="hideForm" size="small">取消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click.native="formSubmit()"
                    :loading="formLoading"
                >提交
                </el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {getOriginBusType} from "../../api/basic/busOriginType";
import {getBussinessType, getJoinBussinessType} from "../../api/basic/bussinessType";
import {
    getChangeBusType,
    addChangeBusType,
    deleteChangeBusType,
    updateChangeBusType, removeBusChange
} from "../../api/basic/busChangeType";
import {filterAll} from "@/api/basic/invWarehouse";
import {filterSubByInv} from "@/api/basic/invSubWarehouse";

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

    data() {
        return {
            query: {
                action: null,
                type: null,
            },
            filterQuery: {
                enabled: true,
                isBuType: true,
            },
            editQuery: {},
            thirdSys: [],
            localTypes: [],
            originTypes: [],
            codeTypes: [],
            value: "",
            changeEnable: false,
            changeEdit: 0,
            editChangeTypeVisible: false,
            formMap: {
                0: "新增",
                1: "编辑",
            },
            changeList: [],
            visibleChange: false,
            loading: false,
            storageList: [],
            subInvList: [],
        }
    },
    methods: {
        getList() {
            this.query.action = this.inputQuery.action;
            getChangeBusType(this.query)
                .then((response) => {
                    if (response.code == 20000) {
                        this.changeList = response.data || [];
                        if (this.inputQuery.changeEnable) {
                            this.visibleChange = true;
                        }

                        this.changeEnable = true;
                        // if (this.changeList.length == 0)
                        //     this.changeEnable = false;
                        // else
                        //     this.changeEnable = true;

                    } else {
                        // this.$message.error(response.message);
                        this.visibleChange = false;
                        this.changeEnable = false;

                    }

                })
                .catch(() => {
                });
        },
        getTypes() {
            let tQuery = {
                onlyMain: true,
            }
            getOriginBusType(tQuery)
                .then((response) => {
                    this.originTypes = response.data.list || [];
                })
                .catch(() => {
                });
            this.getBusTypes();
        },

        getBusTypes() {
            let query = {
                enabled: true,
                filterAction: this.inputQuery.action,
            };
            getJoinBussinessType(query)
                .then((response) => {
                    this.codeTypes = response.data.list || [];
                })
                .catch(() => {
                });
        },

        removeBusChangeType() {
            let query = {
                scAction: this.inputQuery.action,
            };
            removeBusChange(query)
                .then((response) => {
                    this.changeList = [];
                })
                .catch(() => {
                });
        },
        addChangeType() {
            this.changeEdit = 0;
            this.editQuery = {};
            this.editChangeTypeVisible = true;
        }
        ,
        handleModifyClick(row) {
            this.changeEdit = 1;
            this.editQuery = JSON.parse(JSON.stringify(row));
            this.editChangeTypeVisible = true;
            this.getBusTypes();
        }
        ,
        hideForm() {
            this.editChangeTypeVisible = false;
        }
        ,
        formSubmit() {
            if (this.changeEdit == 0) {
                this.editQuery.action = this.inputQuery.action;
                addChangeBusType(this.editQuery)
                    .then((response) => {
                        this.editChangeTypeVisible = false;
                        this.getList();
                    })
                    .catch(() => {
                    });
            } else {
                updateChangeBusType(this.editQuery)
                    .then((response) => {

                        if (response.code == 999) {
                            this.$message.error(response.message);
                        } else {
                            this.editChangeTypeVisible = false;
                            this.getList();
                        }
                    })
                    .catch(() => {
                    });
            }
        }
        ,
        deleteClick(row) {
            let query = {
                id: row.id,
            }
            deleteChangeBusType(query)
                .then((response) => {
                    this.editChangeTypeVisible = false;
                    this.getList();
                })
                .catch(() => {
                });
        }
        ,

        advanceChange() {
            if (this.inputQuery.advanceType) {
                this.inputQuery.preIn = false;
            }
        },

        preInChange() {
            if (this.inputQuery.preIn) {
                this.inputQuery.changeEnable = false;
                this.inputQuery.advanceType = false;
            }
        },
        isChangeOrder() {
            console.log("this.inputQuery.changeEnable = " + this.inputQuery.changeEnable);
            if (this.inputQuery.changeEnable) {
                this.query.type = "changeEnable";
                this.getList()
                //
            } else {
                this.visibleChange = false;
                this.removeBusChangeType();
                this.inputQuery.supplementAll = false;
            }
        }
        ,
        supplementChange() {
        },
        getStorage() {
            this.storageList = [];
            filterAll()
                .then((response) => {
                    this.storageList = response.data || [];
                    this.findDefaultSubInv();
                })
                .catch(() => {
                });
        },
        findDefaultSubInv() {
            this.subInvList = [];
            let query = {
                pcode: this.editQuery.defaultInv
            };
            filterSubByInv(query)
                .then((response) => {
                    this.subInvList = response.data || [];
                })
                .catch(() => {
                });
        },
        invChange() {
            if (this.$isNotBlank(this.inputQuery.defaultSubInv))
                this.inputQuery.defaultSubInv = null;
            this.findDefaultSubInv();
        },
    },

    created() {
        this.getTypes();
        this.getList();
        this.getStorage();
    }
    ,
}
;
</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>
